main.css

:root {
	--bg-selected-L: hsl(300 50% 70%);
	--color-selected-L: hsl(0 0% 0%);
	--bg-L: hsl(0 0% 98%);
	--bg-D: hsl(0 0% 15%);
	--color-L: hsl(0 0% 0%);
	--color-D: hsl(0 0% 85%);
	--color-dim-L: hsl(0 0% 30%);
	--color-dim-D: hsl(0, 0%, 66%);
	--color-h2-L: hsl(0 0% 20%);
	--color-h2-D: hsl(0 0% 72%);
	--color-anchor-L: LinkText;
	--color-anchor-D: hsl(240, 100%, 70%);
	--color-anchor-visited-L: VisitedText;
	--color-anchor-visited-D: hsl(271, 68%, 70%);
	--color-anchor-active-L: ActiveText;
	--color-anchor-active-D: ActiveText;
	--bg-keyboard-L: hsl(0 0% 86%);
	--bg-keyboard-D: hsl(0 0% 86%);
	--color-keyboard-L: hsl(0 0% 0%);
	--color-keyboard-D: hsl(0 0% 0%);
	--border-keyboard-L: hsl(0 0% 60%);
	--border-keyboard-D: hsl(0 0% 60%);
	--bg-header-L: hsl(300 100% 98%);
	--bg-header-D: hsl(300, 30%, 23%);
	--border-header-L: hsl(300 100% 88%);
	--border-header-D: hsl(300 40% 40%);
	--bg-nav-button-L: var(--bg-L);
	--bg-nav-button-D: var(--bg-D);
	--bg-nav-button-hover-L: var(--bg-header-L);
	--bg-nav-button-hover-D: var(--bg-header-D);
	--border-nav-button-L: var(--border-header-L);
	--border-nav-button-D: var(--border-header-D);
	--border-nav-button-hover-L: var(--bg-header-L);
	--border-nav-button-hover-D: var(--bg-header-D);
	--color-info-L: hsl(0 0% 50%);
	--color-info-D: hsl(0 0% 50%);
	--color-info-hover-L: hsl(300 100% 34%);
	--color-info-hover-D: hsl(300 100% 34%);
	--outline-info-details-L: hsl(0 0% 60%);
	--outline-info-details-D: hsl(0 0% 60%);
	--color-info-details-L: hsl(0 0% 0%);
	--color-info-details-D: hsl(0 0% 0%);
	--border-bubble-L: hsl(0 0% 64%);
	--border-bubble-D: hsl(0 0% 64%);
}

:root, :root:has(#theme-light:checked) {
	--bg-selected: var(--bg-selected-L);
	--color-selected: var(--color-selected-L);
	--bg: var(--bg-L);
	--color: var(--color-L);
	--color-dim: var(--color-dim-L);
	--color-h2: var(--color-h2-L);
	--color-anchor: var(--color-anchor-L);
	--color-anchor-visited: var(--color-anchor-visited-L);
	--color-anchor-active: var(--color-anchor-active-L);
	--bg-keyboard: var(--bg-keyboard-L);
	--color-keyboard: var(--color-keyboard-L);
	--border-keyboard: var(--border-keyboard-L);
	--bg-header: var(--bg-header-L);
	--border-header: var(--border-header-L);
	--bg-nav-button: var(--bg-nav-button-L);
	--bg-nav-button-hover: var(--bg-nav-button-hover-L);
	--border-nav-button: var(--border-nav-button-L);
	--border-nav-button-hover: var(--bg-nav-button-hover-L);
	--color-info: var(--color-info-L);
	--color-info-hover: var(--color-info-hover-L);
	--outline-info-details: var(--outline-info-details-L);
	--color-info-details: var(--color-info-details-L);
	--border-bubble: var(--border-bubble-L);
}

:root:has(#theme-dark:checked) {
	--bg: var(--bg-D);
	--color: var(--color-D);
	--color-dim: var(--color-dim-D);
	--color-h2: var(--color-h2-D);
	--color-anchor: var(--color-anchor-D);
	--color-anchor-visited: var(--color-anchor-visited-D);
	--color-anchor-active: var(--color-anchor-active-D);
	--bg-keyboard: var(--bg-keyboard-D);
	--color-keyboard: var(--color-keyboard-D);
	--border-keyboard: var(--border-keyboard-D);
	--bg-header: var(--bg-header-D);
	--border-header: var(--border-header-D);
	--bg-nav-button: var(--bg-nav-button-D);
	--bg-nav-button-hover: var(--bg-nav-button-hover-D);
	--border-nav-button: var(--border-nav-button-D);
	--border-nav-button-hover: var(--bg-nav-button-hover-D);
	--color-info: var(--color-info-D);
	--color-info-hover: var(--color-info-hover-D);
	--outline-info-details: var(--outline-info-details-D);
	--color-info-details: var(--color-info-details-D);
	--border-bubble: var(--border-bubble-D);
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg: var(--bg-D);
		--color: var(--color-D);
		--color-dim: var(--color-dim-D);
		--color-h2: var(--color-h2-D);
		--color-anchor: var(--color-anchor-D);
		--color-anchor-visited: var(--color-anchor-visited-D);
		--color-anchor-active: var(--color-anchor-active-D);
		--bg-keyboard: var(--bg-keyboard-D);
		--color-keyboard: var(--color-keyboard-D);
		--border-keyboard: var(--border-keyboard-D);
		--bg-header: var(--bg-header-D);
		--border-header: var(--border-header-D);
		--bg-nav-button: var(--bg-nav-button-D);
		--bg-nav-button-hover: var(--bg-nav-button-hover-D);
		--border-nav-button: var(--border-nav-button-D);
		--border-nav-button-hover: var(--bg-nav-button-hover-D);
		--color-info: var(--color-info-D);
		--color-info-hover: var(--color-info-hover-D);
		--outline-info-details: var(--outline-info-details-D);
		--color-info-details: var(--color-info-details-D);
		--border-bubble: var(--border-bubble-D);
	}
}

