:root {
    --colour-bg: #f2f6f9; /* background */
    --colour-fg: #151517; /* foreground */
    --colour-hl: #f98a05; /* highlight */
    --colour-ll: #909096; /* lowlight */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: var(--colour-bg);
    color: var(--colour-fg);
    font-family: -apple-system,
                 BlinkMacSystemFont,
                 avenir next,
                 avenir,
                 segoe ui,
                 helvetica neue,
                 Adwaita Sans,
                 Cantarell,
                 Ubuntu,
                 roboto,
                 noto,
                 helvetica,
                 arial,
                 sans-serif;
}

h1, h2, h3 {
    margin-bottom: .1em;
}

h1 {
    font-size: 1.75em;
}

h2 {
    font-size: 1.25em;
}

a {
    text-decoration: none;
    color: var(--colour-hl);
}

a:hover {
    text-decoration: underline;
}

p {
    text-align: justify;
    margin-bottom: 1em;
    line-height: 1.3em;

    code {
        background: var(--colour-fg);
        color: var(--colour-bg);
        border-radius: 3px;
        padding: .1em .4em;
    }
}

hr {
    border: none;
    border-bottom: 2px dotted var(--colour-hl);
    margin: 1.5em 2em;
}

pre {
    margin: 1em;
    padding: 1em;
    background: var(--colour-fg);
    color: var(--colour-bg);
    border-radius: 3px;
    line-height: 1.4em;
}

code {
    font-size: .9em;
    font-family: Menlo,
                 Consolas,
                 Monaco,
                 Adwaita Mono,
                 Liberation Mono,
                 Lucida Console,
                 monospace;
}

blockquote {
    margin: 1em;
    border-left: 2px dotted var(--colour-hl);
    font-family: Iowan Old Style,
                 Apple Garamond,
                 Baskerville,
                 Times New Roman,
                 Droid Serif,
                 Times,
                 Source Serif Pro,
                 serif,
                 Apple Color Emoji,
                 Segoe UI Emoji,
                 Segoe UI Symbol;

    p {
        margin-left: 1em;
    }
 }

nav {
    background: #000e19;
    margin-bottom: 1em;
    padding: .25em 0;

    .nav-wrapper {
        display: flex;
        justify-content: space-between;
        margin: 0 auto;
        width: 100%;
        max-width: 800px;
    }

    ul {
        display: flex;
        align-items: center;
        justify-content: center;
        list-style-type: none;
        margin: 0;
    }

    li {
        display: inline-block;
        margin: 0 .1em;
        padding: .5em 1.25em;
    }

    img {
        height: 3.5em;
    }
}

article {
    margin: 0 auto;
    padding: 0 1em;
    width: 100%;
    max-width: 820px;

    li {
        text-align: justify;
    }
}

header {
    display: flex;
    justify-content: space-between;
    margin-bottom: .5em;

    h1 {
        font-size: 2em;
    }

    p {
        margin: .25em 0;
        font-size: .8em;
        color: var(--colour-ll);
        text-align: right;
    }

    .date-info {
        margin-left: .5em;
    }
}

ul {
    margin-left: 1em;
    margin-bottom: 1em;
    list-style-type: square;
}

li::marker {
    color: var(--colour-hl);
}

li {
    margin-bottom: .2em;
}

footer {
    display: flex;
    justify-content: space-between;
    margin: 1.5em 0;
    font-size: .8em;
    color: var(--colour-ll);

    p {
        margin-bottom: .5em;
        display: inline-block;
    }
}

.footnote {
    font-size: .8em;
    margin: 0 2em;