body {
    display: grid;
}

.pageBox {
    display: grid;
}

.contentBox {
    display: grid;
    margin-left: max(max(3vh, 30px), min(3vw, 30px));
    width: 90%;
}

.aboutBox {
    display: flex;
    flex-wrap: wrap;
}

.missionBox {
    max-width: 50%;
    min-width: 300px;
    margin-bottom: 20px;
}

.missionLabel {
    font-family: Fraunces, ui-sans-serif;
    font-size: max(max(3.5vh, 35px), min(3.5vw, 35px));
    align-self:center;
    justify-self: left;
    color: var(--slate-color);
    font-weight: 600;
    font-variation-settings: "SOFT" 50;
    white-space: nowrap;
}

.missionText {
    font-family: Fraunces, ui-serif;
    font-variation-settings: "SOFT" 100;
    line-height: max(max(3vh, 30px), min(3vh, 30px));
    font-size: max(max(1.8vh, 18px), min(1.8vw, 18px));
    text-align: left;
    color: black;
    margin-top: max(max(3vh, 30px), min(3vh, 30px));
}

.historyBox {
    margin-left: 7vw;
    margin-top: max(max(1.5vh, 15px), max(1.5vw, 15px));
    max-width: 60%;
}

.history {
    margin-bottom: 10px;
    background-color: var(--blueWhite-color);
    font-family: Baloo2-Bold, ui-sans-serif;
    font-size: max(max(2.7vh, 27px), min(2.7vw, 27px));
    align-self: center;
    justify-self: left;
    white-space: nowrap;
    color: var(--slate-color);
    font-variant: all-small-caps;
    text-align: left;
    padding-left: max(max(2vh, 20px), max(2vw, 20px));
    width: 100%;
}

.TOC {
    white-space: nowrap;
    cursor: pointer;
    background-color: var(--blueWhite-color);
}

.TOCSummary {
    list-style-position: outside;
    margin-left: 5px;
    padding-left: max(5px, 1vw);
}

.TOCSummary::marker {
    content: ">";
}

.TOC[open] {
    background: white;
    cursor: auto;
}

.TOC[open] .TOCSummary::marker {
    content: "⌄";
}

summary {
    cursor: pointer;
}

.TOC:hover {
    background-color: var(--tan-color);
}

body:has(.TOC[open]) .missionBox {
    max-width: 70%;
}

.TOC[open] .TOCSummary {
    list-style-position: inside;
    margin-left: min(-22px, -2.1vw);
    background-color: var(--blueWhite-color);
}

body:has(.TOC[open]) .TOC:hover {
    background-color: white;
}

body:has(.TOC[open]) .TOCSummary:hover {
    background-color: var(--tan-color);
}

.question, .answer, .TOCIntroText, .TOCSubText, .bulletText, .arrowList,
    .arrow {
    font-family: Fraunces, ui-sans-serif;
    font-variation-settings: "SOFT" 50;
    text-align: left;
    color: black;
}

.answer, .TOCIntroText, .TOCSubText, .bulletText, .arrowList, .arrow {
    font-size: max(max(1.8vh, 18px), min(1.8vw, 18px));
    line-height: max(3.5vh, max(3.5vh, 35px));
}

.TOCIntroText, .TOCSubText, .TOCSubSummary, .bulletText, .arrowText, .arrow {
    font-variant: none;
}

.TOCSubtitle, .TOCIntroText, .TOCSubText, .arrowList {
    margin-top: max(max(2vh, 20px), min(2vw, 20px));
    white-space: wrap;
}

.TOCSubtitle {
    justify-self: left;
}

.TOCSubSummary {
    color: var(--ocean-color);
    font-family: Baloo2-Bold, ui-sans-serif;
    font-weight: bold;
    font-size: max(max(2.2vh, 22px), min(2.2vw, 22px));
}

.bulletText::marker {
    content: '•   ';
    font-size: 1.5em;
}

.bulletText {
    margin-left: max(max(2vh, 20px), min(2vw, 20px));
}

.arrowList {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.arrowText {
    text-align: center;
    font-family: Baloo2-Bold, ui-sans-serif;
    font-weight: bold;
    font-size: max(max(2vh, 20px), min(2vw, 20px));
    margin-left: max(max(2vh, 20px), min(2vw, 20px));
}

.arrow {
    margin-left: max(max(2vh, 20px), min(2vw, 20px));
    align-self: center;
    font-size: 2em;
}

.arrowText0 {
    color: var(--gold-color);
}

.arrowText1 {
    color: var(--ocean-color);
}

.arrowText2 {
    color: var(--kelly-color);
}

.arrowText3 {
    color: var(--magenta-color);
}

.question {
    color: var(--forest-color);
    margin-top: max(max(4vh, 40px), min(4vw, 40px));
    margin-bottom: max(max(2vh, 20px), min(2vw, 20px));
    font-size: max(max(2.6vh, 26px), min(2.6vw, 25px));
    font-weight: bold;
}

@media (width < 700px) {

    .aboutBox {
        justify-content: center;
        display: grid;
    }

    .missionBox {
        max-width: 100%;
    }

    .historyBox {
        margin-left: 0;
        max-width: 95%;
    }

    body:has(.TOC[open]) .missionBox {
        max-width: 100%;
    }
}

@media (width < 575px) {

    .question, .answer, .TOC {
        text-align: left;
    }
}

@media (width < 500px) {

    .arrowList {
        margin-left: max(max(-2.8vh, -28px), min(-2.8vw, -28px));
    }
}

@media (width < 402px) {
    .aboutBox {
        margin-top: max(max(4vh, 40px), min(4vw, 40px));
    }
}