body {
    display: grid;
}

/* ---------- Intro image section ---------- */

.navPlusImage {
    display: grid;
    overflow: hidden;
    position: relative;
    min-height: max(30vh, min(30vh, 300px));
}

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

.flame {
    position: absolute;
    width: 100%;
    height: min(100%, 50vw);
    align-self: end;
    z-index: -1;
}

.poetry {
    background-color: var(--tan-color);
    font-family: Fraunces, ui-sans-serif;
    font-size: max(max(2vh, 20px), min(2vw, 20px));
    text-wrap: nowrap;
    padding: max(max(0.5vh, 5px), min(0.5vw, 5px))
        max(max(1vh, 10px), min(1vw, 10px));
}

.poetryBox {
    margin-left: max(5vh, min(7vw, 70px));
    position: absolute;
    left: min(max(-4vh, -40px), min(-4vw, -40px));
}

.poetryLine {
    margin-bottom: max(max(1.3vh, 13px), min(1.3vw, 13px));
}

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

#poetry2 {
    margin-left: max(max(1vh, 10px), min(1vw, 10px));
    padding-right: max(max(3vh, 30px), min(3vw, 30px));
}

#poetry3 {
    margin-left: max(max(5vh, 50px), min(5vw, 50px));
    max-width: max(max(11vh, 110px), min(11vw, 110px));
}

#poetry4 {
    margin-left: max(max(3vh, 30px), min(3vw, 30px));
}

#poetry5 {
    margin-left: max(max(1vh, 10px), min(1vw, 10px));
}

.introImgBox {
    display: flex;
    justify-content: right;
    min-width: max(max(55vh, 550px), min(55vw, 550px));
}

@media (width < 500px) {
    .introImgBox {
        min-width: 42vh;
        margin-top: 6vh;
    }
    .navBarList {
        justify-content: left;
    }
}

.bcorpLogo {
    position: absolute;
    height: max(max(15vh, 15px), min(15vw, 15px));
    min-height: 125px;
    top: max(max(9vh, 90px), min(9vw, 90px));
    right: max(max(3vh, 30px), min(3vw, 30px));
}

@media (width < 695px) {
    .bcorpLogo {
        top: max(max(11vh, 110px), max(11vw, 110px));
    }
}

.protractor {
    margin-left: max(max(16vh, 160px), min(16vw, 160px));
    width: min(100%, max(max(90vh, 900px), min(90vw, 900px)));
}

@media (width < 1000px) {
    .protractor {
        margin-top: 8vh;
    }
}

@media (width < 500px) {
    .protractor {
        margin-top: 6vh;
    }
}

/* ---------- Therapist display and search section ---------- */

.firstStepGrid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-column-gap: max(max(4vh, 40px), max(4vw, 40px));
    grid-row-gap: max(max(4vh, 40px), max(4vw, 40px));
}

@media (width > 1200px) {
    .firstStepGrid {
        grid-column-gap: 0;
    }
}

.firstStepBox {
    margin-top: max(max(2vh, 20px), max(2vw, 20px));
    margin-left: max(max(1vh, 10px), max(1vw, 10px));
    width: min-content;
    grid-row-start: 1;
    grid-row-end: 3;
    align-self: center;
}

.oxidize {
    height: max(max(23vh, 230px), min(23vw, 230px));
    position: absolute;
    z-index: -1;
}

@media (width < 450px) {
    .oxidize {
        margin-left: max(max(-2vh, -20px), max(-2vw, -20px));
    }
}

.firstStepText {
    color: white;
    font-size: max(max(3.5vh, 35px), min(3.5vw, 35px));
    margin-top: max(max(2.5vh, 25px), min(2.5vw, 25px));
    margin-left: max(max(3.2vh, 32px), min(3.2vw, 32px));
    font-family: Plaster, ui-serif;
}

.findRightTherapist {
    margin-top: max(max(2vh, 20px), min(2vw, 20px));
    grid-column-start: 2;
    grid-column-end: 7;
    background-color: var(--salmon-color);
    color: white;
    font-variant: small-caps;
    font-family: Baloo2-Bold, ui-sans-serif;
    text-align: center;
    font-size: max(max(2.5vh, 25px), min(2.5vw, 25px));
    margin-right: max(max(2vh, 20px), min(2vw, 20px));
    line-height: max(max(3.5vh, 35px), min(3.5vw, 34px));
}

