:root {
    --col-primary: white;
    --col-secondary: #aaaaaa;

    --bg-primary: #222222;
    --bg-secondary: #333333;
    --bg-tertiary: #444444;

    --col-accent-primary: #a4cdff;
    --bg-accent-primary: #0a54dc;

    --col-link: #4fa4ff;
    --col-link-hover: #8bd3ff;
    --col-link-visited: #2c7bdc;

    --col-focus-outline: var(--col-primary);

    --bg-button: var(--bg-primary);
    --border-button: var(--col-primary);
    --border-button-hover: transparent;

    --trans-in: 0.2s;
    --trans-out: 0.3s;

    scroll-behavior: smooth;
}

body {
    background: var(--bg-primary);
    max-width: var(--content-max-width);
    margin: auto;
    /*padding: 0 2em 2em 2em;*/

    color: var(--col-primary);
    font-family: sans-serif;

    overflow-x: hidden;
    overflow-y: scroll;
}

/* containers */

.flex.container {
    display: flex;
    gap: 1.5em;

    padding: 1em;
}

.divider {
    margin-top: 0.5em;
    border-bottom: 1px solid var(--bg-tertiary);
}

.spacer {
    flex-grow: 1;
}

/* elements */

.byline, .date {
    display: block;
    width: 100%;
    text-align: center;
    color: var(--col-primary);
}

.icon {
    height: 1.3em;
    width: 1.3em;

    transform: translateY(0.25em);
}

a {
    color: var(--col-link);
    text-decoration: none;

    transition: color 0.1s ease-in-out;
}

a:hover, a:visited:hover {
    color: var(--col-link-hover);
    transition: color 0.2s ease-in-out;
}

a:visited {
    color: var(--col-link-visited);
    transition: color 0.2s ease-in-out;
}

header {
    margin-top: 0.5em;
}

header:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;

    margin: 0;
    padding: 0;
    width: 100vw;
    height: 4em;

    background: radial-gradient(ellipse at top, var(--bg-secondary) 0%, transparent 70%);
    border-bottom: 1px solid var(--bg-primary);

    transition: all var(--trans-out) ease-in-out;
    transition-property: border, color, background;
}

.page-heading {
    width: 100%;
    text-align: center;
    margin-bottom: 0.2em;
    margin-top: 0;
}

main {
    max-width: var(--content-max-width);
    margin: 0 auto 0 auto;
    padding: 1em;
}

footer {
    position: fixed;
    bottom: 0;
    left: 0;

    color: var(--col-secondary);
    background: radial-gradient(ellipse at bottom, var(--bg-secondary) 0%, transparent 70%);

    padding: 0.2em 0 0.2em 0;

    width: 100%;
    text-align: center;
    font-size: 0.9em;
}

footer code {
    color: var(--col-secondary);
}