:root {
    /* Solarized colors */
    --base03:    #002b36;
    --base02:    #073642;
    --base01:    #586e75;
    --base00:    #657b83;
    --base0:     #839496;
    --base1:     #93a1a1;
    --base2:     #eee8d5;
    --base3:     #fdf6e3;
    --yellow:    #b58900;
    --orange:    #cb4b16;
    --red:       #dc322f;
    --magenta:   #d33682;
    --violet:    #6c71c4;
    --blue:      #268bd2;
    --cyan:      #2aa198;
    --green:     #859900;

    --very-dark: #00212A;
}

.dark-mode {
    --background: var(--base03);
    --background-highlights: var(--base02);
    --foreground: var(--base0);
    --foreground-emphasized: var(--base1);
    --foreground-secondary: var(--base01);
    --accent-color: var(--cyan);
    --accent-foreground-color: var(--base3);
}

body {
    margin: 0;
    background-color: var(--background);
    color: var(--foreground);
    font-family: sans-serif;
    font-size: 18pt;
    padding: 20px;
    line-height: 1.5;
}

section {
    max-width: 35em;
    margin: 8em auto;
}

h1 {
    color: var(--cyan);
    font-size: 40pt;
}

h2 {
    color: var(--cyan);
    font-size: 24pt;
    margin-top: 2em;
    margin-bottom: 0.5em;
}

pre {
    font-size: 14pt;
    padding: 2em;
    color: var(--foreground-emphasized);
    background-color: var(--background-highlights);
    border-radius: 1em;
}

tt {
    font-size: 17pt;
    padding: 0 0.3em;
    color: var(--foreground-emphasized);
    background-color: var(--background-highlights);
    border-radius: .3em;
}

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