:root {
	--s0: 0.1rem;
	--s1: 1rem;
	--s2: 2rem;
	--roundness: 0.4rem;
	--content-width: 750px;

	--fg: #e2ded9;
	--fg2: #b3ab90;
	--bg: #131515;
	--bg2: #2b2b29;
	--link: #bad4f1;
	--link-visited: #e2a7c8;
	--warning: #ffc107;
	--warning-strict: #f76f62;
	--saturation: 70%;
}

@media (prefers-color-scheme: light) {
	:root {
		--fg: #131515;
		--fg2: #485050;
		--bg: #fcf5c2;
		--bg2: #eae3b4;
		--link: #29539b;
		--link-visited: #8f2c94;
		--saturation: 80%;
	}
}

html {
	box-sizing: border-box;
	color: var(--fg);
	background-color: var(--bg);
}

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

body {
	display: flex;
	flex-direction: column;
	justify-content: space-between;

	inline-size: 100%;
	max-inline-size: var(--content-width);
	min-block-size: 100vh;

	margin: 0 auto;
	padding: clamp(var(--s2), 10vw, 4rem) var(--s1) var(--s2);

	font-size: 18px;
	line-height: 1.5em;
	font-family: "Merriweather", system-ui, -apple-system, BlinkMacSystemFont,
		"Segoe UI", Roboto, "Noto Sans", Oxygen, Ubuntu, Cantarell, "Open Sans",
		"Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
		"Segoe UI Symbol", "Noto Color Emoji";
}

nav {
	font-weight: bold;
}

header {
	font-family: "Merriweather Sans", sans-serif;
}

h1 {
	font-size: clamp(2em, 10vw, 3em);
	line-height: 1.1em;
	margin-block: min(3vw, var(--s2));
}

.link-container {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: end;
	gap: var(--s1);
}

.metadata {
	color: var(--fg2);
	font-family: "Merriweather Sans", sans-serif;
}

.line {
	display: inline-block;
}

.links {
	flex-shrink: 0;
	display: flex;
	flex-flow: row nowrap;
	gap: var(--s1);
}

.links > * {
	flex-shrink: 0;
}

.icon {
	color: var(--fg);
	margin-block: 0;
	width: clamp(1.2em, 6vw, 1.5em);
	height: clamp(1.2em, 6vw, 1.5em);
}

.zola-anchor,
.zola-anchor:visited {
	text-decoration: none;
	color: var(--fg);
}

@media (min-width: calc(750px + 2rem + 2rem)) {
	.zola-anchor::before {
		content: "¶";
		display: inline-block;
		width: 0;

		margin-inline-start: calc(-1 * var(--s2));
		margin-inline-end: var(--s2);

		font-size: 0.9em;

		opacity: 0;
		color: var(--fg2);
	}

	h2:hover > .zola-anchor::before,
	h3:hover > .zola-anchor::before,
	h4:hover > .zola-anchor::before,
	h5:hover > .zola-anchor::before,
	h6:hover > .zola-anchor::before {
		opacity: 1;
	}
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: "Merriweather Sans", sans-serif;
	font-weight: bold;
	margin-inline-start: calc(-1 * var(--s2));
	padding-inline-start: var(--s2);
}

h2,
h3,
h4,
h5,
h6 {
	margin-block-start: 0;
	padding-block-start: var(--s2);
}

main {
	flex-grow: 1;
}

article {
	margin-block-end: var(--s2);
}

a {
	text-underline-offset: 16%;
	text-decoration-thickness: 8%;
	color: var(--link);
}

a:visited {
	color: var(--link-visited);
}

a:has(img) {
	text-decoration: none;
}

pre,
pre.z-code {
	overflow-y: auto;
	background-color: var(--bg2);
	border-radius: var(--roundness);
	margin: var(--s1) calc(-1 * var(--s2));
}

pre > code {
	display: inline-block;
	padding: var(--s1) var(--s2);
	font-weight: normal;
}

:not(pre) > code {
	font-weight: bold;
}

@media (max-width: calc(750px + 2rem + 2rem)) {
	pre,
	pre.z-code {
		border-radius: 0;
		margin: var(--s1) calc(-1 * (100vw - min(100vw - 2rem, 750px - 32px)) / 2);
	}

	pre > code {
		padding: var(--s1) calc((100vw - min(100vw - 2rem, 750px - 32px)) / 2);
	}
}

