/* Styling for a canvas */
.diagram-container {
    width: 400px;
    height: 200px;
    border: 2px solid #333; /* The "box" border */
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px auto; /* Centers the box on the page */
    background-color: #f9f9f9;
}

/* Styling for a SVG line to be a wire */
.copper-wire {
    stroke: #b87333; /* A common copper color */
    stroke-width: 3px; /* The thickness of the wire */
}

/* Styling for a SVG circle to be an electron */
.electron {
        fill: #ffd700; /* A golden yellow color */
}
h2 { text-align: center; }

/* block math style for MathJax blocks with element selector */
mjx-container[display="true"] {
    background-color: #fcfcfc;    
    border-left: 4px solid #4a90e2; 
    padding: 1.5em !important;
    margin: 2em 0 !important;     
    box-shadow: 2px 2px 5px rgba(0,0,0,0.02); 
    overflow-x: auto;              /* Prevents mobile layout break if equation is too long for phone screen */
    overflow-y: hidden;
}