* {
	margin: 0;
	padding: 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
	box-sizing: border-box;
}

html {
	--answer-info: #606060;
	--button-background: #EACFB0;
	--button-hover-text: #C00000;
	--button-shadow: #888;
	--correct-answer: #c00000;
	--disabled-background: #e0e0e0;
	--disabled-border: #c0c0c0;
	--disabled-text: #606060;
	--enabled-border: #CAAF90;
	--enabled-text: #660000;
	--left-divider: #000;
	--page-background: #F0E8E0;
	--question-word: #0000c0;
	--tag-background: #bcc4d7;
	--theme-toggle-fill: rgb(27, 27, 27);
	--theme-toggle-shadow: black;
	--words-table-background: #FFF8F0;
	--words-table-border: #CCC;
	--words-table-english: #000080;
	--words-table-latin: #800000;
	color: black;
}

html[data-theme=dark] {
	--answer-info: #929292;
	--button-background: #2b2b2b;
	--button-hover-text: #fff;
	--button-shadow: #4f4f4f;
	--correct-answer: #ff2d2d;
	--disabled-background: #1a1a1a;
	--disabled-border: #333333;
	--disabled-text: #929292;
	--enabled-border: #3d3d3d;
	--enabled-text: #dddddd;
	--left-divider: #707070;
	--page-background: #161616;
	--question-word: #5e9dfb;
	--tag-background: #1b294b;
	--theme-toggle-fill: rgb(194, 194, 194);
	--theme-toggle-shadow: rgb(90, 90, 90);
	--words-table-background: #111111;
	--words-table-border: #303030;
	--words-table-english: var(--question-word);
	--words-table-latin: var(--correct-answer);
	color: rgb(230, 230, 230);
}

:root {
	font-size: 1.75em;
}

html {
	font-size: xx-large;
	background-color: var(--page-background);
}

html, body {
	height: 100%;
}

svg path {
	fill: var(--theme-toggle-fill);
}

svg {
	filter: drop-shadow(2px 2px 3px var(--theme-toggle-shadow));
	height: 1rem;
	float: left;
}

#splash {
	width: 40%;
	height: 100%;
	object-fit: cover;
}

main {
	display: flex;
}

main:not([data-screen="evaluation"]) {
	height: 100%;
}

.panel {
	padding: 20px;
	display: flex;
	flex: 1;
	flex-direction: column;
}

#left {
	gap: 0.5em;
	flex: 1;
	border-right: 1px solid var(--left-divider);
}

#right {
	min-width: 400px;
}

#setup {
	gap: 0.5em;
}

h1 {
	text-align: center;
}

h2 {
	margin-bottom: 0.25em;
}

#words-wrapper {
	line-height: 125%;
	overflow: auto;
	background-color: var(--words-table-background);
	border: 1px solid var(--words-table-border);
	flex: 1;
}

#words, #history-table table {
	border-collapse: collapse;
	width: 100%;
}

#words td {
	padding: 0px 10px 0px;
	font-size: 0.6em;
	line-height: 1.5em;
}

#words tr {
	border-bottom: 1px solid var(--words-table-border);
}

#words td:nth-child(1) {
	text-align: center;
	width: 3ch;
}

#words td:nth-child(2) {
	color: var(--words-table-latin);
	background-color: var(--page-background);
}

#words td:nth-child(3) {
	color: var(--words-table-english);
}

button, .toggle {
	font-family: Arial, "Microsoft Sans Serif", Tahoma, sanserif;
	font-size: 0.7em;
	cursor: pointer;
	background: var(--button-background);
	text-align: center;
}

button {
	color: var(--enabled-text);
	padding: 8.4px;
	border: none;
	border-radius: 10px;
	box-shadow: 3px 3px 3px var(--button-shadow);
}

button:active {
	transform: scale(0.95);
}

#stage-toggles {
	display: grid;
	grid-template-columns: repeat(auto-fit, 32px);
	flex: 4;
	width: 100%;
	gap: 5px;
}

#type-toggles {
	display: flex;
	flex-wrap: wrap;
	flex: 4;
	width: 100%;
	gap: 5px;
}

#stage-toggles > button {
	aspect-ratio: 1/1;
}

#stage-toggles > button:last-of-type {
	grid-column: auto / span 2;
	aspect-ratio: unset;
}

#stages-selector, #type-selector {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

:is(#stages-selector, #type-selector) > span:first-of-type {
	flex: 1;
}

#begin, #stages-selector, #type-selector, label {
	font-size: 0.8em;
}

#begin-row {
	display: flex;
	gap: 0.5em;
}

#begin {
	flex: 1;
}

.toggle {
	display: inline-block;
	min-width: 2ch;
	border-radius: 0;
	padding: 5px;
	box-shadow: none;
	color: var(--disabled-text);
	background: var(--disabled-background);
	border: 1px var(--disabled-border) solid;
	text-overflow: ellipsis;
	overflow: hidden;
}

