:root {
	--background-colour: #EEEEEE;
	--digits-colour: var(--background-colour);
	--button-colour: #E0E0E0;
	--button-hover-colour: #D0D0D0;
	--skwexam-label-colour: #414141;
	--text-colour: #141414;
	--accent-colour: #3399ff;
	--accent-hover-colour: #007FFF;
}

@media (prefers-color-scheme: dark) {
	:root {
		--background-colour: #141414;
		--digits-colour: #414141;
		--button-colour: #646464;
		--button-hover-colour: #787878;
		--skwexam-label-colour: #C8C8C8;
		--text-colour: #FFFFFF;
	}
}

html, body {
	max-width: 1000px;
	margin: auto;
	padding: 8px;
	
	background-color: var(--background-colour);
	color: var(--text-colour);
	font-family: "Noto Sans", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	font-variation-settings: "wdth" 100;
	
	font-size: 24px;
}

a {
	color: var(--accent-colour);
}

a:hover {
	color: var(--accent-hover-colour);
}

footer {
	padding: 8px;
	font-size: 16px;
	text-align: center;
	font-style: italic;
}