:root {
    --bg: #fdf6e3;
    --text: #657b83;
    --link: #586e75;
    --menu-bg: #eee8d5;
    --menu-border: #93a1a1;
    --menu-shadow: rgba(88, 110, 117, 0.8);
    --hr-color: #93a1a1;
    --code-bg: #eee8d5;
    --blockquote-bg: #eee8d5;
    --blockquote-border: #93a1a1;
    --table-border-top: #93a1a1;
    --table-border-bottom: #93a1a1;
    --table-th-border: #93a1a1;
    --table-row-bg: #eee8d5;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #002b36;
        --text: #839496;
        --link: #93a1a1;
        --menu-bg: #073642;
        --menu-border: #586e75;
        --menu-shadow: rgba(0, 0, 0, 0.8);
        --hr-color: #586e75;
        --code-bg: #073642;
        --blockquote-bg: #073642;
        --blockquote-border: #586e75;
        --table-border-top: #586e75;
        --table-border-bottom: #586e75;
        --table-th-border: #073642;
        --table-row-bg: #073642;
    }
}

body {
    color: var(--text);
    background: var(--bg);
    max-width: 800px;
    margin: auto;
    padding: 1em;
    line-height: 1.5;
}

a {
    color: var(--link);
    font-weight: bold;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

/* header and footer areas */
.menu {
    padding: 0;
}
.menu li {
    display: inline-block;
}
.article-meta,
.menu a {
    text-decoration: none;
    background: var(--menu-bg);
    padding: 5px;
    margin-right: 5px;
    border: 1px solid var(--menu-border);
    box-shadow: 3px 3px var(--menu-shadow);
}
.menu a:hover {
    text-decoration: underline;
}
.menu,
.article-meta,
footer {
    text-align: center;
}
.title {
    font-size: 1.1em;
}
footer a {
    text-decoration: none;
}
hr {
    border-style: solid;
    color: var(--hr-color);
    height: 1px;
}
.article-meta .tags {
    margin-top: 0.5em;
    font-size: 0.9em;
}

/* code */
pre,
.highlight pre {
    padding: 1em;
    overflow-x: auto;
    border-radius: 6px;
    font-size: 0.875rem;
}
.highlight {
    margin: 1em 0;
    overflow-x: auto;
}
code {
    font-family:
        "SF Mono", "Fira Code", "Fira Mono", Menlo, Consolas, monospace;
    font-size: 0.875em;
}
pre code,
.highlight code {
    background: none;
}
p code,
li code {
    background: var(--code-bg);
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
}

/* GOAT diagrams */
.goat {
    text-align: center;
    margin: 1.5em 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.goat svg {
    max-width: 100%;
    height: auto;
}

/* misc elements */
img,
iframe,
video {
    max-width: 100%;
}
main {
    hyphens: auto;
}
blockquote {
    background: var(--blockquote-bg);
    border-left: 5px solid var(--blockquote-border);
    padding: 3px 1em 3px;
}

table {
    margin: auto;
    border-top: 1px solid var(--table-border-top);
    border-bottom: 1px solid var(--table-border-bottom);
}
table thead th {
    border-bottom: 1px solid var(--table-th-border);
}
th,
td {
    padding: 5px;
}
thead,
tfoot,
tr:nth-child(even) {
    background: var(--table-row-bg);
}

/* Chroma highlighting - light theme (solarized light) */
.chroma { color:#657b83;background-color:#eee8d5; }
.chroma .err { color:#dc322f;background-color:#fdf6e3 }
.chroma .lnlinks { outline:none;text-decoration:none;color:inherit }
.chroma .lntd { vertical-align:top;padding:0;margin:0;border:0; }
.chroma .lntable { border-spacing:0;padding:0;margin:0;border:0; }
.chroma .hl { background-color:#fdf6e3 }
.chroma .lnt { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#93a1a1 }
.chroma .ln { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#93a1a1 }
.chroma .line { display:flex; }
.chroma .k { color:#859900 }
.chroma .kc { color:#859900 }
.chroma .kd { color:#859900 }
.chroma .kn { color:#859900 }
.chroma .kp { color:#859900 }
.chroma .kr { color:#859900 }
.chroma .kt { color:#b58900 }
.chroma .na { color:#268bd2 }
.chroma .nc { color:#b58900 }
.chroma .no { color:#cb4b16 }
.chroma .nd { color:#6c71c4 }
.chroma .ni { color:#6c71c4 }
.chroma .ne { color:#dc322f }
.chroma .nl { color:#268bd2 }
.chroma .nn { color:#b58900 }
.chroma .nt { color:#859900 }
.chroma .nb { color:#268bd2 }
.chroma .bp { color:#268bd2 }
.chroma .nv { color:#268bd2 }
.chroma .vc { color:#268bd2 }
.chroma .vg { color:#268bd2 }
.chroma .vi { color:#268bd2 }
.chroma .vm { color:#268bd2 }
.chroma .nx { color:#657b83 }
.chroma .nf { color:#268bd2 }
.chroma .fm { color:#268bd2 }
.chroma .s { color:#2aa198 }
.chroma .sa { color:#2aa198 }
.chroma .sb { color:#2aa198 }
.chroma .sc { color:#2aa198 }
.chroma .dl { color:#2aa198 }
.chroma .sd { color:#2aa198 }
.chroma .s2 { color:#2aa198 }
.chroma .se { color:#cb4b16 }
.chroma .sh { color:#2aa198 }
.chroma .si { color:#2aa198 }
.chroma .sx { color:#2aa198 }
.chroma .sr { color:#2aa198 }
.chroma .s1 { color:#2aa198 }
.chroma .ss { color:#d33682 }
.chroma .m { color:#d33682 }
.chroma .mb { color:#d33682 }
.chroma .mf { color:#d33682 }
.chroma .mh { color:#d33682 }
.chroma .mi { color:#d33682 }
.chroma .il { color:#d33682 }
.chroma .mo { color:#d33682 }
.chroma .o { color:#657b83 }
.chroma .ow { color:#859900 }
.chroma .or { color:#657b83 }
.chroma .p { color:#657b83 }
.chroma .x { color:#657b83 }
.chroma .c { color:#93a1a1 }
.chroma .ch { color:#93a1a1 }
.chroma .cm { color:#93a1a1 }
.chroma .c1 { color:#93a1a1 }
.chroma .cs { color:#93a1a1 }
.chroma .cp { color:#6c71c4 }
.chroma .cpf { color:#6c71c4 }
.chroma .gd { color:#dc322f }
.chroma .ge { font-style:italic }
.chroma .gr { color:#dc322f }
.chroma .gh { color:#268bd2;font-weight:bold }
.chroma .gi { color:#859900 }
.chroma .go { color:#93a1a1 }
.chroma .gp { color:#b58900;font-weight:bold }
.chroma .gs { font-weight:bold }
.chroma .gu { color:#6c71c4;font-weight:bold }
.chroma .gt { color:#dc322f }
.chroma .gl { text-decoration:underline }
.chroma .w { color:#93a1a1 }
.chroma .ld { color:#2aa198 }

@media (prefers-color-scheme: dark) {
    .chroma { color:#93a1a1;background-color:#073642; }
    .chroma .x { color:#93a1a1 }
    .chroma .err { color:#dc322f;background-color:#002b36 }
    .chroma .hl { background-color:#002b36 }
    .chroma .k { color:#859900 }
    .chroma .kc { color:#859900 }
    .chroma .kd { color:#859900 }
    .chroma .kn { color:#859900 }
    .chroma .kp { color:#859900 }
    .chroma .kr { color:#859900 }
    .chroma .kt { color:#b58900 }
    .chroma .na { color:#268bd2 }
    .chroma .nc { color:#b58900 }
    .chroma .no { color:#cb4b16 }
    .chroma .nd { color:#6c71c4 }
    .chroma .ni { color:#6c71c4 }
    .chroma .ne { color:#dc322f }
    .chroma .nl { color:#268bd2 }
    .chroma .nn { color:#b58900 }
    .chroma .nx { color:#93a1a1 }
    .chroma .nt { color:#859900 }
    .chroma .nb { color:#268bd2 }
    .chroma .bp { color:#268bd2 }
    .chroma .nv { color:#268bd2 }
    .chroma .vc { color:#268bd2 }
    .chroma .vg { color:#268bd2 }
    .chroma .vi { color:#268bd2 }
    .chroma .vm { color:#268bd2 }
    .chroma .nf { color:#268bd2 }
    .chroma .fm { color:#268bd2 }
    .chroma .ld { color:#2aa198 }
    .chroma .s { color:#2aa198 }
    .chroma .sa { color:#2aa198 }
    .chroma .sb { color:#2aa198 }
    .chroma .sc { color:#2aa198 }
    .chroma .dl { color:#2aa198 }
    .chroma .sd { color:#2aa198 }
    .chroma .s2 { color:#2aa198 }
    .chroma .se { color:#cb4b16 }
    .chroma .sh { color:#2aa198 }
    .chroma .si { color:#2aa198 }
    .chroma .sx { color:#2aa198 }
    .chroma .sr { color:#2aa198 }
    .chroma .s1 { color:#2aa198 }
    .chroma .ss { color:#d33682 }
    .chroma .m { color:#d33682 }
    .chroma .mb { color:#d33682 }
    .chroma .mf { color:#d33682 }
    .chroma .mh { color:#d33682 }
    .chroma .mi { color:#d33682 }
    .chroma .il { color:#d33682 }
    .chroma .mo { color:#d33682 }
    .chroma .o { color:#839496 }
    .chroma .ow { color:#859900 }
    .chroma .or { color:#839496 }
    .chroma .p { color:#839496 }
    .chroma .c { color:#586e75 }
    .chroma .ch { color:#586e75 }
    .chroma .cm { color:#586e75 }
    .chroma .c1 { color:#586e75 }
    .chroma .cs { color:#586e75 }
    .chroma .cp { color:#6c71c4 }
    .chroma .cpf { color:#6c71c4 }
    .chroma .gd { color:#dc322f }
    .chroma .ge { font-style:italic }
    .chroma .gr { color:#dc322f }
    .chroma .gh { color:#268bd2;font-weight:bold }
    .chroma .gi { color:#859900 }
    .chroma .go { color:#586e75 }
    .chroma .gp { color:#b58900;font-weight:bold }
    .chroma .gs { font-weight:bold }
    .chroma .gu { color:#6c71c4;font-weight:bold }
    .chroma .gt { color:#dc322f }
    .chroma .gl { text-decoration:underline }
    .chroma .w { color:#586e75 }
}