main img {
	max-inline-size: 100%;
	border-radius: var(--roundness);
	margin-inline: auto;
	margin-block: var(--s2);
	display: block;
	margin-inline: auto;
}

@media (prefers-color-scheme: light) {
	main img[src$='#light'] {
		filter: invert(0.9) hue-rotate(200deg);
	}
}

@media (prefers-color-scheme: dark) {
	main img[src$='#dark'] {
		filter: invert(0.9) hue-rotate(200deg);
	}
}

ol.uncounted {
	padding-inline-start: 0;
}

@media (min-width: calc(750px + 2rem + 2rem)) {
	ol:not(.uncounted),
	ul {
		margin-inline-start: calc(-1 * var(--s2));
		padding-inline-start: var(--s2);
	}

	:is(ol, ul) ol,
	:is(ol, ul) ul {
		margin-inline-start: 0;
	}
}

ul > li::marker {
	content: "–	";
}

ol:not(.uncounted) {
	counter-reset: list;
}

ol:not(.uncounted) > li {
	counter-increment: list;
}

ol:not(.uncounted) > li::marker {
	content: counter(list) ".	";
}

@media (min-width: calc(750px + 2rem + 2rem)) {
	details {
		margin-inline-start: calc(-1 * var(--s2));
		padding-inline-start: var(--s2);
	}
	summary {
		display: block;
		cursor: pointer;
	}
	summary::before {
		display: inline-block;
		content: "▸	";
		margin-inline-start: calc(-1 * var(--s2));
		width: var(--s2);
	}
	details[open] > summary::before {
		content: "▾	";
	}
}

.articles {
	margin-block-start: 2.5rem;
}

.article {
	list-style-type: none;
	margin-block-end: 2.5rem;
}

.article-header {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
}

.article-title {
	display: block;
	font-size: 1.4em;
	font-weight: bold;
	line-height: 1.5em;
	padding-block: 0;
	margin-inline-end: var(--s1);
	margin-block-end: var(--s1);
}

footer {
	text-align: center;
}

.buttons {
	margin-block-start: var(--s2);
}

.buttons img {
	inline-size: 88px;
	block-size: 31px;
}

.separator {
	margin: var(--s1) 0;
	block-size: 0.5rem;
	border-radius: var(--roundness);
	height: var(--s1);
	background-image: linear-gradient(
		110deg,
		rgb(68, 1, 84),
		rgb(70, 50, 127),
		rgb(54, 92, 141),
		rgb(39, 127, 142),
		rgb(31, 161, 135),
		rgb(74, 194, 109),
		rgb(159, 218, 58),
		rgb(253, 231, 37)
	);
}

.todo {
	font-size: 1.4em;
	text-align: center;
	margin: var(--s2);
	color: #bb5555;
}

.aside {
	padding: var(--s1) var(--s2);
	padding-bottom: calc(var(--s1) - 0.139em); /* specific to Merriweather */
	margin: var(--s1) calc(-1 * var(--s2));
	background-color: var(--bg2);
	border-radius: var(--roundness);
}

@media (max-width: calc(750px + 2rem + 2rem)) {
	.aside {
		border-radius: 0;
		padding: var(--s1) calc((100vw - min(100vw - 2rem, 750px - 32px)) / 2);
		padding-bottom: calc(var(--s1) - 0.139em); /* specific to Merriweather */
		margin: var(--s1) calc(-1 * (100vw - min(100vw - 2rem, 750px - 32px)) / 2);
	}
}

.aside > *:first-child {
	margin-block-start: 0;
}

.aside > *:last-child {
	margin-block-end: 0;
}

.warning {
	background-color: var(--warning);
	border-radius: var(--roundness);
	margin-block-end: var(--s2);
	padding: var(--s1);
	padding-bottom: calc(var(--s1) + 0.189em); /* specific to Merriweather Sans */
	text-align: center;
	color: #131515;
	font-family: "Merriweather Sans", sans-serif;
	font-weight: 500;
}

.warning.strict {
	background-color: var(--warning-strict);
}

.warning a {
	color: #29539b;
}

.editing-history {
	margin-block: var(--s2);
}

.invisible {
	display: none;
}