#top{
    padding-top: 6em;
    max-width: 100vw;
    box-sizing: border-box;
}
#top-left-blurb{
    padding-top: 2em;
    width: calc(70% - 1em);
    padding-right: 0;
    width: 100%;
    margin-bottom: -1em;
    font-size: xx-large;
    text-wrap: nowrap;
}
#hello{
    text-wrap: nowrap;
    font-family: serif;
    margin-left: 1em;
    vertical-align: top;
    font-size: x-large;
}
#name{
    font-size: xxx-large;
    vertical-align: bottom;
    font-weight: lighter;
    text-wrap: nowrap;
    font-family: Brush Script MT, Brush Script STD, cursive;
}
#pronouns{
    font-size: large;
    vertical-align: bottom;
    font-weight: normal;
    font-family: serif;
    text-wrap: nowrap;
}

#other-stuff{
    flex-direction: column;
    margin-top: -7em;
}

#main-left-blob{
    align-self: center;
    margin-left: 1em;
    margin-right: 1em;
    font-size: large;
    /* text-align: justify; */
}
#main-right-image{
    margin-left: 1em;
    /* margin-right: 1em; */
    margin-top: 1em;
    width: 30vw;
    object-position: top center;
}

#image-divider{
    /* background-image: url(../img/header-img-home.jpg); */
    /* background: linear-gradient(330deg, rgb(251, 223, 131) 0%, rgb(203, 157, 6) 40%, rgb(203, 157, 6) 60%, rgb(251, 223, 131)); */
    /* background: radial-gradient(rgb(203, 157, 6), rgb(251, 223, 131)); */
    height: 4vw;
}

#edu-banner{
    text-align: center;
    font-size: xx-large;   
}

#overview{
    /* text-align: justify; */
    font-size: large;
    margin-right: 1em;
    margin-left: 1em;
}
#overview-left-image{
    width: 25%;   
    image-orientation: 90deg;
}
#overview-right-image{
    width: 25%;   
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
}

#credentials{
    padding-left: 1em;
    margin-right: 1em;
    margin-top: 0.75em;

    font-size: large;
}
#credentials-blurb{
    padding-right: 1em;
    padding-left: 1em;
    padding-bottom: 1.5em;

    /* width: 50%; */
    /* margin-left: 25%; */
}
#credentials-divider{
    /* justify-self: center; */
    text-align: center;
    font-size: xx-large;   
}
#credentials-left-image{
    width: 25%;
}
#credentials-right-image{
    width: 25%;
}
#filled-list{
    list-style-type: disc;
    margin-bottom: -1em;
}

#required-hours{
    margin-right: 1em;
}
#required-hours-recent{
    margin-top: -1em;
    padding-bottom: 0.5em;
}
#required-hours-points{
    margin-bottom: -0.6em;
}

@media (width <= 800px){
    .nav-text{
        font-size: smaller;
        flex-shrink: none;
    }
    #nav-header-start{
        font-size: medium;
    }
    #nav-header-middle{
        display: grid;
        grid-template-rows: repeat(2, 1fr);
        grid-auto-flow: column;
        column-gap: 1rem;
        row-gap: 1em;
    }

}

@media (width <= 520px){
    .nav-text{
        font-size: smaller;
        flex-shrink: none;
    }
    #nav-header-start{
        font-size: medium;
    }
    #nav-header-middle{
        display: grid;
        grid-template-rows: repeat(2, 1fr);
        grid-auto-flow: column;
        column-gap: 1rem;
        row-gap: 1em;
    }

    #top{
        flex-direction: column-reverse;
    }
    
    #other-stuff{
        flex-direction: column;
    }
    #main-right-image{
        width: 70vw;
        margin-bottom: -1em;
        margin-left: 0;
    }
    #main-left-blob{
        text-align: left;
    }
    #top-left-blurb{
        margin-top: 1em;
        padding-right: 0em;
        /* background-color: rgba(255,255,255,0.5); */
    }

    #overview{
        width: calc(100% - 2em);
        font-size: medium;
    }
    #overview-left-image{
        display: none;
    }
    #overview-right-image{
        display: none;
    }

    #edu-banner-container{
        background-color: rgb(255, 228, 181);
        margin: -1em -1em 0 -1em;
        padding: 1em;
        padding-bottom: 2em;
    }

    #credentials{
        font-size: medium;
    }
    #credentials-divider{
        font-size: xx-large;   
    }

    #right{ /*Didn't look good*/
        text-align: left;
    }

    #main-right-image-container{
        width: 100%;
    }
}