.toggle::selection {
	background: transparent;
}

.enabled {
	color: var(--enabled-text);
	background: var(--button-background);
	border: 1px var(--enabled-border) solid;
}

button:hover {
	color: var(--button-hover-text);
}

#word, #real-word, #accepted-answers {
	font-size: 150%;
	font-weight: bold;
}

#word {
	color: var(--question-word);
}

#accepted-answers {
	color: var(--answer-info);
	font-weight: normal;
	margin-bottom: -0.5em;
}

#real-word {
	color: var(--correct-answer);
	white-space: pre-line;
}

#accepted-answers, #real-word {
	text-align: center;
}

#randomised-details {
	display: flex;
	justify-content: center;
	gap: 0.5em;
	margin-top: 0.5em;
}

#randomised-details span {
	background: var(--tag-background);
	padding: 0.25em 0.5em;
	font-family: Inconsolata, "JetBrains Mono", "Fira Code", "DM Mono", "IBM Plex Mono", monospace;
	border-radius: 100vw;
	font-size: 0.75em;
	text-align: center;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

#next-question {
	margin-bottom: 0.5em;
	margin-top: 1em;
}

#answer-wrapper {
	display: flex;
	align-items: center;
	height: 60px;
}

#correct-icon, #wrong-icon {
	height: 100%;
	aspect-ratio: 1 / 1;
	margin-right: 0.5em;
}

#answer {
	height: 75%;
	padding: 5px;
	font-size: 100%;
	flex: 1;
	margin-right: 1ch;
}

#buttons button {
	margin-right: 0.5em;
}

#real-word ~ button, #return-to-setup {
	padding: 1em 0;
}

#words th {
	text-decoration: underline;
}

@media (max-width:820px) {
	:root {
		font-size: 1em;
	}

	#splash, h1, svg {
		display: none;
	}

	#stages-selector, #type-selector {
		flex-direction: column;
	}

	html, body {
		overflow-x: hidden;
	}

	main {
		height: 160vh;
		flex-direction: column;
	}

	#words-wrapper {
		flex: 2;
	}

	.panel {
		gap: 1em;
	}

	#words-wrapper {
		order: 1;
		margin: 0 -20px;
	}

	#stage-toggles {
		place-content: space-between;
	}

	#type-toggles {
		justify-content: center;
	}

	#stages-selector, #type-selector {
		align-items: normal;
	}

	.toggle {
		flex: 1;
	}

	#all-stages, #none-stages, #all-types, #none-types {
		border: 1px var(--enabled-border) solid;
		text-transform: capitalize;
		border-radius: 0;
		box-shadow: none;
	}

	#left {
		border: none;
	}
}

#options {
	display: flex;
	gap: 0.75em;
	justify-content: space-between;
}

.stats {
	display: flex;
	justify-content: space-between;
	padding: 0.25em 0.5em;
	flex-wrap: wrap;
}

.stats span {
	font-family: monospace !important;
}

.stats hr {
	flex-basis: 100%;
	margin: 0.5em 0;
	border-color: var(--words-table-border);
}

#overall-stats, #test-info, #history-table table, #return-to-setup {
	margin-bottom: 1em;
}

#overall-stats, #test-info {
	background-color: var(--words-table-background);
	box-shadow: 3px 3px 3px rgb(0 0 0 / 45%);
	border-radius: 10px;
}

input[type=number] {
	margin-left: 0.5em;
	position: relative;
	bottom: 0.15em;
}

#stage-stats th {
	white-space: nowrap;
}

#stage-stats td, th {
	background-color: var(--button-background);
}

#stage-stats td {
	text-align: center;
	height: 100%;
}

#stage-stats th:nth-child(2) {
	width: 100%;
}

#stage-stats table {
	border-collapse: collapse;
	border: 2px solid rgb(200, 200, 200);
	letter-spacing: 1px;
	font-family: sans-serif;
	font-size: 0.8rem;
}

#stats-wrapper {
	overflow: auto;
}

.other-stage-header {
	font-size: 0.8em;
}

#stage-stats thead th {
	padding: 0.5em;
}

.hidden {
	display: none !important;
}

#history-table td:nth-child(1),
#history-table td:nth-child(2) {
	width: 0;
	text-align: right;
}

#history-table th,
#history-table td {
	border: 1px solid var(--words-table-border);
	padding: 0.5em;
	font-size: 0.8em;
}

#history-table th {
	background-color: var(--words-table-background);
	color: var(--words-table-english);
}

#history-table tbody tr:nth-child(even) {
	background-color: var(--words-table-background);
}

#history-table img {
	vertical-align: middle;
	height: 1em;
}