* {
	--font-color: #ddd;
	--box-shadow: 0 0 0.5rem 0.2rem #000;
	background: transparent;
	color: var(--font-color);
}

:root {
	color-scheme: dark;
}

body {
	margin: 1em;
	--side-margin: calc(max(1em, (100% - 70em)/2));
	margin-left: var(--side-margin);
	margin-right: calc(var(--side-margin) - 0.4rem);
	padding: 1em;
	border: 3px solid #222;
	border-radius: 1em;
	box-shadow: var(--box-shadow);
	font-family: system-ui, sans-serif;
	background: #111;

	font-size: 1rem;
}

hr {
	border: none;
	background: #888c;
	height: 1px;
	z-index: 20;
}

a {
	color: #4bf;
	/* color: #3ea6ff; */
	/* color: cornflowerBlue; */

	text-decoration: underline;
	cursor: pointer;
}

ul {
	margin-top: -8px;
	margin-left: -8px;
}

li {
	padding-top: 8px;
}

li:not(:last-of-type) {
	padding-bottom: 1em;
	border: 2px hidden #333;
	border-bottom-style: solid;
}

table,
tr,
td {
	border-collapse: collapse;
	border: thin solid gray;
	padding: 0.2em;

	font-size: 1rem;
}

table {
	margin-top: 0.2em;
}

.kleinbuchstabe {
	color: paleGreen;
}

.grossbuchstabe {
	color: yellow;
}

.rot {
	color: red;
}

.grün {
	/*
	- Hey!! Du kannst doch nicht einfach Umlaute in...
	- Ich kann WAS nicht?
	*/
	color: lime;
}

.gelb {
	color: yellow;
}

.blau {
	color: skyblue;
}

.kleinbuchstabe,
.grossbuchstabe,
.sonderzeichen {
	font-family: monospace;
}