html {
    font-family: "Atkinson Hyperlegible";
}

body {
    min-height: 100%;
}

/* * * * * * * * * * * * */
/* header + nav elements */
/* * * * * * * * * * * * */
header {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: top;
    position: fixed;
    z-index: 1;
    margin-top: -10px;
    padding-top: 4px;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

/* contact info links */
#contact {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

.contact-link {
    margin-right: 15px;
    margin-left: 0px;
    width: 25px;
    height: 25px;
}

.contact-link > img {
    width: 100%;
    height: 100%;
}

.contact-link:hover {
    filter: none;
}

/* * * * * * * * * * * */
/* sections & content  */
/* * * * * * * * * * * */
#main {
    margin: 10px;
}

#about {
    flex: 1 1 auto;
    min-width: 100%;
    min-height: 100%;
    position: relative;
    display: flex;
    flex-direction: row; 
    justify-content: center;
}

#about-content {
    width: 60%;
}

#about-words {
    width: 60%;
}

#headshot-and-photo {
    display: flex;
    flex-direction: row; 
}

#headshot {
    max-height: 300px;
    max-width: 40%;
    align-content: center;
    margin: 10px;
    padding: 10px;
}

#research {
    flex: 1 1 auto;
    min-width: 100%;
    min-height: 100%;
    position: relative;
    display: flex;
    flex-direction: row; 
    justify-content: center;
}

#research-content {
    width: 60%;
}

/* * * * * */
/* footer  */
/* * * * * */
footer {
    width: 100%;
    padding-bottom: 2px;
    line-height: 50%;
    text-align: center;
}

/* * * * * * * * */
/* media queries */
/* * * * * * * * */
@media only screen and (max-width: 60rem) {
    #about, #headshot-and-photo {
        flex-direction: column;
    }

    #about-content, #about-words, #headshot, #research-content {
        width: 100%;
    }
}