body{
    background-color: var(--light-beige);
    scroll-behavior: smooth;
}

h2{
    line-height: calc(var(--size-4)*1.3);
    color: var(--light-blue);
    background-color: var(--black);
    padding-top: 20px;
    padding-bottom: 36px;
    border-radius: 0px 0px 0px 50px;
}

h3{
    font-family: var(--font-4);
    font-size: var(--size-3);
    font-weight: 600;
    color: var(--light-blue);
}

.landing{
    padding-left: 20px;
}

.callout{
    font-family: var(--font-4);
    font-size: var(--size-2);
    padding-left: 55px;
    padding-top: 24px;
    padding-bottom: 24px;
    margin: 0;
    text-wrap: balance;
    color: var(--light-blue);
    border-top: var(--light-beige);
    border-right: solid var(--black);
    border-bottom: solid var(--black);
    border-radius: 0px 0px 50px 0px;
}

.headers{
    font-family: var(--font-2);
    font-size: var(--size-3);
    line-height: calc(var(--size-3)*1.5);
    text-wrap: balance;
    display: flex;
    flex-direction: column;
    justify-content: left;
    padding: auto;
}

.neutral{
    color: var(--light-red);
    background-color: var(--black);
    padding: 16px;
    margin-top: 30px;
    margin-bottom: 30px;
    width: 82%;
    border-radius: 0px 100px 100px 0px;
}

.teach{
    color: var(--light-orange);
    background-color: var(--black);
    text-wrap: balance;
    padding: 16px;
    margin-top: 24px;
    margin-bottom: 24px;
    width: 90%;
    border-radius: 0px 100px 100px 0px;
}

.international{
    color: var(--light-yellow);
    background-color: var(--black);
    padding: 20px;
    margin-top: 24px;
    margin-bottom: 32px;
    width: 98%;
    border-radius: 0px 100px 100px 0px;
}

em{
    color: var(--light-blue);
    font-size: var(--size-3);
    padding-right: 10px;
}

.colophon{
    background-color: var(--light-beige);
    padding: 16px;
    margin: 0;
    border-top: solid var(--black);
    border-right: solid var(--black);
    border-radius: 0px 50px 0px 0px;
    filter: drop-shadow(10px 10px 10px 10px var(--light-blue));
}

p{
    margin: 0;
    padding-top: 0;
}

@media (min-width: 610px){
    h2{
        font-size: var(--size-6);
        line-height: calc(var(--size-6)* 1.1);
    }
}

@media (min-width: 678px){
.landing{
    padding-left: 50px;
}
    h3{
        padding-left: 45px;
    }

    p{
        display: flex;
        justify-content: flex-end;
        max-width: 100%;
    }
    }


@media (min-width: 745px){
    h2{
        font-size: calc(var(--size-6)*1.2);
        line-height: calc(var(--size-6)* 1.3);
    }

    .landing{
        padding-left: 60px;
    }
    
    h3{
        font-size: var(--size-4);
        line-height: calc(var(--size-4)* 1.2);
        padding-left: 70px;
    }

    .callout{
        font-size: var(--size-3);
        line-height: calc(var(--size-3)* 1.2);
        padding-top: 48px;
        padding-left: 82px;
    }

    .headers{
        font-size: var(--size-5);
        line-height: calc(var(--size-5)* 1.3);
    }

    .neutral{
        width: 80%;
    }

    .teach{
        width: 85%;
    }

em{
    font-size: var(--size-5);
    padding-right: 16px;
}

p{
        font-size: var(--size-3);
        line-height: calc(var(--size-3)*1.4);
        text-wrap: balance;
    }
}

@media (min-width: 1000px){
    h2{
        font-size: calc(var(--size-8)*1.2);
        line-height: calc(var(--size-8)*1.2);;
    }

    .landing{
        padding-left: 85px;
    }

.callout{
    font-size: var(--size-4);
    line-height: calc(var(--size-4)* 1.2);
    padding-top: 40px;
    padding-left: 100px;
    border-top: var(--light-beige);
    border-right: solid 3px var(--black);
    border-bottom: solid 3px var(--black);
    }
}


@media (min-width: 1400px){
    h2{
        font-size: calc(var(--size-8)*1.8);
        line-height: calc(var(--size-8)*1.8);
        padding-bottom: calc(var(--size-8)*.5);
    }

    .landing{
        padding-left: 130px;
    }

    .callout{
        padding-left: 160px;
    }
}