@font-face {
	font-family: "Poppins";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("/assets/poppins.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	color-scheme: light;
	--body: #d6ecf0;
	--box: #E3F4F7;
	--box-hover: #ebf7f9;
	--link: #044a4f;
	--text: #111;
	--topic: #c1eef0;
}

@media (prefers-color-scheme: dark) {
	:root {
		color-scheme: dark;
		--body: #10191B;
		--box: #0D1112;
		--box-hover: #0b0e0f;
		--link: #5ab9cf;
		--text: #EEE;
		--topic: #0c1d21;
	}
}

@media (prefers-contrast: more) {
	.box, .topic {
		border-color: var(--text);
	}
}

body, h1, h2, p {
	margin: 0;
}

body {
	align-items: center;
	background: var(--body);
	color: var(--text);
	display: flex;
	flex-direction: column;
	font-family: "Poppins", sans-serif;
	justify-content: center;
	margin-bottom: 2rem;
}

main {
	max-width: 100%;
}

h1, h2 {
	font-weight: normal;
}

h1, .box {
	margin-top: 1rem;
}

.box, .topic {
	border: 1.5px solid transparent;
}

.box {
	background: var(--box);
	border-radius: 1rem;
	color: unset;
	display: block;
	outline: none;
	padding: 1rem;
	text-decoration: none;
	transition: all 0.125s;
}

.box:focus-visible, .box:hover {
	background: var(--box-hover);
	color: var(--link);
}

.topics {
	display: flex;
	gap: 0.5rem;
	margin-top: 0.5rem;
	overflow: auto;
}

.topic {
	background: var(--topic);
	border-radius: 0.875rem;
	display: inline-block;
	padding: 0.125rem 0.625rem;
	white-space: nowrap;
}