:root {
	--serif: Vollkorn;
	--mono: 'Iosevka Custom';
	--bg: #1D1F21;
	--fg: #C5C8C6;
	--bg-accent: #222427;
	--accent: #DE935F;
	--lesser: #969896;
	--green: #B5BD68;
	--blue: #81A2BE;
	--red: #C66;
}

*, *::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.8rem;
	color: var(--accent);
	overflow-wrap: none;
}
     pre  > code { color: var(--fg);    }
:not(pre) > code { white-space: nowrap; }

h1 {
	font-size: 1.8rem;
	margin-bottom: 0;
}
h2 { font-size: 1.2rem; }

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 > 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 > img {
	display: block;
	margin: 16px auto;
	width: 50%;
}

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

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

.c-cmt     { color: var(--lesser); }
.c-fn      { color: var(--accent); }
.c-kw      { color: var(--green);  }
.c-pp      { color: var(--blue);   }
.diff-ins  { color: var(--green);  }
.diff-del  { color: var(--red);    }
.diff-loc  { color: var(--lesser); }
.diff-meta { font-weight: bold;    }

@media (min-width: 40em) {
	body {
		font-size: 1.2rem;
		line-height: 1.5;
	}
	pre, code, kbd, samp { font-size: 1rem; }
	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-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.cpu::before  { content: 'Central Processing Unit';   }
	abbr.ec::before   { content: 'Embedded Controller';       }
	abbr.html::before { content: 'Hypertext Markup Language'; }
	abbr.led::before  { content: 'Light-Emitting Diode';      }
	abbr.rgb::before  { content: 'Red Green Blue';            }
}

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