* {
    box-sizing: border-box;
}

@font-face {
    font-family: 'Junicode Italic';
    src: url('Junicode-Italic.woff2') format('woff2'),
        url('Junicode-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Junicode';
    src: url('Junicode-Regular.woff2') format('woff2'),
        url('Junicode-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

body {
    font-family: 'Junicode';
    font-size: 2em;
    line-height: 1.12em;
}

/* div {
    border: 1px solid red;  
} */

a {
    text-decoration: none;
    color: black;
}

a:hover {
    background: black;
    color: white;
}

.about {
    height: 49vh;
}

.work {
    height: 49vh;
    overflow: scroll;
}

.italic {
    font-family: 'Junicode Italic';
}

.smallText {
    /* font-family: 'Junicode Italic'; */
    font-size: 0.6em;
    vertical-align: middle;
}

.year {
    background: black;
    color: white;
}


/* media queries */
@media only screen and (max-width: 850px)  {
    body {
        padding: 10px;
    }

    .about {
        height: 33vh;
    }

    .work {
        height: 66vh;
    }

} 

@media only screen and (max-width: 500px){
    body {
        font-size: 2em;
        line-height: 1em;
        padding: 4px;
    }
    .about {
        height: 33vh;
    }
    
    .work {
        height: 66vh;
    }

    .smallText {
        font-size: 0.5em;
    }

}