/* Selenized Dark */
:root {
    --bg:       #103c48;
    --bg-high:  #2d5b69;
    --bg-low:   #184956;

    --fg:       #adbcbc;
    --fg-high:  #cad8d9;
    --fg-low:   #72898f;

    --yellow:   #dbb32d;
    --orange:   #ed8649;
    --red:      #fa5750;
    --magenta:  #f275be;
    --violet:   #af88eb;
    --blue:     #4695f7;
    --cyan:     #41c7b9;
    --green:    #75b938;
}

/* Small screens (phones) */
@media only screen and (max-device-width: 600px) {
    body {
        padding: 1em;
    }

    article {
        width: 100%;
        font-size: 24pt;
    }

    table {
        font-size: 24pt;
    }
}

/* Big ones */
@media only screen and (min-device-width: 600px) {
    article {
        max-width: 80ch;
        margin-left: auto;
        margin-right: auto;
    }

    code {
        font-size: 12pt;
    }
}

body {
    font-family: sans-serif;
    background-color: var(--bg);
    color: var(--fg);
}

code {
    font-family: monospace;
}

thead {
    text-align: left;
}

th, td {
    padding-right: 1em;
    vertical-align: top;
}

th {
    text-align: center;
}

th:first-child {
    text-align: right;
}

th:last-child {
    text-align: left;
}

td:first-child {
    text-align: right;
}

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

a:visited {
    color: var(--blue);
}

a:hover {
    text-decoration: underline;
}