@font-face {
	font-family: 'Literata';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('/assets/fonts/literata-v40-latin-regular.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	--color-bg: #1e1e1e;
	--color-mid: #686868;
	--color-fg: #d0ccc8;
	--color-accent: #bb2525;
	--text-size: 14pt;
}

body {
	max-width: 800px;
	margin: auto;
	padding: 1em;
	line-height: 1.5;
	color: var(--color-fg);
	background-color: var(--color-bg);
	font-size: var(--text-size);
	font-family: 'Literata', Georgia, serif;
}

/* header and footer areas */
.nav-inner {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
}
.headertext {
	color: var(--color-fg);
	font-size: 1.3em;
	font-weight: bold;
	text-decoration: none;
}
.menu { padding: 0; margin: 0; }
.menu li { display: inline-block; margin-left: 1.2em; }
.menu li a { color: var(--color-fg); text-decoration: underline; text-underline-offset: 2px; font-size: 0.9em; }
.menu li a:hover { color: var(--color-accent); }
.nav-left { display: flex; align-items: baseline; gap: 0.8em; flex-wrap: wrap; }
.site-subtitle {
	font-style: italic;
	color: var(--color-mid);
	font-size: 0.82em;
}
.article-meta { text-align: center; }
.post-meta {
	display: flex;
	align-items: baseline;
	gap: 1em;
	margin-bottom: 1.5em;
	font-size: 0.85em;
	color: var(--color-mid);
}
footer { margin-top: 3em; padding: 1em 0; font-size: 0.85em; color: var(--color-fg); }
footer hr { margin-bottom: 0.8em; }
.footer-inner { display: flex; justify-content: space-between; }

/* code */
pre {
	border: 1px solid var(--color-mid);
	box-shadow: 5px 5px 5px var(--color-bg);
	padding: 1em;
	overflow-x: auto;
}
code {
	font-family: "Lucida Console", Monaco, monospace;
	font-size: 78%;
	background: var(--color-bg);
}
pre code { background: none; }

/* Alignment of figures */
figure {
	max-width: 80%;
	margin: 0 auto;
	padding-top: 20px;
	padding-bottom: 20px;
	text-align: center;
}
figcaption {
	font-size: 0.82em;
	margin-top: 0.4em;
}
figure figcaption h4 {
	margin-top: 5px;
	margin-bottom: 0;
}
figure.right {
	margin: 15px;
	float: right;
}
figure.left {
	margin: 15px;
	float: left;
}

/* elements */
a { color: var(--color-fg); }
a:not(.tag):hover { color: var(--color-accent); text-decoration: underline; }
main a:not(.tag) { text-decoration: underline; text-underline-offset: 2px; }
footer a { text-decoration: underline; text-underline-offset: 2px; }
hr { color: var(--color-mid); }
nav hr { color: var(--color-fg); }
h1, h2, h3 { color: var(--color-fg); }

img, iframe, video { max-width: 100%; }
main {
	margin-top: 40px;
	hyphens: auto;
}
blockquote {
	background: var(--color-bg);
	border-left: 5px solid var(--color-accent);
	padding: 3px 1em 3px;
}

table {
	margin: auto;
	border-top: 1px solid var(--color-mid);
	border-bottom: 1px solid var(--color-mid);
}
table thead th { border-bottom: 1px solid var(--color-mid); }
th, td { padding: 5px; }
thead, tfoot, tr:nth-child(even) { background: var(--color-bg); }

/* homepage intro */
.home-intro {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 2em;
	align-items: start;
	margin-bottom: 2.5em;
}
.home-intro-text { min-width: 0; }
.contact-box {
	flex-shrink: 0;
	border: 1px solid var(--color-mid);
	padding: 0.4em 0.7em;
	font-size: 0.85em;
	color: var(--color-mid);
	min-width: 200px;
	margin-top: 1.5em;
	line-height: 1.2;
}
.contact-box ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.contact-box li { margin: 0.2em 0; }
.contact-box li::before { content: "– "; color: var(--color-mid); }
@media (max-width: 600px) {
	.contact-box ul { display: flex; flex-wrap: wrap; gap: 0; }
	.contact-box li { margin: 0; }
	.contact-box li::before { content: none; }
	.contact-box li::after { content: " /"; margin: 0 0.3em; color: var(--color-mid); }
	.contact-box li:last-child::after { content: none; }
}
.contact-box a { color: var(--color-fg); text-decoration: underline; text-underline-offset: 2px; }
.contact-box a:hover { color: var(--color-accent); }
@media (max-width: 600px) {
	.home-intro { grid-template-columns: 1fr; }
	.contact-box { margin-top: 0.4em; margin-bottom: 1.5em; }
	code { overflow-wrap: break-word; word-break: break-all; }
	.cat-dither { width: 70px; }
	.articles-heading { padding-right: 140px; }
	figure.right, figure.left { float: none; margin: 15px auto; }
}
.articles-header {
	position: relative;
	margin-bottom: 1.2em;
}
.articles-heading {
	font-size: 1.1em;
	color: var(--color-fg);
	border-bottom: 1px solid var(--color-mid);
	padding-bottom: 0.3em;
	margin-bottom: 0;
}
.cat-dither {
	position: absolute;
	right: 0;
	bottom: 1px;
	width: 140px;
	image-rendering: pixelated;
	opacity: 0.65;
}

/* homepage */
.post-list { list-style: none; padding: 0; margin: 0; }
.post-item { margin-bottom: 1.4em; }
.post-body { display: flex; flex-direction: column; gap: 0.2em; }
.post-header {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1em;
}
.post-date {
	flex-shrink: 0;
	color: var(--color-mid);
	font-size: 0.78em;
}
.post-title { font-weight: normal; text-decoration: underline; text-underline-offset: 2px; color: var(--color-fg); }
.post-title:hover { color: var(--color-accent); text-decoration: underline; }
.post-subtitle { margin: 0; font-size: 0.8em; color: var(--color-mid); }
.post-tags { display: flex; flex-wrap: wrap; gap: 4px; }

/* tag pills */
.tag {
	display: inline-block;
	border-radius: 3px;
	padding: 1px 7px;
	font-size: 0.75em;
	font-family: monospace;
	text-decoration: none;
	background: #2a2a2a;
	color: #888;
}
.tag:hover { color: var(--color-mid); }
.tag-hack
	{ background: #2a1010; color: #b85858; }
.tag-make
	{ background: #0e2010; color: #48a058; }
.tag-cve
	{ background: #281a08; color: #c07830; }
/* .tag-hardware, .tag-electronics, .tag-embedded, .tag-rp2040, .tag-pcb
	{ background: #101a28; color: #5888b8; }
.tag-web
	{ background: #1a1028; color: #9858c0; }
.tag-opengl
	{ background: #1a1028; color: #8858b8; }
.tag-router, .tag-gameboy
	{ background: #281808; color: #b87840; }
*/