@media (width > 1200px) {
    .findRightTherapist {
        margin-left: max(max(-2vh, -20px), min(-2vw, -20px));
    }
}

.headshotBox {
    display: flex;
    flex-wrap: wrap;
    grid-column-start: 2;
    grid-column-end: 7;
    margin-top: min(max(-4vh, -40px), min(-4vh, -40px));
    margin-left: min(max(-4vh, -40px), min(-4vh, -40px));
    justify-content: center;
}

@media (width < 450px) {
    .headshotBox {
        margin-left: min(max(-7vh, -70px), min(-7vw, -70px));
    }
    .findRightTherapist {
        margin-left: min(max(-4vh, -40px), min(-4vw, -40px));
    }
}

.therapistImage {
    width: max(max(13.5vh, 135px), min(13.5vw, 135px));
    height: max(max(13.5vh, 135px), min(13.5vw, 135px));
    padding-left: max(max(2vh, 20px), min(2vw, 20px));
    padding-top: max(max(2vh, 20px), min(2vw, 20px));
}

.filterBarBox {
    display: flex;
    flex-wrap: wrap;
    margin-top: max(3.5vh, min(3.5vw, 35px));
    margin-left: max(0.9vh, min(0.9vw, 9px));
}

@media (width <= 891px) {
    .filterBarBox {
        justify-content: center;
    }
}

.filterBar, .filterBar2 {
    background-color: var(--tan-color);
    width: max(15.8%, 15.8vh);
    min-width: 5vh;
    text-align: center;
    color: var(--forest-color);
    padding-top: max(0.5vh, min(0.5vw, 5px));
    padding-bottom: max(0.5vh, min(0.5vw, 5px));
    font-family: Baloo2-Bold, ui-sans-serif;
    font-variant: small-caps;
    font-size: max(max(2.4vh, 24px), min(2.4vw, 24px));
    font-weight: bold;
    border: max(0.5vh, min(0.5vw, 5px)) solid white;
    border-radius: max(0.5vh, min(0.5vw, 5px));
}

.filterBar2 {
    width: 100%;
}

.filterBar:hover {
    background-color: var(--spring-color);
}

.browseLink {
    width: max(15.8%, 15.8vh);
    min-width: 140px;
    text-decoration: none;
}

.browse {
    background-color: var(--forest-color);
    color: var(--spring-color);
    width: 100%;
}

.browse:hover {
    color: var(--forest-color);
}

/* ---------- Popup section ---------- */

.overlay {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    visibility: hidden;
    opacity: 0;
    display: grid;
    z-index: 20;
}

.overlay:target {
    visibility: visible;
    opacity: 1;
}

form {
    align-self: center;
    justify-self: center;
}

.popup {
    padding: 20px;
    border-radius: 5px;
    width: min(50vw, 500px);
    position: relative;
    transition: all 0.5s ease-in-out;
    display: grid;
    background-color: var(--tan-color);
}

.popup .close {
    position: absolute;
    top: 10px;
    right: 20px;
    transition: all 200ms;
    font-size: 30px;
    font-weight: bold;
    text-decoration: none;
    color: #333;
}
.popup .close:hover {
    color: #06D85F;
}

.popup .content {
    max-height: 30%;
    overflow: auto;
}

.popupLink {
    text-decoration: none;
    min-width: 140px;
    width: max(16.6%, 16.6vh);
}

.optionBox {
    display: grid;
    justify-self: center;
    align-self: center;
    width: 70%;
}

.explainer, .checkBoxLabel {
    display: grid;
    grid-template-columns: 70% 30%;
    width: 70%;
    margin-top: max(max(1vh, 10px), min(1vw, 10px));
    justify-self: center;
    height: max(max(7vh, 70px), min(7vw, 70px));
    line-height: 1em;
}

.checkBoxLabel:hover {
    background-color: var(--sage-color);
}

.checkBoxLabel {
    font-family: Baloo2, ui-sans-serif;
    font-size: 1.2em;
    cursor: pointer;
    align-content: center;
    text-align: center;
    padding-left: 25%;
    width: 100%;
}

