.heart { color: red; }

:root { --bg-color: #fdfdfd; --text-color: #000; --dim-color: #dcdcdc; --accent-color: #00337f;    --lighter: color-mix(in srgb, currentColor 65%, transparent); }
@media (prefers-color-scheme: dark) {
    :root { --bg-color: #222; --text-color: #fff; --dim-color: #6c6c6c; --accent-color: #adceff;    --lighter: color-mix(in srgb, currentColor 65%, transparent); }
}

body  {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-size: 16px;
    font-family: sans-serif;
    min-width: 400px;
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
}

a {
    color: var(--accent-color);
    text-decoration-style: dashed;
    text-decoration-thickness: 1px;
    text-decoration-line: underline;
    text-underline-offset: 2px;
}
a:hover { text-decoration-style: solid; }
sup a { margin-inline: 3px; text-decoration-style: solid; }

h1 { text-align: center; }
h1, h2, h3, h4, h5, h6 { margin-top: 1.5em; }
:is(h1, h2, h3, h4, h5, h6) a { color: var(--text-color); text-decoration: none; }

p { hyphens: auto; text-align: justify; line-height: 1.42; }
p.center { text-align: center; text-indent: 0 !important; }
main p:not(:has(img)) { text-indent: 3ex; }

div.taxonomy-content { margin-bottom: 2.25em; }

img { width: 100%; }

blockquote {
    margin: 0;
    padding: 1px calc(3ex - 4px);
    border-left: var(--accent-color) solid 4px;
}

p > code {
    border: 1px solid var(--dim-color);
    padding-inline: 3px;
    border-radius: 3px;
}
pre {
    border: var(--dim-color) solid 1px;
    border-radius: 8px;
    padding: 1.87ex calc(3ex - 2px);
    min-height: calc(1em + 8px);
}
pre code { vertical-align: middle; }
pre:hover .copy-button { display: block; }
.copy-button {
    display: none;
    float: right;
    border-radius: 4px;
    padding: 4px 12px;
    background-color: var(--bg-color);
    color: var(--text-color);
    border: var(--accent-color) 1px solid;
    font-size: small;
    font-weight: bold;
    line-height: 1em;
    cursor: pointer;
}

table {
    width: 100%;
    border-collapse: collapse;
}
th, td { padding: .5em .75em; border: 1px solid var(--dim-color); }

hr { margin-block: .85em; border-color: var(--dim-color); color: var(--dim-color); }

ul, ol { line-height: 1.42; }

header nav ul {
    list-style-type: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-inline: 3ex 0;
    margin-block: 1em;
}
p.site-subtitle { font-size: large; }

main { margin-top: 2.2em; }
main ul { padding-left: 5.32ex; }
ul.posts { padding-left: 2.6ex; }
ul.posts li { display: table-row; }
ul.posts li > * { display: table-cell; }
ul.posts li time { padding-right: 1ex; }
ul.posts .posts-count { color: var(--lighter); }
section.footnotes { border-top: var(--dim-color) 1px dashed; margin-top: 3em; }

footer { margin-top: 3rem; }
footer section.page ul {
    list-style-type: none;
    padding-inline: 3ex 0;
    margin: 6px 0 0 0;
    line-height: 1.55em;
}
.pub-label { font-style: italic; text-indent: .45ex; margin: 2px 0; }
li.home::marker { content: "↩\2002"; font-weight: bold; }
li.langs::marker { content: "⇄\2002" }
li.taxonomy::marker { content: "✦\2002"; }

footer section.site { font-size: smaller; }
footer section.site ul.links {
    list-style-type: none;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    margin-inline: auto;
    width: 95%;
}
footer section.site ul.links li:not(:first-of-type)::before {
    content: "\2002\2002•\2002\2002";
    font-size: smaller;
    color: var(--lighter);
}
footer section.site p { text-align: center; margin-inline: auto; width: 95%; }

ul.lang-select { list-style: none; padding: 0; }
ul.lang-select li { text-align: center; font-size: large; line-height: 1.75em; }

/* Syntax highlighting */
.hl-comment { font-style: italic; color: var(--lighter); }
.hl-preprocessor { font-weight: bold; font-style: italic; }
.hl-tag, .hl-function, .hl-heading, .hl-label { font-weight: bold; }
.hl-reference, .hl-variable, .hl-code, .hl-embedded, .hl-identifier { font-weight: normal; }
.hl-operator { font-weight: lighter; color: var(--lighter); }
.hl-annotation, .hl-class, .hl-type, .hl-keyword { font-weight: bolder; }
.hl-attribute, .hl-constant { font-weight: normal; }
.hl-bold, .hl-italic, .hl-number, .hl-underline, .hl-string { font-style: italic; }
.hl-link, .hl-list, .hl-error, .hl-regex { font-style: italic; text-decoration: underline; }