.content {
    font-family: var(--header-font);
}

.content-header {
    margin: 1rem;

    font-size: 1rem;
    text-align: center;
}

.content-body {
    display: flex;
    justify-content: space-around;
    text-align: center;
}

@media only screen and (max-width: 700px) {
    .content-body {
        flex-direction: column;
    }
}

.headshot-wrapper {
    display: flex;
    flex-direction: column;
    
    text-align: center;
    margin: 1rem;
}

.headshot {
    width: 8rem;
    
    border: 1rem solid black;
    border-top: none;
    border-bottom: none;
    margin: auto;
}

.bio {
    align-content: center;
    margin: 1rem;
    
}

.socials {
    display: flex;
    
    justify-content: space-around;
    margin: 1rem;
    margin-top: 2rem;
    flex-wrap: wrap;
}