h1 {font-family:Futura, sans-serif; color:white; text-align:center}
h2 {font-family:Futura, sans-serif; font-size: 1.3em; color:white}
h3 {font-family:Futura, sans-serif; color:white}
p {font-family:Monaco, monospace; color:white}
ol {font-family:Monaco, monospace; color:white}
ul {font-family:Monaco, monospace; color:white}
a {font-family:Monaco, monospace; color:#0062ff; text-decoration: none}
table {font-family:Monaco, monospace; color:white}
img {width: 90%; height: auto}
hr {border: 1px solid white; margin-bottom: 0; margin-top: 0}
pre {
    white-space: pre-wrap; /* Allows wrapping inside <pre> */
    word-wrap: break-word; /* Break long words */
    display: inline-block; /* Keeps box hugging the text */
    margin: 0; /* Removes extra space */
    padding: 0; /* No extra padding inside */
    text-align: center;
    background-color: #101010;
    color: white;
    border-radius: 5px; /* Optional: Rounded corners */
    overflow-x: auto; /* Adds scroll if the content is too wide */
    max-width: 100%; /* Ensures it doesn't exceed the screen width */
}
code {font-family:Monaco, monospace; color: #f8f8f2}
.imageborder {
    width: 100%;
    height: auto;
    border-style: solid;
    border-color: white;
}
.seperator {border: 0.5px solid white; margin-bottom: 2em; margin-top: 2em;}
.spacer {justify-content: space-between; display: flex; margin: 1em 0;}
div[style="margin:2em"] {margin: 1em; padding: 1em;}
#header, #footer {background-color: #000; color: white; text-align: center; padding: 1em 0;}
body {margin: 0; padding: 0; font-family: Monaco, monospace; line-height: 1.6; color: white;}

.equations-container {display: flex; justify-content: center; align-items: center; gap: 6em; margin: 2em 0;}
.equations-container div {
    max-width: 100%;
    overflow-x: auto; /* Adds horizontal scrolling for very wide equations */
    text-align: center; /* Centers equations within their container */
}
figure {
    margin: 0 0 1em;
    text-align: center;
    display: inline-flex; /* Ensures the image and caption are treated as a single block */
    flex-direction: column; /* Stack image and caption vertically */
    align-items: center;
    vertical-align: top;   /* Align figures vertically to the top */
}
figcaption {
    word-wrap: break-word;
    white-space: normal;
    color: white;
    font-family: Monaco, monospace;
    font-size: 0.9em;
    margin-top: 5px; /* Spacing between image and caption */
    max-width: 100%;
}
.image-container {
    text-align: center;
    display: flex;
    justify-content: center; /* Center the entire row of images */
    gap: 10px; /* Space between images */
    flex-wrap: wrap; /* Wrap to the next row if the screen is too narrow */
}

@media (max-width: 768px) {
    #header {font-size: 1.5em; padding: 0.5em 0;}
    #footer {font-size: 0.8em; padding: 0.5em 0;}
    .spacer h2 {font-size: 1.2em;}
    div[style="margin:2em"] {margin: 1em 0.5em; padding: 0.5em;}
    .equations-container {
        flex-direction: column; /* Stack equations vertically on small screens */
        gap: 1em; /* Reduce spacing between equations on small screens */
    }
    .equations-container div {
        font-size: 0.9em; /* Optionally reduce font size for better fit */
    }
}