@font-face {
	font-family: "Departure";
	src: url("departure.woff2");
}

@font-face {
	font-family: "Space Grotesk";
	src: url("space_grotesk_variable.woff2");
}

:root {
	--container-width: 720px;
}

* {
	font-display: block;
	font-size: 12pt !important;
	text-transform: lowercase;
}

html {
	scrollbar-gutter: stable;
	font-family: "Space Grotesk", sans-serif;
}

main {
	max-width: var(--container-width);
	position: relative;
	margin: 0px auto;
}

footer {
	max-width: var(--container-width);
	position: relative;
	margin: 64px auto;
	opacity: 50%;
}

nav ul {
	max-width: var(--container-width);
	padding-inline-start: 0;
	margin: 0px auto;
	margin-bottom: 11px;
	display: flex;
	list-style-type: none;
	gap: 8px;
}

a {
	color: #0095e9;
	text-underline-offset: 2px;
	text-decoration-style: dotted;
}

a:visited {
	color: #b55088;
}

a[aria-current="true"] {
	color: #181425;
}

table {
	border-spacing: 0px 2px;
}

tr td {
	padding-right: 16px;
}

tr td[title] {
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-style: dashed;
	cursor: help;
}

thead tr td {
	opacity: 50%;
}

h1 {
	font-size: 22px;
	opacity: 50%;
	font-weight: normal;
	margin-bottom: 2px;
}

h1:not(:first-child) {
	margin-top: 32px;
}

h2 {
	font-size: 22px;
	opacity: 50%;
	font-weight: normal;
}

p {
	margin-top: 2px;
	text-align: justify;
	hyphens: auto;
}

img {
	image-rendering: pixelated;
}

body {
	padding: 32px 32px;
	background: url(./bg.png);
	background-color: #ffffff;
	background-size: 8px;
	image-rendering: pixelated;
	background-repeat: repeat;
	color: #181425;
}
.announcer {
	display: block;
	position: absolute;
	right: 0;
	top: 0;
}
.announcer.dark {
	display: none;
}

@media (prefers-color-scheme: dark) {
	:root {
		color-scheme: dark;
	}
	body {
		padding: 32px 32px;
		background: url(./bg_dark.png);
		background-color: #181425;
		background-size: 8px;
		image-rendering: pixelated;
		background-repeat: repeat;
		color: white;
	}

	.announcer.dark {
		display: block;
		position: absolute;
		right: 0;
		top: 0;
	}
	.announcer {
		display: none;
	}
	a[aria-current="true"] {
		color: white;
	}
}

#rose {
	position: absolute;
	right: 96px;
	top: 64px;
}