:root {
    --main-background-color: #111;
    --main-color: #eee;

    --logo-color: var(--main-color);
    --logo-color-operator: #000;
    --logo-color-operator-shadow: #0f0;
}


html {
    background-color: var(--main-background-color);
}


body {
    /* I like monospaced fonts. They can be arranged neatly. */
    font-family: monospace;

    margin: 0;
    padding: 2em 3em;

    color: var(--main-color);
    font-size: 1.2em;
}

body a, body a:visited {
    color: var(--main-color);
    text-decoration: underline;
}

body > header > div#letter-logo-square > span {
    /* Put each span on its own line. */
    display: block;

    /* Make the whole div approximately square. */
    letter-spacing: 0.4em;

    /* Make the whole square BIG. */
    font-size: 1.7em;
    color: var(--logo-color);
    font-weight: bold;
}
body > header > div#letter-logo-square > span a {
    font-weight: normal;
}
body > header > div#letter-logo-square span.operator {
    color: var(--logo-color-operator);
    text-shadow: 0 0 4pt var(--logo-color-operator-shadow);
}
body > header > div#letter-logo-square span.comment {
    color: var(--logo-color-operator-shadow);
    text-shadow: 0 0 4pt var(--logo-color-operator-shadow);
}
body > header > div#letter-logo-square span.phantom {
    visibility: hidden;
}
body > header > div#letter-logo-square a {
    letter-spacing: normal;
}

body > main {
    /*
     * Put some space between the main content and everything else. I think it
     * looks better this way.
     */
    margin: 4em 0;
}

p {
    /*
     * Keep text lines at most 80-character wide.
     * The extra 8ex adds some slack for better text flow.
     */
    max-width: 88ex;
}