* {
	box-sizing: border-box;
	margin: 0;
}

a {
	color: #aaf;
}

a:visited {
	color: #daf;
}

body {
	background: #0e1f3f fixed no-repeat 53% top/cover
		url("/assets/background.webp");
	color: #fff;
	min-height: 100dvh;

	padding: 1em;

	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 1em;

	font-family: serif;
}

body > * {
	background: #000b;
	padding: 1.5ch;
	max-width: min(64ch, 44%);
}

h1,
h2,
h3 {
	font-size: 1rem;
	display: inline-block;
}

main {
	display: flex;
	flex-direction: column;
}

main > * + * {
	margin-block-start: 1em;
}

ul {
	padding-inline-start: 2.5ch;
}

h3 + ul {
	margin-block-start: 0.25em;
}

li {
	flex-direction: column;
}

li + li {
	margin-block-start: 0.25em;
}

li > span {
	display: block;
	font-size: 0.8em;
	opacity: 0.8;
}

/* The mess of CSS for tabs. See https://css-tricks.com/pure-css-tabs-with-details-grid-and-subgrid/ */

.grid {
	display: grid;
	grid-template: auto 1fr / repeat(4, 1fr);

	--tab-count: 4;
}

.grid > details {
	display: grid;
	grid-template: subgrid / subgrid;
	grid-column: 1 / -1;
	grid-row: 1 / span 2;
}

.grid > details::details-content {
	grid-row: 2;
	grid-column: 1 / -1;
	padding: 1rem 0 0;

	z-index: 2;
}

details > :not(summary) + * {
	margin-block-start: 1em;
}

details:not([open])::details-content {
	display: none;
}

.grid > details > summary {
	grid-row: 1;
	display: grid;
	cursor: pointer;
	padding: 0 1ch;
	text-align: center;

	grid-column: var(--n) / span 1;

	z-index: 1;
}

details[open] > summary > h2 {
	border-bottom: 1px solid white;
}

details:nth-of-type(1) summary {
	grid-column: 1 / span 1;
}

details:nth-of-type(2) summary {
	grid-column: 2 / span 1;
}

details:nth-of-type(3) summary {
	grid-column: 3 / span 1;
}

details:nth-of-type(4) summary {
	grid-column: 4 / span 1;
}

.mobile {
	display: none;
}

@media (max-width: 560px) {
	body {
		font-size: 0.9em;
	}

	body > * {
		max-width: none;
	}

	.mobile {
		display: initial;
	}
}