:root {
    --dark-color: rgb(10,10,10);
    --dark-color-2: rgb(50,50,50);
    --light-color:white;
    --light-color-2: rgb(245,245,245);
}

body {
    margin: 0;
    background-color: var(--light-color);
    font-size: 18px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    line-height: 25px;
}

/* Layout offset */
body {
    margin-left: 270px;
}

/* Sidebar */
#toc {
    position: fixed;
    top: 0;
    left: 0;
    width: 180px;
    height: 100vh;
    overflow-y: auto;
    padding: 25px 20px;
    background: #f8f9fa;
    border-right: 1px solid #ddd;
    font-family: sans-serif;
}

/* Remove bullets */
#toc ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

/* Spacing */
#toc li {
    margin: 6px 0;
}

/* Hierarchical indentation */
.toc-h1 {
    font-weight: 600;
}

.toc-h2 {
    padding-left: 18px;
    font-size: 0.95em;
}

.toc-h3 {
    padding-left: 36px;
    font-size: 0.9em;
}

/* Links */
#toc a {
    text-decoration: none;
    color: #333;
    display: block;
}

#toc a:hover {
    color: #007acc;
}

/* Active highlight */
#toc a.active {
    color: #007acc;
    font-weight: 600;
}

/* Section number styling */
.section-number {
    font-weight: 600;
}

.ref-link {
    text-decoration: none;
    color: #007acc;
}

.ref-link:hover {
    text-decoration: underline;
}

.figure-number {
    font-weight: 600;
}

header {
    margin: 0;
    font-size: 5rem;
    background-color: var(--light-color-2);
    display: flex;
    justify-content: center;
    align-items: center;
}

a {
    text-decoration: none;
    color: inherit;
}

main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding: 5px;
    align-items: start;
    align-items: center;
}

.main-div {
    background-color: var(--light-color-2);
    border-radius: 4px;
    margin: 20px;
}

.main-div a {
    text-align: center;
    text-justify: center;
    width: 40%;
    height: 10rem;
    overflow: hidden;
    background-color: var(--light-color-2);
    border-radius: 4rem;
}

.main-div a img {
    width: 100%;
    height: 100%;
    object-fit: cover;      /* fills box without distortion */
    object-position: center; /* crop centered */
    top: 0;
    left: 0;
    overflow: hidden;
}

.navigation_bar {
    list-style-type: none;
    margin: 1rem;
    padding: 0;
    overflow: hidden;
    width: 100%;
}

.svg_darkmode {
    height: 25px;
    cursor: pointer;
}

.menu_grid {
    display: flex;
    justify-content: center;
    max-width: 90%;
    width: 60rem;
    margin: auto;
    padding-top: 4rem;
    gap: 2rem;
}

.section {
    max-width: 90%;
    width: 60rem;
    margin: 0px auto 100px auto;
}

.section-button {
    transform: translateX(-0.6rem) translateY(-3.5rem) rotate(90deg);
    margin: -18px;
    cursor: pointer;
    transition: transform 0.5s ease-in-out;
}

.section-collapsable {
    display: block;
    overflow: hidden;
    max-height: fit-content;
    transition: max-height 0.2s ease-in-out;
    padding-left: 10px;
    border-left: 5px solid rgba(128, 128, 128, 0.658);
}

.collapse-button {
    background-color: var(--light-color-2);
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: center;
    outline: none;
    font-size: 15px;
}

.small-button {
    background-color: var(--light-color-2);
    display: inline;
    width:fit-content;
    border: none;
    cursor: pointer;
    outline: none;
    border-radius: 0rem 0rem 0rem 0rem;
    transition: border-radius 0.5s ease-in-out;
}

.active, .collapse-button:hover, .small-button:hover {
    background-color: var(--light-color-2);
}

.subsection-collapsable {
    display: block;
    overflow: hidden;
    max-height: 10vh;
    transition: max-height 0.2s ease-in-out;
}

.subsection-mathematica {
    background-color: var(--light-color-2);
    display: block;
    overflow: hidden;
    max-height: 0vh;
    border-radius: 1rem;
    transition: max-height 0.2s ease-in-out;
}

.figure {
    width:90%;
    display: block;
    justify-content: center;
    margin: 40px;
}

.figure img {
    display: block;
    max-width: 90%;
    margin: auto;
}

.figure-2, .figure-3, .figure-4, .figure-1-2 {
    display: grid;
    width: 90%;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    justify-content: center;
}
.figure-2 {grid-template-columns: repeat(2, 1fr);}
.figure-3 {grid-template-columns: repeat(3, 1fr);}
.figure-4 {grid-template-columns: repeat(4, 1fr);}
.figure-1-2 {grid-template-columns: 1fr 2fr;}


.figure-2 img,.figure-3 img,.figure-4 img,.figure-1-2 img {
    width: 100%;
    height: 100%;
    /* Ensures images maintain aspect ratio without stretching */
    object-fit: cover;
    /* Ensures proper scaling within the grid context */
    min-width: 0; 
    min-height: 0;
}

.dynamic-plot {
    display: flex;
    /* grid-template-columns: 1fr 1fr; */
}

.green-box {
    width: 95%;
    justify-content: center;
    padding: 10px 20px;
    background: rgba(0, 128, 0, 0.3);
    border-left: 7px solid rgba(0, 128, 0, 0.511);
}

.red-box {
    width: 95%;
    justify-content: center;
    padding: 10px 20px;
    background: rgba(128, 0, 0, 0.3);
    border-left: 7px solid rgba(128, 0, 0, 0.493);
}

.purple-box {
    width: 95%;
    justify-content: center;
    padding: 10px 20px;
    background: rgba(113, 0, 128, 0.3);
    border-left: 7px solid rgba(113, 0, 128, 0.493);
}

@media all and (min-aspect-ratio: 16/10) {
    .main-div {
        flex: 33.33%;
    }
}

@media all and (max-aspect-ratio: 1/1) {
    .main-div {
        flex: 100%
    }
}

@media all and (width < 1080px) {
    body {
        margin-left: 0;
    }
    #toc {
        display: none;
    }
}