@media (width < 800px) {
    .checkBoxLabel {
        margin-top: 0;
    }
}

@media (width < 500px) {
    .checkBoxLabel {
        font-size: 1.1em;
    }
}

@media (width < 400px) {
    .checkBoxLabel_specialty {
        margin-left: max(max(2vh, 20px), min(2vw, 20px));
    }
}

.checkbox {
    cursor: pointer;
    scale: 1.5;
    align-self: center;
    justify-self: center;
    visibility: hidden;
    width: 1px;
    height: 1px;
    position: absolute;
}

/* Specialty Popup */

.specialtyTitle {
    font-family: Baloo2, ui-sans-serif;
    font-size: 1.4em;
    text-align: center;
    width: 70%;
    justify-self: center;
    margin-bottom: max(max(2vh, 20px), max(2vw, 20px));
}

.specDetails {
    padding-right: max(max(2vh, 20px), max(2vw, 20px));
    padding-left: max(max(2vh, 20px), max(2vw, 20px));
    padding-bottom: max(max(2vh, 20px), max(2vw, 20px));
    cursor: pointer;
}

.optionBox:has(.specDetails[open]) {
    & > details:not([open]) {
        display: none;
    }
}

.optionBox_specialtyPopup {
    display: flex;
    flex-wrap: wrap;
    justify-self: center;
    align-self: center;
    width: 70%;
}

.specSummary {
    font-family: Baloo2, ui-sans-serif;
    font-size: 1.3em;
}

.checkBoxLabel_specialty {
    font-family: Baloo2, ui-sans-serif;
    height: max(max(5vh, 50px), min(5vw, 50px));
    margin-left: max(max(-6vh, -60px), max(-6vw, -60px));
    width: 150%;
    line-height: 1em;
}

@media (width < 650px) {
    .specialtyTitle {
        font-size: 1.2em;
    }
    .specSummary {
        font-size: 1.1em;
    }
    .specDetails {
        padding: max(1vh, min(1vw, 10px)) max(2vh, min(2vw, 20px))
        max(1vh, min(1vw, 10px)) max(max(2vh, 10px), max(2vw, 10px));
    }
}

@media (width < 500px) {
    .specDetails {
        padding-bottom: max(max(0.2vh, 2px), max(0.2vw, 2px));
        position: relative;
        z-index: 50;
        background-color: var(--tan-color);
    }
    .specialtyTitle {
        margin-bottom: 0;
    }
}

/* Insurance Popup */

.insLogo {
    width: 80%;
    max-width: 13vh;
    min-width: 9vh;
    margin-left: 20%;
}

@media (width < 800px) {
    .insLogo {
        margin-left: 10%;
    }
}

@media (width < 400px) {
    .insLogo {
        margin-left: 5%;
    }
}


/* ---------- Footer section ---------- */

.footerBox {
    display: grid;
}

.benefitReportBox {
    justify-self: center;
    text-decoration: none;
    display: grid;
    grid-template-columns: 10px 100% 10px;
    margin-top: max(max(4vh, 40px), min(4vw, 40px));
}

.benefitReport {
    font-family: Baloo2, ui-sans-serif;
    font-size: max(max(3vh, 30px), min(3vw, 30px));
    color: var(--forest-color);
    margin-left: max(max(2vh, 20px), min(2vw, 20px));
    margin-right: max(max(2vh, 20px), min(2vw, 20px));
    text-decoration: none;
    text-align: center;
    font-weight: bold;
    align-self: center;
    z-index: 10;
}

.arrows {
    color: var(--gold-color);
    font-family: Baloo2, ui-sans-serif;
    font-size: max(max(3vh, 30px), max(3vw, 30px));
    text-decoration: none;
    align-self: center;
    justify-self: center;
}

.contactBox {
    margin-top: max(-6vh, min(-6vw, 60px));
}

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

@media (width < 500px) {
    .benefitReport, .arrows {
        font-size: max(max(2vh, 20px), max(2vw, 20px));
    }
}

@media (width < 375) {
    .benefitReportBox {
        margin-left: -5vh;
    }
    .contactBox {
        margin-left: -4vh;
    }
}