@media (prefers-color-scheme: light) {
    :root {
        --page-bg: #EDEDED;
        --text-fg: black;

        --lines: #999;
        --code-bg: #DEDEDE;
        --a-fg: blue;
        --a-visited-fg: purple;
    }
}
@media (prefers-color-scheme: dark) {
    :root {
        --page-bg: #2B2B32;
        --text-fg: #CCCCC2;

        --lines: #555;
        --code-bg: #1F1F1F;
        --a-fg: #339CFF;
        --a-visited-fg: #FF5FFF;
    }
}

html {
    font-family: sans-serif;
}

body {
    background-color: var(--page-bg);
    color: var(--text-fg);
    border-left: var(--lines) 1px solid;
    border-right: var(--lines) 1px solid;
    max-width: 50em;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 4em;

    /* Default, overridden for mobile devices below. */
    padding-left: 4em;
    padding-right: 4em;
}
@media not (pointer: fine) {
    body {
        padding-left: 0.5em;
        padding-right: 0.5em;
    }
}

p.blogpostdate {
    font-size: 60%;
    opacity: 0.4;
}

hr {
    border-left: none;
    border-top: none;
    border-right: none;
    border-bottom: var(--lines) 1px dotted;
}

h1, h2, h3, h4, h5 {
    border-bottom: var(--lines) 1px solid;
}

div#blogpostcontent h2 {
    margin-top: 2.25em;
}

div#blogpostcontent h3 {
    margin-top: 2em;
}

p.blogpostdate + h2 {
    margin-top: 1em !important;
}

pre {
    margin-top: 1em;
    margin-bottom: 1em;
    padding: 1em;
    border: var(--lines) 1px solid;
    background-color: var(--code-bg);
    overflow: auto;
}

p > code, li > code {
    background-color: var(--code-bg);
    padding-left: 0.2em;
    padding-right: 0.2em;
}

#toc li {
    list-style-position: inside;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

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

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

blockquote {
    border-left: var(--lines) 0.5em solid;
    margin-left: 0px;
    padding-left: 2em;
}

div#gitlist table, div#gitpage table {
    font-size: 80%;
    width: 100%;
}

div#gitlist th, div#gitpage th {
    text-align: left;
}