/* ==================== Theme ==================== */

:root {
	--fg: light-dark(#111, #fff);
	--bg: light-dark(#fff, #111);
	--link: light-dark(#004a99, #6cb4ff);
}

/* ==================== Layout ==================== */

body {
	display: flex;
	flex-direction: column;
	min-height: 100dvh;
	margin: 0;
	background: var(--bg);
	color: var(--fg);
	font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

main {
	flex: 1;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	align-content: flex-start;
	justify-content: center;
	gap: 20px;
	padding: 20px;
}

/* ==================== Categories ==================== */

.category {
	flex: 0 0 auto;
	min-width: 300px;
}

.category h2 {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 8px;
	margin: 10px;
}

.category h2 img {
	width: 22px;
	height: 22px;
}

.category ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.category > ul {
	border: 1px solid var(--fg);
	border-radius: 10px;
	overflow: hidden;
}

/* ==================== Links ==================== */

.category a {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	padding: 10px;
	color: var(--fg);
	text-decoration: none;
}

.category a:hover,
.category a:focus-visible {
	background: var(--fg);
	color: var(--bg);
	outline: none;
}

.category a img {
	width: 16px;
	height: 16px;
}

.category a:hover .mono,
.category a:focus-visible .mono {
	filter: invert(1);
}

@media (prefers-color-scheme: dark) {
	.category .mono {
		filter: invert(1);
	}

	.category a:hover .mono,
	.category a:focus-visible .mono {
		filter: none;
	}
}

.category ul ul a {
	padding-left: 30px;
}

.category ul ul a::before {
	content: "-" / "";
}

/* ==================== Footer ==================== */

footer {
	padding: 20px;
	text-align: center;
}

footer a {
	color: var(--link);
	text-decoration: none;
}

footer a:hover,
footer a:focus-visible {
	color: var(--fg);
}