html {
    min-height: 100%;
    position: relative;
}
body, input {
	/* choose a good readable font */
	font-family:
		"Noto Sans",						/* default, if available */
		"Segoe UI Variable", "Segoe UI",	/* Windows */
		"Roboto Flex", "Roboto",			/* Android */
		-apple-system,						/* Mac, iPhone */
		system-ui,							/* fallback */
		sans-serif;							/* ultimate fallback */
	line-height: 1.5;
	text-rendering: optimizeLegibility;
	font-kerning: normal;
}
body {
	background-color: #F5F4F4;
	font-size: 1rem;
	max-width: 960px;
	margin: 0 auto 30px; /* bottom = footer height */
	padding: 0 3%;
	text-align: center;
}
footer{
	font-size: small;
    position: absolute;
    left: 0;
    bottom: 0;
    height: 30px;
    width: 100%;
}
#logo {
	display: block;
	margin: 2em 0;
}
#search, #ok {
	font-size: inherit;
	height: 34px;
	margin: 0;
	vertical-align: middle;
}
#search {
	border: 1px solid #dcdcdc;
	box-sizing: border-box;
	max-width: 280px;
	padding: 0 0.4em;
	width: 50%;
}
#search:focus {
	border: 1px solid #4d90fe;
}
#ok {
	border: none;
	background-color: #5b626a;
	color: #f0f0f0;
	cursor: pointer;
	width: 3em;
}
#ok:hover {
	color: #fff;
	background-color: #000;
}
h1 {
	font-size: 110%;
	margin: 2em;
}
a[href^='#tbl'] {
	display: block;
	font-size: small;
	margin-bottom: 1em;
	text-align: left;
}
a[href='#tbl0'] {
	color: #0018a8;
}
a[href='#tbl1'] {
	color: #18A800;
}
table {
	border: 1px solid #dcdcdc;
	border-collapse: separate;
	border-spacing: 0;
	margin-bottom: 5em;
	table-layout: fixed;
	width: 100%;
}
tr:nth-child(2n+3) {
	background-color: #fff;
}
tr:nth-child(2n) {
	background-color: #f0f0f0;
}
tr:hover {
	background-color: #ffffc2;
}
th, td {
	padding: 0.25em;
}
th:first-child, td:first-child {
	border-right: 1px solid #dcdcdc;
}
th {
	background-color: orange;
}
#tbl0 tr:first-child th {
	background-color: #3B5A98;
	color: #fff;
}
#tbl1 tr:first-child th {
	background-color: #3B984B;
	color: #fff;
}
td {
	border-bottom: 1px solid #dcdcdc;
	padding-left: 1.5em;
	text-align: left;
	text-indent: -1em;
	word-wrap: break-word;
}
td a {
	color: #000;
	text-decoration: none;
}
td a:hover {
	text-decoration: underline;
}
td u {
	text-decoration: none;
	border-bottom: 1px solid #ffa500;
}
td i {
	font-style: normal;
	border-bottom: 1px dashed #ffa500;
}
.suggestions {
	max-width: 500px;
	margin-left: auto;
	margin-right: auto;
}
.suggestions td {
	text-align: center;
}
.flag {
	background-size: 24px 12px;
	display: inline-block;
	height: 12px;
	width: 24px;
}
.deutsch {
	background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBoZWlnaHQ9IjYwMCIgdmlld0JveD0iMCAwIDUgMyI+DQo8cGF0aCBkPSJtMCwwaDV2M2gtNXoiLz4NCjxwYXRoIGZpbGw9IiNkMDAiIGQ9Im0wLDFoNXYyaC01eiIvPg0KPHBhdGggZmlsbD0iI2ZmY2UwMCIgZD0ibTAsMmg1djFoLTV6Ii8+DQo8L3N2Zz4NCg==);
}
.english {
	background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgNjAgMzAiIGhlaWdodD0iNjAwIj4NCjxkZWZzPg0KPGNsaXBQYXRoIGlkPSJ0Ij4NCjxwYXRoIGQ9Im0zMCwxNWgzMHYxNXp2MTVoLTMwemgtMzB2LTE1enYtMTVoMzB6Ii8+DQo8L2NsaXBQYXRoPg0KPC9kZWZzPg0KPHBhdGggZmlsbD0iIzAwMjQ3ZCIgZD0ibTAsMHYzMGg2MHYtMzB6Ii8+DQo8cGF0aCBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iNiIgZD0ibTAsMGw2MCwzMG0wLTMwbC02MCwzMCIvPg0KPHBhdGggc3Ryb2tlPSIjY2YxNDJiIiBzdHJva2Utd2lkdGg9IjQiIGQ9Im0wLDBsNjAsMzBtMC0zMGwtNjAsMzAiIGNsaXAtcGF0aD0idXJsKCN0KSIvPg0KPHBhdGggc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjEwIiBkPSJtMzAsMHYzMG0tMzAtMTVoNjAiLz4NCjxwYXRoIHN0cm9rZT0iI2NmMTQyYiIgc3Ryb2tlLXdpZHRoPSI2IiBkPSJtMzAsMHYzMG0tMzAtMTVoNjAiLz4NCjwvc3ZnPg0K);
}

/* Follow the browser/system preference automatically. */
@media (prefers-color-scheme: dark) {
	:root {
		color-scheme: dark;
	}
	body {
		background-color: #181b20;
		color: #d6d8dc;
	}
	a, a[href='#tbl0'] {
		color: #9bc6ff;
	}
	a[href='#tbl1'] {
		color: #8ad58f;
	}
	#search {
		background-color: #24282e;
		color: #d6d8dc;
		border-color: #59616a;
	}
	#ok, #ok:hover {
		color: #dfe3e8;
	}
	#ok:hover {
		background-color: #454e59;
	}
	table, th:first-child, td:first-child, td {
		border-color: #454b54;
	}
	tr:nth-child(2n+3) {
		background-color: #20242a;
	}
	tr:nth-child(2n) {
		background-color: #292e35;
	}
	tr:hover {
		background-color: #403b28;
	}
	th {
		background-color: #805000;
	}
	#tbl0 tr:first-child th, #tbl1 tr:first-child th {
		color: #dfe3e8;
	}
	#tbl1 tr:first-child th {
		background-color: #2d6b3a;
	}
	td a {
		color: inherit;
	}
}