:root {
    --par-max-width: 88ex; /* This gives roughly 80-character wide lines for
                            * indented code segments. */
}

html {
    background-color: #1a1010;

    font-family: monospace;
    color: #fcfcfc;
    line-height: 1.8em;
}

body {
    max-width: calc(var(--par-max-width) + 7em);
    margin: 4em auto;
}

a {
    color: #ff0;
}
a:visited {
    color: #ff0;
}

em, strong, h1, h2, h3, h4 {
    color: #fff;
}

header > h1 > a {
    color: inherit;
}
header > h1 > a:visited {
    color: inherit;
}
header img {
    object-fit: contain;
    min-width: 50%;
    max-width: var(--par-max-width);
    padding: 0;
    margin: 0;
}

body > header {
    font-size: 1.5em;
}

body > footer {
    margin-top: 4em;
    border-top: 1pt solid #000;
}
body > footer .copyright {
    max-width: 100%;
    text-align: center;
}

section#latest-posts {
    display: flex;
    flex-wrap: wrap;
    margin: 1em 0;
    padding-top: 2em;
    row-gap: 2em;
}
section#latest-posts article {
    flex: 1 1 30%;
    display: flex;
    flex-direction: column;
    padding: 0 1em;
}
section#latest-posts article h3 {
    margin-bottom: 0;
}
section#latest-posts article small {
    margin-top: 0;
}
section#latest-posts article p {
    font-size: 0.9em;
}
section#latest-posts article img {
    object-fit: cover; /* Maybe try "contain"? */
    max-width: 100%;
    max-height: 18em;
    padding: 0;
    margin: 0;
}

img {
    max-width: var(--par-max-width);
}

figcaption {
    margin: 1em auto;
}

main {
    margin-top: 4em;
    margin-bottom: 4em;
}
main > header {
    margin-bottom: 2em;
}

blockquote {
    margin-left: 3em;
    max-width: calc(var(--par-max-width) - 3em);
    text-align: left;
}

p {
    max-width: var(--par-max-width);
    text-align: left;
}

section.two-column {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
    column-gap: 1em;
    max-width: var(--par-max-width);
}
section.two-column > section {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
}
section.two-column > section p {
    text-align: left;
}

section.tags h3 {
    margin-bottom: 0;
}
section.tags ul {
    margin-top: 0;
}
section.tags li {
    display: inline;
}

small.caps {
    font-size: unset;
    font-variant: small-caps;
}

pre {
    background: #000;
    max-width: var(--par-max-width); /* This gives roughly 82-character wide lines. */
}
pre > code {
    background: #000;
    color: #0f0;
}
pre > code small {
    /* Use <small> to mark comments. */
    color: #ff0;
    text-shadow: 0 0 1ex #ff0;
}
code {
    background: #000;
    color: #0f0;
    padding: 1ex;
}

li {
    /*
     * -2em to account for the indent and the list symbol.
     */
    max-width: calc(var(--par-max-width) - 2em);
}