@font-face {
    font-family: 'Vollkorn';
    src: url('/assets/Vollkorn-Regular.woff2') format('woff2');
    font-weight: 300;
}
@font-face {
    font-family: 'Vollkorn';
    src: url('/assets/Vollkorn-Bold.woff2') format('woff2');
    font-weight: 700;
}
@font-face {
    font-family: 'Vollkorn';
    src: url('/assets/Vollkorn-Black.woff2') format('woff2');
    font-weight: 900;
}
@font-face {
    font-family: 'Vollkorn';
    src: url('/assets/Vollkorn-Italic.woff2') format('woff2');
    font-weight: 300;
    font-style: italic;
}
@font-face {
    font-family: 'Vollkorn';
    src: url('/assets/Vollkorn-BoldItalic.woff2') format('woff2');
    font-weight: 700;
    font-style: italic;
}
@font-face {
    font-family: 'Vollkorn';
    src: url('/assets/Vollkorn-BlackItalic.woff2') format('woff2');
    font-weight: 900;
    font-style: italic;
}

* {
    margin: 0
}

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: Vollkorn;
    max-width: 640px;
    margin: auto;
}

footer {
    margin-top: 3rem;
    margin-bottom: 3rem;
}

h1,h2,h3,h4,h5,h6,p,code,pre {
    margin-top: 1.6rem;
    margin-bottom: 1.6rem;
}

h1 {
    font-size: 4.8rem;
}

ul {
    align-self: flex-start;
}

img {
    width: 50%;
}

img.hover {
    width: 60%;
}

@media (prefers-color-scheme: dark) {
    body {
        color: #eee;
        background: #222;
    }
    footer, .postDateline, .header .byline {
        color: #aaa;
    }
    code, pre {
        background: #444;
    }  
    a {
        color: #e66f14;
    }
}

@media only screen and (max-width: 464px) {
    h1 {
        font-size: 3.6rem;
    }
}