@font-face {
    font-family: body;
    src: url(/fonts/ibmplexmono-light-webfont.woff2) format('woff2'),
         url(/fonts/ibmplexmono-light-webfont.woff) format('woff');
}

@font-face {
    font-family: sup;
    src: url(/fonts/ibmplexmono-thinitalic-webfont.woff2) format('woff2'),
         url(/fonts/ibmplexmono-thinitalic-webfont.woff) format('woff');
}

@font-face {
    font-family: header;
    src: url(/fonts/ibmplexmono-regular-webfont.woff2) format('woff2'),
         url(/fonts/ibmplexmono-regular-webfont.woff) format('woff');
}

body {
    background-color: beige;
    font-family: body;
    max-width: 1000px;
    margin: 0 auto;
    padding: 2rem;
    line-height: 1.6;
}

img {
    display: block;
    max-width: 1000px;
    height: auto;
    margin: 2rem auto;
    border: 3px solid #000;
    image-rendering: pixelated;
}

/* Small screen, ew */
@media (max-width: 800px) {
    body {
        max-width: 90%;
        padding: 1rem;
    }
    img {
        max-width: 100%;
    }
}

h1 {
    font-family: header, monospace;
}

h2 {
    font-size: 14pt;
    font-family: header, monospace;
}

p {
    font-family: body, monospace;
    font-size: 10pt;
    line-height: 1.7;
}

sup {
    font-family: sup, monospace;
    font-size: 8pt;
}

a:link {
    color: black;
}