:root {
	--bg: #fff;
	--fg: #000;
	--link: #f7931a;
}
html {
	font-size: 1.25rem;
	font-family: arial, sans-serif;
	text-size-adjust: 100%;
	background-color: var(--bg);
	color: var(--fg);
	text-align: center;
}
h1 {
	font-size: 3em;
	margin: 0;
}
a {
	color: var(--link);
}
svg a {
	color: var(--fg);
}
svg a:hover {
	color: var(--link);
}
svg a:focus {
	outline: 2px solid var(--fg);
	outline-offset: -2px;
}
header {
	margin-bottom: 2rem;
}
header svg {
	aspect-ratio: 130.251 / 13.471;
	max-width: 900px;
}
main {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 2rem;
}
.treffen,
.spazieren {
	max-height: 9rem;
}
.treffen {
	aspect-ratio: 309 / 340;
}
.spazieren {
	aspect-ratio: 361 / 328;
}
.done {
	opacity: 21%;
}
footer {
	margin-top: 2rem;
	opacity: 50%;
}
@media (prefers-color-scheme: dark) {
	:root {
		--bg: #000;
		--fg: #fff;
	}
}