:root {
    color-scheme: light dark;
    --lighter: color-mix(in srgb, currentColor 70%, transparent);
}
* {
    box-sizing: border-box;
}
body {
    max-width: 40em;
    margin: auto;
    padding: 0.5em 1em 1em 1em;
    font-family: "Noto Serif", serif;
    line-height: 1.5;
}
td,
h1,
h2,
h3,
h4,
h5 {
    line-height: 1.2;
    font-family: "Noto Sans", "Open Sans", sans-serif;
}
pre {
    overflow: auto;
}
img {
    display: block;
    max-width: 100%;
}
ul,
ol {
    padding-left: 1.5em;
}
ul.posts {
    padding-left: 0em;
    list-style-type: none;
    display: table;
}
ul.posts li {
    display: table-row;
}
ul.posts li time {
    padding-right: 1em;
    white-space: nowrap;
}
ul.posts li time,
ul.posts li a {
    display: table-cell;
    padding-bottom: 0em;
}
li {
    margin-bottom: 0.5em;
}
header {
    border-bottom: thin solid;
}
header > h1 {
    margin-bottom: 0.25em;
}
header > h1 + p {
    margin-top: 0.25em;
    color: var(--lighter);
}
footer {
    border-top: thin solid;
}
pre {
    padding: 0.5em;
    line-height: 1.2;
}
code {
    font-family: "DejaVu Sans Mono", "Noto Sans Mono", monospace;
    font-size: 0.9em;
    line-height: 1;
}
pre,
code:not(pre code) {
    background: color-mix(in srgb, currentColor 7.5%, transparent);
}

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