body {
	text-align: center;
	font-family: 'Roboto', sans-serif;
	background: #fff;
	line-height: 28px;
}

body > table {
	margin: 0 auto;
}

h1, h2, h3, h4, h5, h6 {
	text-align: center;
}

#countdown {
	color: #f00;
}

.describeMe {
	width: 300px;
}

select {
	width: 100%;
}

input:not([type='file']), select {
	border-radius: 5px;
	font-size: 16px;
	background: inherit;
	color: inherit;
	border: 2px solid #808080;
}

.icon {
	width: 24px;
	margin-right: 4px;
	vertical-align: middle;
	filter: invert(1);
}

button {
	padding: 10px;
	margin-bottom: 10px;
	border-radius: 24px;
	background: #6750A4;
	color: #fff;
	font-family: inherit;
	font-size: 16px;
	font-weight: bold;
	border: none;
	transition: all 0.2s ease 0s;
	cursor: pointer;
}
button:hover {
	background: #8573b6;
}
button:active {
	background: #524083;
}
button:disabled {
	background: #79747E;
	cursor: not-allowed;
}

button.destroy {
	background: #B3261E;
}
button.destroy:hover {
	background: #c2514b;
}
button.destroy:active {
	background: #8f1e18;
}

.error {
	padding: 10px;
	border-radius: 10px;
	background: #F9DEDC;
	color: #410E0B;
}

.error > pre {
	white-space: pre-wrap;
}

table, tr, td, th {
	border-collapse: collapse;
}

tr:nth-child(even) {
	background: #ddd;
}
tr:nth-child(odd) {
	background: #eee;
}

td, th {
	padding: 10px;
}

td[colspan] {
	text-align: center;
}

.right, .wrong {
	font-size: 24px;
	font-weight: bold;
	padding: 0 5px 0 5px;
}

.right {
	background: #80ff80;
	color: #008000;
}

.wrong {
	background: #ff8080;
	color: #800000;
}

.hiddenText {
	display: none;
}

@media only screen and (min-width: 1152px) {
	select {
		width: auto;
	}
}

@media (prefers-color-scheme: dark) {
	body {
		background: #333333;
		color: #ffffff;
	}

	.error {
		background: #800000;
		color: #ff0000;
	}

	a:link { color: #ffffff; }

	a:visited { color: #ff00ff; }

	a:active { color: #ff0000; }
	
	input:not([type='file']), select {
		background: inherit;
		color: inherit;
		border: 2px solid #cccccc;
	}

	option {
		color: #000;
	}

	tr:nth-child(even) {
		background: #222;
	}
	tr:nth-child(odd) {
		background: #444;
	}
}