:root{
    /* fonts */
    --font-1: "JetBrains Mono";
    --font-2: "Lato";

    /* font sizes */
    --font-base: 16px;
    --size-1: 18px;
    --size-2: 24px;
    --size-3: 32px;
    --size-4: 48px;
    --size-5: 64px;
    --size-6: 80px;
    --size-7: 96px;
    --size-8: 112px;

    /* colors */
    --light-beige: #fdf7e7; 
    --dark-beige: #c3bba5;
    --black: #120f06;
    --light-red: #ff240b;
    --red: #ff5340;
}

    /* Mobile Styles */
    *, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    }

    body{
        background-color: var(--light-beige);
        margin: 0;
        padding: 0;
        width: 100%;
        overflow-x: hidden;
    }

    header{
        background-color: var(--black);
        padding-bottom: 16px;
    }

    h1{
        font-family: var(--font-1);
        font-weight: 400;
        font-size: calc(var(--size-2)*1.5);
        color: var(--light-beige);
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 24px;
        text-wrap: balance;
    }

    nav{
        font-family: var(--font-1);
        font-size: var(--size-2);
        color: var(--light-beige);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        padding-top: 16px;
        border-top: solid 1px var(--light-beige);
    }

    span{
        padding: 24px;
    }

    .selected{
        color: var(--red);
        text-decoration: underline 1px;
    }

    h2{
        font-family: var(--font-1);
        font-size: calc(var(--size-2)*1.5);
        font-weight: 400;
        line-height: calc(var(--size-2)*1.8);
        text-wrap: pretty;
        color: var(--light-beige);
        background-image: linear-gradient(var(--light-red), var(--dark-beige));
        border-radius: 0px 0px 50px 0px;
        text-align: center;
        padding: 30px;
        margin-bottom: 24px;
    }

    em{
        font-family: var(--font-1);
        font-size: calc(var(--size-2)*1.5);
        font-weight: 700;
        line-height: calc(var(--size-2)*1.8);
        color: var(--black);
    }

    hgroup{
        font-family: var(--font-2);
        text-align: center;
        color: var(--black);
        letter-spacing: .3px;
    }

    h3{
        font-size: calc(var(--size-1)*1.2);
    }

    h4{
        font-size: var(--size-1);
        padding-top: 10px;
        padding-bottom: 16px;
    }

    h5{
        font-family: var(--font-1);
        font-size: calc(var(--size-1)*1.5);
        font-weight: 400;
        text-wrap: pretty;
        color: var(--light-beige);
        background-image: linear-gradient(var(--light-red), var(--dark-beige));
        border-radius: 0px 0px 0px 0px;
        text-align: center;
        padding-top: 36px;
        padding-bottom: 36px;
    }

    main{
        width: 100%;
        overflow-x: hidden;
    }

    p{
        font-family: var(--font-2);
        font-size: var(--size-1);
        font-weight: 400;
        line-height: calc(var(--size-1)*1.7);
        letter-spacing: .2px;
        text-indent: 18px;
        text-align: left;
        text-wrap: pretty;
        display: flex;
        flex-direction: column;
        position: relative;
        gap: 16px;
        margin: 16px;
    }

    p:last-of-type{
        margin-bottom: 40px;
    }

    .background{
        position: relative;
        width: 100vw;
        margin-left: 0;
        margin-right: 0;
        display: flex;
        justify-content: center;
    }

    .background::before{
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100%;
        background-image: linear-gradient(var(--light-red), var(--dark-beige));
        border-radius: 0px 0px 50px 0px;
        z-index: -1;
    }

    blockquote{
        font-family: var(--font-1);
        font-size: var(--size-3);
        font-weight: 400;
        line-height: calc(var(--size-3)*1.5);
        color: var(--light-beige);
        text-indent: 0;
        text-align: left;
        text-wrap: pretty;
        position: relative;
        padding: 32px;
        max-width: 65ch;
        margin-top: 24px;
        margin-bottom: 24px;
        margin-left: auto;
        margin-right: auto;
        box-sizing: border-box;
        z-index: 1;
    }

    section{
        font-family: var(--font-2);
        font-size: var(--size-1);
        font-weight: 400;
        line-height: calc(var(--size-1)*1.7);
        letter-spacing: .2px;
        color: var(--black);
        background-color: var(--dark-beige);
        text-indent: 18px;
        text-align: left;
        text-wrap: pretty;
        width: 100%;
        max-width: 65ch;
        display: flex;
        padding-bottom: 32px;
    }

    footer{
        font-family: var(--font-1);
        font-size: var(--font-base);
        color: var(--light-beige);
        background-color: var(--black);
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 32px;
    }

    /* Media Queries */

    @media (min-width: 500px){

        h1{
            text-align: center;
        }

        nav{
            font-size: calc(var(--size-2)*1.2);
        }

        h2{
            margin-bottom: 16px;
        }

        hgroup{
            text-align: left;
            padding-top: 0;
            padding: 16px;
        }

        footer{
            font-size: var(--size-1);
        }
    }

    @media(min-width: 678px){

        p{
            max-width: 65ch;
            margin: 16px;
            margin-left: 40px;
            align-items: center;
        }

        .background::before{
            width: 100vw;
            left: 0;
            top: 0;
            height:100%;
        }

        blockquote{
            text-align: center;
            padding: 32px 20px;
        }

        section{
            margin: 0;
            max-width: 65ch;
            align-items: center;
        }
    }

    @media(min-width: 750px){

        p{
            max-width: 75ch;
            margin: 16px;
            margin-left: 40px;
            align-items: center;
        }
    }

    @media(min-width: 850px){

        hgroup{
            max-width: 75ch;
            margin: 16px 0;
            margin-left: auto;
            margin-right: auto;
            text-align: left; 
        }

        p{
                max-width: 75ch; 
                margin: 16px 0;
                padding-bottom: 24px;
                margin-left: auto;
                margin-right: auto;
                text-align: left; 
            }

        section{
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 32px;
            width: 100%; 
            margin: 0 auto;
            max-width: 75ch; 
            }
        }