:root {
	--background-color: #00bfff;
	--foreground-color: #ffffff;
	--card-background-color: var(--foreground-color);
	--card-foreground-color: var(--background-color);
	--card-link-foreground-color: var(--card-foreground-color);

	--table-header-background: var(--card-background-color);
	--table-header-foreground: var(--card-foreground-color);
	--table-border: var(--card-background-color);
	--table-header-link: var(--table-header-foreground);
	--table-cell-background: var(--card-background);
	--table-cell-foreground: var(--card-foreground);
	--table-cell-link: var(--table-cell-foreground);
}
:root.dark-mode {
	--background-color: #000000;
	--foreground-color: #ffffff;
}
body {
	margin: 0;
	padding: 0;
	color: var(--foreground-color);
	background-color: var(--background-color);
	font-family: sans-serif;
	font-size: 11pt;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
}
a {
	color: var(--foreground-color);
}
section {
	padding: 1rem 1rem 4rem 1rem;
	width: 512px;
}
#secret {
	width: 128px;
	height: 128px;
	image-rendering: pixelated;
	image-rendering: optimizeQuality;
	image-rendering: optimizeSpeed;
	image-rendering: -moz-crisp-edges;
}
.card {
	display: block;
	margin: 1rem auto;
	text-align: left;
	color: var(--card-foreground-color);
	background-color: var(--card-background-color);
	border-radius: 0.5rem;
	overflow: auto;
}
.card a, .card a:visited, .card a:active {
	color: var(--card-link-foreground-color);
	background-color: var(--card-link-background-color);
}

p, pre, ul {
	margin: 1rem;
	display: block;
}

ul {
	padding-inline-start: 0.75rem;
}

.scripts-enabled #dark-mode-button {
	display: inline-block;
	position: fixed;
	bottom: 1rem;
	right: 1rem;
	cursor: pointer;
	font-size: 0.75rem;
	display: inline-block;
	padding: 0.5rem;
	color: var(--card-foreground-color);
	background-color: var(--card-background-color);
	border-radius: 0.25rem;
}