: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: sans-serif; line-height: 1.5; }
td, h1, h2, h3, h4, h5 { line-height: 1.2; }
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: 0.5em; }
li { margin-bottom: 0.5em; }
header { border-bottom: thin solid; }
footer { border-top: thin solid; }
pre { border: thin solid; border-radius: 0.5em; padding: 0.5em; line-height: 1.2; }
pre, code:not(pre code) { background: color-mix(in srgb, currentColor 12%, transparent); border-radius: 0.5em; }

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