body {
    display: grid;
}

.pageBox {
    display: grid;
}

.contentBox {
    width: 90%;
    justify-self: center;
    display: grid;
}

.missionBox {
    display: grid;
    margin-top: max(max(4vh, 40px), min(4vw, 40px));
    justify-self: center;
}

.missionLabel {
    font-family: Plaster, ui-serif;
    font-size: max(max(2.4vh, 24px), min(2.4vw, 24px));
    justify-self: center;
}

.missionText {
    font-family: Fraunces, ui-sans-serif;
    font-size: max(max(2vh, 20px), min(2vw, 20px));
    font-style: italic;
    justify-self: center;
    margin: max(max(2.4vh, 24px), min(2.4vw, 24px));
    line-height: max(3.5vh, max(3.5vh, 35px));
    text-align: justify;
}

@media (width < 760px) {
    .missionText {
            text-align: left;
    }
}

.historyBox {
    align-self: center;
    color: var(--forest-color);
    display: grid;
    margin-left: max(max(8vh, 80px), min(8vw, 80px));
    grid-template-rows: 1fr 1fr 1fr;
}

.aboutGrid {
    display: flex;
    flex-wrap: wrap;
    font-family: Baloo2-Bold, ui-sans-serif;
    font-size: max(max(2.4vh, 24px), min(2.4vw, 24px));
    justify-content: center;
    width: 90%;
    margin-top: max(max(2vh, 20px), max(2vw, 20px));
}

.history, .oldLogoBox, .infoLink {
    height: max(max(6vh, 60px), min(6vw, 60px));
    align-content: center;
    text-align: center;
    margin-bottom: max(max(4vh, 40px), max(4vw, 40px));
}

.aboutBox {
    display: grid;
    margin-left: max(max(8vh, 80px), min(8vw, 80px));
    color: var(--ocean-color);
}

@media (width <= 870px) {
    .history, .aboutBox {
        margin-bottom: max(max(2vh, 20px), min(2vw, 20px));
    }
}

@media (width < 657px) {
    .aboutBox, .historyBox {
        margin-left: 0;
    }
}

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

.oldLogoBox {
    display: flex;
    grid-template-columns: 1fr 1fr;
    justify-content: center;
}

.oldLogoLabel {
    align-self: center;
}

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

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

.faqBox {
    margin-top: max(max(-4vh, -40px), min(-4vw, -40px));
}

.question, .answer {
    font-family: Fraunces, ui-sans-serif;
    font-size: max(max(1.8vh, 18px), min(1.8vw, 18px));
    text-align: justify;
    padding-left: max(max(3vh, 30px), min(3vw, 30px));
    padding-right: max(max(4vh, 40px), min(4vw, 40px));
    line-height: max(3.5vh, max(3.5vh, 35px));
}

@media (width < 575px) {
    .question, .answer {
        text-align: left;
    }
}

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

.answer {
    margin-left: max(max(4vh, 40px), min(4vw, 40px));
}