@font-face {
    font-family: 'IBM Plex Serif';
    src: url('fonts/ibmplexserif/ibmplexserif-regular-webfont.woff2') format('woff2'),
         url('fonts/ibmplexserif/ibmplexserif-regular-webfont.woff') format('woff');
    font-weight: 400;
    font-style: normal;

}

@font-face {
    font-family: 'Playfair';
    src: url('fonts/playfair/playfairdisplay-variablefont_wght-webfont.woff2') format('woff2'),
         url('fonts/playfair/playfairdisplay-variablefont_wght-webfont.woff') format('woff');
    font-weight: 400;
    font-style: normal;

}

:root {
    font-size: 18px;
}

body {
    color: #222222;
    background-color: rgb(210, 228, 233);
    font-family: "IBM Plex Serif", "Arial", serif;
    display: flex;
    flex-direction: column;
}

h1,
h2,
h3,
h4 {
    font-family: "Playfair", "Arial", monospace;
    background-color: rgb(156, 197, 209);
}

h1 { 
    font-size: 2rem;
}

nav {
    grid-column: 1;
    border-right: 2px solid rgb(156, 197, 209);
    border-radius: 12px;
    margin-right: 1rem;
    padding: 1rem;
    padding-top: 2.5rem;
    padding-right: 1 rem;
}