:root {
    --main-max-width: 800px;
    --site-background-color: #0a0a0a;
    --site-text-color: #fffffc;
    --header-divider-color: #6a687a;

    --stream-divider-color: #6ccff6;

    --src-font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;

    --src-block-background-color: #141414;
    --src-block-border-color: #84828f;
    --src-block-language-color: #0a0a0a;
    --src-block-language-background: #84828f;

    --quote-block-border-color: #84828f;
}

body {
    color: var(--site-text-color);
    background-color: var(--site-background-color);
    font-family: source-sans-pro, Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', sans-serif;

    a:link, a:visited {
        /* TODO: Should I use a different color for links? */
        color: var(--site-text-color);
    }
}

.page_centering {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.page_header {
    width: 100%;
    max-width: var(--main-max-width);
    border-bottom: 0.1rem solid var(--header-divider-color);

    .home_link {
        font-size: 1.2rem;
        font-weight: 600;
        text-decoration: none;

        &:link, &:visited {
            color: var(--site-text-color);
        }
    }
}

.main_content {
    width: 100%;
    max-width: var(--main-max-width);
    font-size: 1.2rem;
    line-height: 1.2;

    /* A stand-alone blog post (not in a blog stream). */
    .blog_post {
        padding: 1rem 0 3rem 0;
    }

    .blog_stream {
        .stream_divider {
            color: var(--stream-divider-color);
        }
    }

    /* A blog post in a blog stream (for example, the homepage). */
    .blog_stream_post {
        background: #1F1F1F;
        padding: 1rem 0.2rem;
    }

    .blog_post_title {
        font-size: 2.5rem;
        font-weight: 700;
        padding-bottom: 1rem;
    }


    p {
        margin: 1rem 0;
    }

    .src_block {
        background: var(--src-block-background-color);
        border-radius: 3px;
        border: 1px solid var(--src-block-border-color);
        font-size: 1rem;
        font-family: var(--src-font-family);
        margin: 1rem 0;

        .src_language {
            display: inline-block;
            color: var(--src-block-language-color);
            background: var(--src-block-language-background);
            border-radius: 0 0 3px 0;
            padding: 0.1rem 0.5rem;
            font-size: 0.8rem;
            vertical-align: top;
        }

        .src_body {
            margin: 0.5rem;

            .src_line {
                white-space: pre-wrap;
            }
        }
    }

    .inline_source_block {
        font-family: var(--src-font-family);
        font-size: 1rem;
    }

    .code, .verbatim {
        font-family: var(--src-font-family);
        font-size: 1rem;
    }

    .quote_block {
        border-left: 1px solid var(--quote-block-border-color);
        padding: 0 0 0 1rem;
        margin: 1rem 0 1rem 2rem;
    }

    h2, h3 {
        margin: 1rem 0;
        padding-bottom: 0.5rem;
    }

    h2 {
        font-size: 2.3rem;
        font-weight: 600;
    }

    h3 {
        font-size: 2.1rem;
        font-weight: 600;
    }

    .plain_list {
        &.unordered {
            list-style-type: disc;
            padding-left: 2.5rem;
        }

        &.ordered {
            list-style-type: decimal;
            padding-left: 2.5rem;
        }

        &.descriptive {
            font-size: 1rem;
            > dt {
                font-weight: 600;
            }

            > dd {
                padding-left: 2.5rem;
            }
        }
    }

    .footnote_reference {
        vertical-align: super;
        font-size: 80%;
        > a {
            text-decoration: none;
        }
    }

    .footnote_definition {
        .label {
            text-decoration: none;
        }
        .definition {
            display: inline;

            > p {
                display: inline;
            }
        }
    }
}