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

        --lines: #999;
        --code-bg: #EBEBEB;
        --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;
    }

    div.darkmodefilterinvert
    {
        filter: invert(80%);
    }
}

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;
    padding-left: 4em;
    padding-right: 4em;
}

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

p.blogpostcomments
{
    font-style: italic;
    text-align: center;
    margin-top: 3em;
}

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

h1
{
    border-bottom: var(--lines) 1px solid;
}

h2
{
    border-bottom: var(--lines) 1px dashed;
}

h3
{
    border-bottom: var(--lines) 1px dotted;
}

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

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

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

img
{
    max-width: 60%;
}

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;
}