:root {
	font-family: Georgia, serif;
	background: var(--bg);
	color: var(--color);
}

body {
	margin: 0;
}

body > input {
	position: fixed;
}

header > *, main > * {
	margin-inline: 10px;
}

main > .full-width {
	margin-inline: 0;
	padding-inline: 10px;
}

#header {
	display: flex;
	overflow-y: visible; /* Ensure that dropdowns can drop below the header. */
	background: var(--bg-header);
	border-bottom: 2px solid var(--border-header);
	position: sticky;
	top: 0;
	z-index: 1;
}

#header .brand {
	display: flex;
}

#header .controls {
	display: flex;
	flex-grow: 1;
	align-items: center;
}

#header nav {
	display: flex;
	position: relative;
	flex-grow: 1;
	gap: 20px;
	align-items: center;
}

#header nav a {
	display: block;
	padding: 14px;
	background: var(--bg-nav-button);
	border: 2px solid var(--border-nav-button);
	border-radius: 12px;
}

#header nav a[href^="#"] {
	padding: 8px;
	border-radius: 0;
}

#header nav a:hover {
	background: var(--border-nav-button);
}

#header nav a:active {
	background: var(--bg-header);
	border-color: var(--bg-header);
}

#header nav a.hidden {
	position: absolute;
}

#header nav a.hidden:not(:focus) {
	opacity: 0;
	pointer-events: none;
}

#header nav div {
	position: relative;
}

#header .menu:focus-within fieldset, #header .menu fieldset:active, #header .menu fieldset:hover {
	display: flex;
}

#header .menu fieldset {
	display: none;
	flex-direction: column;
	gap: 2px;
	position: absolute;
	width: 100%;
	top: calc(100% - 2px);
	left: 0;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	border: 2px solid var(--border-nav-button);
	border-top: none;
	background: var(--bg);
}

#header .menu fieldset legend {
	display: none;
}

#header .menu fieldset input {
	position: absolute;
	opacity: 0;
}

#header .menu fieldset label {
	display: block;
	margin: 1px;
	padding: 2px;
}

#header .menu fieldset input:checked + label {
	background: var(--bg-selected);
	color: var(--color-selected);
}

#header .menu fieldset input:focus + label {
	outline: 2px solid var(--bg-selected);
	outline-offset: 1px;
}

#header .logo-icon {
	width: 38px;
	margin-right: 10px;
	padding-bottom: 10px;
}

#main {
	overflow: auto; /* Prevent margin collapse over the top and bottom. */
}

.logo-title {
	margin-block: 0.4em;
	white-space: nowrap;
	font-weight: normal;
}

/* High specificity with :root to match pseudo-class selectors. */
:root .logo-title a {
	color: var(--color);
	text-decoration: none;
}

/* Alternate stacked header layout for narrow screens */
@media (max-width: 700px) {
	#header {
		flex-direction: column;
	}

	#header nav {
		margin-inline: 0;
		padding-block: 4px;
		gap: 10px;
	}

	#header nav a {
		padding: 8px;
	}

	#header .logo-icon {
		padding-bottom: 0;
	}

	#header .logo-title {
		margin-block-start: 0.5em;
		margin-block-end: 0.2em;
		font-size: 24px;
	}
}

h1 {
	color: var(--color);
}

h2 {
	margin-block: 1.4em;
	font-weight: normal;
	text-decoration: 2px solid underline;
	color: var(--color-h2);
}

input.info {
	display: inline-block;
	position: relative;
	margin-inline: 0.3em;
	width: 1.2em;
	height: 1.2em;
	border: none;
	border-radius: 1em;
	text-align: center;
	font-weight: bold;
	background: none;
	color: var(--color-info);
	appearance: none; /* Remove checkbox appearance for custom styling - may only work in newest browsers */
}

input.info:not(:focus-visible) {
	outline: 1px solid;
}

input.info:hover {
	color: var(--color-info-hover);
}

input.info::before {
	content: "?";
}

input.info:checked::after {
	content: "";
	position: absolute;
	border-bottom: 0.8em solid var(--outline-info-details);
	border-left: 0.8em solid transparent;
	border-right: 0.8em solid transparent;
	top: 1.2em;
	left: -0.2em;
}

.info.details {
	display: none;
	float: right;
	box-sizing: border-box;
	width: 100%;
	padding: 0.8em;
	margin-block: 0.5em;
	background: Canvas;
	outline: 1px solid var(--outline-info-details);
	color: var(--color-info-details)
}

input.info:checked + .info.details {
	display: block;
}

a {
	color: var(--color-anchor);
}

a:visited {
	color: var(--color-anchor-visited);
}

a:active {
	color: var(--color-anchor-active);
}

kbd {
	padding-inline: 3px;
	padding-block: 1px;
	border: 1px solid var(--border-keyboard);
	border-radius: 6px;
	background: var(--bg-keyboard);
	box-shadow: 0 2px 0 0 var(--border-keyboard);
	color: var(--color-keyboard);
}