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

:root {
	color-scheme: light dark;
}

@media (prefers-color-scheme: light) {
	:root {
		--fg: black;
		--bg: white;
		--faint: rgba(0, 0, 0, 0.75);
	}
}

@media (prefers-color-scheme: dark) {
	:root {
		--fg: white;
		--bg: black;
		--faint: rgba(255, 255, 255, 0.75);
	}

	a {
		color: #AAF;
	}
}

body {
	text-align: justify;
	width: min(800px, 90%);
	margin-inline: auto;
	font-size: 18px;
	font-family: serif;
}

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

	&.de {
		p:first-child::before { content: '„'; }
		p:last-child::after   { content: '“'; }
	}

	& + figcaption::before { content: '— '; }
}

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

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

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

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

header {
	> div {
		menu {
			display: flex;
			gap: 2ch;
		}

		li {
			list-style: none;
		}
	}

	div.head {
		display: flex;
		justify-content: space-between;
		align-items: center;

		menu {
			display: flex;
			gap: 2ch;
		}

		li {
			list-style: none;
		}
	}
}

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

figure pre.code-sample {
	overflow-x: scroll;
	tab-size: 4;

	> code {
		counter-increment: line;
		&::before {
			position: absolute;

			margin-left: -4ch;
			padding-right: .5ch;
			width: 3ch;

			text-align: right;
			content: counter(line);
			color: var(--fg);
			border-right: 1px solid var(--fg);
		}
	}
}

footer {
	margin-block: 2rem;
	text-align: center;
	font-style: italic;
}

ins, del { text-decoration: none; }
ins      { color: green; }
del      { color: red;   }

.hl-red { color: red; }

aside {
	font-style: italic;
	color: var(--faint);

	&[data-ref]::before {
		font-style: normal;
		position: absolute;
		margin-inline-start: -2ch;
		content: attr(data-ref);
	}
}