/* ------------- Paragraph text ------------ */

.paragraph {
    font-family: Fraunces, ui-sans-serif;
    font-variation-settings: "SOFT" 50;
    font-size: max(max(1.8vh, 18px), min(1.8vw, 18px));
    line-height: max(3.5vh, max(3.5vh, 35px));
    margin: max(max(2vh, 20px), min(2vw, 20px))
    max(max(4vh, 40px), min(2vw, 20px));
    text-align: justify;
}

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

/* -------------- Title bars ------------------- */

.introBox {
    display: grid;
}

.introTitle, .jobOpeningTitle, .payAndBenefitsTitle, .valuesTitle {
    font-family: Fraunces, ui-sans-serif;
    font-variation-settings: "SOFT" 100;
    font-weight: bold;
    font-size: max(max(4vh, 40px), min(4vw, 40px));
    justify-self: center;
    width: 95%;
    text-align: center;
    padding: max(max(2vh, 20px), min(2vw, 20px));
    margin-top: max(max(3vh, 30px), min(3vw, 30px));
    margin-bottom: max(max(3vh, 30px), min(3vw, 30px));
}

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

.jobOpeningTitle {
    background-color: var(--kelly-color);
}

.payAndBenefitsTitle {
    background-color: var(--ocean-color);
}

.valuesTitle {
    background-color: var(--magenta-color);
}

/* ----------- Intro Section --------------- */

.inPageLinks {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: max(max(3vh, 30px), min(3vw, 30px));
}

.exploreLink, .whyJoinLink, .valuesLink {
    font-family: Baloo2-Bold, ui-sans-serif;
    font-weight: bold;
    font-size: max(max(2vh, 20px), min(2vw, 20px));
    justify-self: center;
    color: white;
    padding-left: max(max(3vh, 30px), min(3vw, 30px));
    padding-right: max(max(3vh, 30px), min(3vw, 30px));
    margin-left: max(max(3vh, 30px), min(3vw, 30px));
    margin-right: max(max(3vh, 30px), min(3vw, 30px));
    margin-top: max(max(3vh, 30px), min(3vw, 30px));
    text-decoration: none;
}

.exploreLink {
    background-color: var(--ocean-color);
}

.whyJoinLink {
    background-color: var(--magenta-color);
}

.valuesLink {
    background-color: var(--kelly-color);
}

/* -------------- Pay and Benefits section ---------- */

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

.payParagraph {
    text-align: left;
}

.pay, .hours, .support {
    display: grid;
    width: 50%;
    min-width: max(max(35vh, 350px), min(35vw, 350px));
    padding-top: max(max(1vh, 10px), min(1vw, 10px));
}

.support {
    width: 50%;
    justify-self: center;
}


@media (width < 731px) {
    .pay, .hours, .support {
        width: unset;
    }
}

.payAndBenefitsIcon {
    align-self: center;
    justify-self: center;
}

.benefitBox {
    display: grid;
}

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

.benefit {
    font-family: Baloo2-Bold, ui-sans-serif;
    font-weight: bold;
    font-size: max(max(2vh, 20px), min(2vw, 20px));
    width: 45%;
    min-width: max(max(35vh, 350px), min(35vw, 350px));
    margin-left: max(max(3vh, 30px), min(3vw, 30px));
    margin-top: max(max(2vh, 20px), min(2vw, 20px));
}

.benefit::marker {
    color: var(--ocean-color);
}



/* -------------- Values section --------------- */

.valueHeader {
    font-family: Baloo2-Bold, ui-sans-serif;
    font-weight: bold;
    font-size: max(max(2.4vh, 24px), min(2.4vw, 24px));
}

.valuesTitle {
    margin-bottom: max(max(1vh, 10px), min(1vw, 10px));
}

.valuesBox {
    display: grid;
}

.valueBox {
    margin-left: 20%;
    margin-right: 20%;
    padding-top: max(max(1vh, 10px), min(1vw, 10px));
    padding-bottom: max(max(1vh, 10px), min(1vw, 10px));
}

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

.beliefItem {
    padding-top: max(max(1vh, 10px), min(1vw, 10px));
    padding-bottom: max(max(1vh, 10px), min(1vw, 10px));
    font-family: Fraunces, ui-sans-serif;
    font-variation-settings: "SOFT" 50;
    font-size: max(max(1.8vh, 18px), min(1.8vw, 18px));
    line-height: max(3.5vh, max(3.5vh, 35px));
}


.valueParagraph {
    margin: max(max(2vh, 20px), min(2vw, 20px))
        max(max(4vh, 40px), min(2vw, 20px));
    font-family: Fraunces, ui-sans-serif;
    font-variation-settings: "SOFT" 50;
    font-size: max(max(1.8vh, 18px), min(1.8vw, 18px));
    line-height: max(3.5vh, max(3.5vh, 35px));
    text-align: left;
}

@media (width < 731px) {
    .valueBox {
        margin-left: 5%;
        margin-right: 5%;
    }
}

/* -------------- Job openings section ----------- */

.jobOpeningsBox {
    display: grid;
}

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

.job {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.jobTitle, .jobLocation {
    align-self: center;
    margin-top: max(max(2vh, 20px), min(2vw, 20px));
    margin-left: max(max(2vh, 20px), min(2vw, 20px));
    font-family: Fraunces, ui-sans-serif;
    font-variation-settings: "SOFT" 50;
    font-size: max(max(1.8vh, 18px), min(1.8vw, 18px));
    line-height: max(3.5vh, max(3.5vh, 35px));
    text-align: left;
}

.jobLink {
    font-family: Baloo2-Bold, ui-sans-serif;
    color: white;
    margin-left: 30%;
    justify-self: center;
    align-self: center;
    padding: max(max(0.5vh, 5px), min(0.5vw, 5px));
    margin-top: max(max(2vh, 20px), min(2vw, 20px));
    font-size: max(max(2vh, 20px), min(2vw, 20px));
}

.jobLink0 {
    background-color: var(--ocean-color);
}

.jobLink1 {
    background-color: var(--magenta-color);
}

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

.jobOpeningsQuestions {
    font-family: Baloo2-Bold, ui-sans-serif;
    font-size: max(max(1.8vh, 18px), min(1.8vw, 18px));
    margin-top: max(max(8vh, 80px), min(8vw, 80px));
    align-self: center;
    justify-self: center;
}

.jobOpeningsContact {
    font-family: Baloo2-Bold, ui-sans-serif;
    font-size: max(max(1.8vh, 18px), min(1.8vw, 18px));
    align-self: center;
    justify-self: center;
    margin-top: max(max(2vh, 20px), min(2vw, 20px));
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

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

.jobContactEmail {
    margin-left: max(max(2vh, 20px), min(2vw, 20px));
    color: var(--slate-color);
}

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