:root {
	--serif: Vollkorn;
	--mono: 'Iosevka Smooth';
	--bg: #1D1F21;
	--fg: #C5C8C6;
	--bg-accent: #222427;
	--accent: #DE935F;
	--lesser: #969896;
	--green: #B5BD68;
	--aqua: #8ABEB7;
	--blue: #81A2BE;
	--red: #C66;
	--salmon: #FA8072;
	--yellow: #F0E68C;
	--grey: #B3B3B3;
}

@font-face {
	font-family: Vollkorn;
	src: url('fonts/vollkorn-regular.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: Vollkorn;
	src: url('fonts/vollkorn-italic.woff2') format('woff2');
	font-weight: normal;
	font-style: italic;
}

@font-face {
	font-family: 'Iosevka Smooth';
	src: url('fonts/iosevka-regular.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Iosevka Smooth';
	src: url('fonts/iosevka-italic.woff2') format('woff2');
	font-weight: normal;
	font-style: italic;
}

*, *::before, *::after { box-sizing: border-box; }

body {
	font-family: var(--serif);
	font-variant-numeric: lining-nums;
	text-align: justify;
	color: var(--fg);
	background-color: var(--bg);
	display: grid;
	grid-template-columns: 1fr min(800px, 90%) 1fr;
}
body > * { grid-column: 2; }

pre, code, kbd, samp {
	font-family: var(--mono);
	font-size: 0.9rem;
	color: var(--accent);
}
     pre  > code { color: var(--fg);    }
:not(pre) > code { white-space: nowrap; }

pre.js           { tab-size: 4; }
pre.pug, pre.gsp { tab-size: 2; }

h1 {
	font-size: 1.8rem;
	margin-bottom: 0;
}
h2                 { font-size: 1.2rem; }
:is(h1, h2) > code { font-size: 1em;    }

a       { color: var(--accent);  }
a:hover { text-decoration: none; }

blockquote > p:first-child::before  { content: '‘';  }
blockquote > p:last-child::after    { content: '’';  }
blockquote + figcaption::before     { content: '— '; }

blockquote, blockquote + figcaption { font-style: italic; }

.quote {
	border-left: 4px solid var(--accent);
	padding: .4rem .8rem;
	margin-inline: 1rem 0;
	margin-block: 2rem;
}

.quote blockquote { margin-inline-start: 1rem; }
.quote blockquote, .quote blockquote p { margin-block: .5rem; }

.quote figcaption {
	margin-inline-start: 2rem;
	margin-block: .5rem;
}

figure:not(.quote) figcaption {
	text-align: center;
	text-decoration: underline;
}

hr   { width: 100%; }
main { margin-block-end: 5rem; }

footer {
	margin-block: 2rem;
	text-align: center;
	font-style: italic;
	color: var(--lesser);
}

aside {
	font-style: italic;
	color: var(--lesser);
	position: relative;
}

aside > p::before,
x-ref {
	vertical-align: super;
	font-size: .8rem;
}

figure { margin-inline: 0; }
figure > pre { margin-left: 4ch; overflow-x: scroll; }
figure > pre > code { counter-increment: line; }
figure > pre > code::before {
	position: absolute;
	content: counter(line);
	padding-right: .5ch;
	margin-left: -4ch;
	width: 3ch;
	text-align: right;
	display: inline-block;
	border-right: 1px solid var(--lesser);
	color: var(--lesser);
	z-index: 1;
	background-color: var(--bg);
}

figure > :where(img, object, video) {
	display: block;
	margin: 16px auto;
}

figure > img    { width: 50%;  }
figure > is:(object, video) { width: 100%; }

header > div {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

header > div menu {
	display: flex;
	gap: 2ch;
}
header > div li { list-style: none; }

p { margin-top: 0; }

dl {
	display: grid;
	grid-template-columns: max-content auto;
}

/* Old classes */
.c-cmt, .sh-cmt { color: var(--lesser); font-style: italic; }
        .sh-var { color: var(--blue);   font-style: italic; }
.c-fn,  .sh-fn  { color: var(--accent); }
.c-kw,  .sh-kw  { color: var(--green);  }
.c-pp           { color: var(--blue);   }
        .sh-str { color: var(--aqua);   }
        .sh-hd  { color: var(--aqua);   }
        .sh-ex  { color: var(--salmon); }

/* New classes */
.cmt  { color: var(--lesser); font-style: italic; }
.fn   { color: var(--accent); }
.kw   { color: var(--green);  }
.str  { color: var(--aqua);   }
.cnst { color: var(--blue);   }
.op   { color: var(--lesser); }

.diff-ins  { color: var(--green);  }
.diff-del  { color: var(--red);    }
.diff-loc  { color: var(--lesser); }
.diff-meta { font-weight: bold;    }

.md-delim { color: var(--grey); }
.md-head {
	color: var(--yellow);
	font-weight: bold;
}

.pug-node, .gsp-node { color: var(--accent); }
.pug-cont            { color: var(--lesser); }
.gsp-attr { color: var(--green);  }
.gsp-val  { color: var(--aqua);   }
.gsp-op   { color: var(--lesser); }

.article {
	display: flex;
	justify-content: space-between;
}

@media (min-width: 800px) {
	body {
		font-size: 1.3rem;
		line-height: 1.5;
	}
	pre, code, kbd, samp { font-size: 1.2rem; }
	h1 { font-size: 3rem;   }
	h2 { font-size: 2.5rem; }

	.quote { margin-inline: 2rem 0; }

	aside > p::before {
		content: attr(data-ref);
		position: absolute;
		left: -1.5ch;
	}

	abbr {
		cursor: help;
		position: relative;
		text-underline-offset: 4px;
		text-decoration-line: underline;
		text-decoration-style: dotted;
	}

	abbr:hover::before {
		opacity: 1;
		pointer-events: inherit;
	}

	abbr::before {
		opacity: 0;
		position: absolute;
		bottom: 100%;
		transition: .15s ease opacity;
		white-space: nowrap;
		padding: .15em .25em;
		border: 1px solid var(--fg);
		border-radius: 2px;
		background: var(--bg-accent);
		pointer-events: none;
	}

	abbr.api::before  { content: 'Application Programming Interface'; }
	abbr.ast::before  { content: 'Abstract Syntax Tree';              }
	abbr.cli::before  { content: 'Command-Line Interface';            }
	abbr.cpu::before  { content: 'Central Processing Unit';           }
	abbr.css::before  { content: 'Cascading Stylesheets';             }
	abbr.cv::before   { content: 'Curriculum Vitæ';                   }
	abbr.ec::before   { content: 'Embedded Controller';               }
	abbr.gnu::before  { content: 'GNU’s Not UNIX';                    }
	abbr.gsp::before  { content: 'German Shorthaired Pointer';        }
	abbr.html::before { content: 'Hypertext Markup Language';         }
	abbr.it::before   { content: 'Information Technology';            }
	abbr.js::before   { content: 'JavaScript';                        }
	abbr.led::before  { content: 'Light-Emitting Diode';              }
	abbr.nas::before  { content: 'Network Attached Storage';          }
	abbr.pdf::before  { content: 'Portable Document Format';          }
	abbr.qr::before   { content: 'Quick Response';                    }
	abbr.rgb::before  { content: 'Red Green Blue';                    }
	abbr.sha::before  { content: 'Secure Hash Algorithm';             }
	abbr.tfa::before  { content: 'Two-Factor Authentication';         }
	abbr.totp::before { content: 'Time-Based One-Time Password';      }
	abbr.uri::before  { content: 'Uniform Resource Identifier';       }
	abbr.xml::before  { content: 'Extensible Markup Language';        }
}

@media (max-width: 600px) {
	body         { tab-size: 4; }
	main         { margin-block-end: 2rem; }
	h1, h2, p    { overflow-wrap: break-word; hyphens: auto; }
	header > div { display: block; }
	ul, menu     { padding-inline-start: 0; }
	:where(ul, menu) > li:not(:last-of-type) { margin-block-end: .3rem; }
	.article { display: block; }
	.article > * { display: block; }
}