@charset "UTF-8";

:root {
	font-size: 12pt;
}

body {
	hyphens: auto;
	font-family: "Noto Sans", Roboto, "Noto Sans Symbols", sans-serif;
}

main {
	padding: 0.5em 0 1em;
}

h1 {
	font-size: 2.75em;
	margin-bottom: 0.1em;
	text-align: center;
}

h2 {
	font-size: 1.1em;
	border-bottom: var(--border);
	padding: 0.3em 0.5em;
	background-color: lightgrey;
	text-align: center;
}

[data-complete="true"] h2 {
	background-color: var(--brand-yellow);
}

.solved-container {
	display: flex;
	flex-flow: row;
	justify-content: safe center;
	align-items: start;
	
	overflow-x: auto;
}

.solved-box {
	flex-shrink: 0;
	border: var(--border);
	border-radius: 0.4em;
	margin: 0 0.25em 0.5em;
	overflow: hidden;
	background-color: white;
	
	--border: 2px solid var(--border-clr);
	--border-clr: black;
}

.counter {
	padding: 0.3em;
	background-color: #f2f2f2;
	border-bottom: var(--border);
	font-size: 0.9em;
}

[data-complete="true"] .counter {
	background-color: #ffec80;
}

.counter-output {
	font-weight: bold;
}

.counter-solved {
	position: relative;
	
	--anim: 0.125s ease-out 0s 2 alternate none running;
}

/* I refuse to believe that this is the best way to accomplish my goal. */
[data-anim="0"] .counter-solved {
	animation: var(--anim) correct_guess0;
}

[data-anim="1"] .counter-solved {
	animation: var(--anim) correct_guess1;
}

@keyframes correct_guess0 {
	from {
		top: 0;
	}
	to {
		top: -1em;
	}
}

@keyframes correct_guess1 {
	from {
		top: 0;
	}
	to {
		top: -1em;
	}
}

ol {
	list-style-position: inside;
	list-style-type: dex_number;
}

li {
	border-bottom: var(--border);
	border-width: 1px;
	padding: 0.2em 0.3em;
	line-height: 1.3;
}

li:last-child {
	border: none;
}

li[data-solved="true"] {
	background-color: lightgoldenrodyellow;
}

li:not([data-solved="true"]) .name {
	visibility: hidden;
}

.input-container {
	margin-bottom: 0.8em;
	padding: 0 1em;
	text-align: center;
	line-height: 1.5;
}

button, input {
	line-height: 100%;
	vertical-align: middle;
}

input[type="text"] {
	border: 1px solid black;
	padding: 0.3em 0.6em;
	box-shadow: 0px 0px 2px inset grey;
	margin-right: 0.3em;
}

label {
	font-weight: bold;
}

button {
	border: 1px solid black;
	border-radius: 0.3em;
	margin: 0.1em 0.2em;
	padding: 0.3em 0.6em;
	font-size: 1.1em;
	font-weight: bold;
	background-color: #950DC2;
	text-shadow: 1px 1px 0px black;
	color: white;
}

button:hover {
	background-color: #b711ee;
}

button:active {
	background-color: #800ca7;
}

button.progress-data {
	font-family: emoji;
	background-color: #009B77;
}

button.progress-data:hover {
	background-color: #00cc9c;
}

button.progress-data:active {
	background-color: #00664e;
}

p {
	text-align: center;
	margin-bottom: 0.75em;
}

.global-counter {
	margin-bottom: 1em;
}

.global-counter[data-finished="true"]::after {
	content: "🎉";
	font-family: emoji;
}

.region {
	font-size: 0.8em;
}

noscript {
	color: red;
	font-weight: bold;
}

@counter-style dex_number {
	system: extends decimal;
	pad: 4 "0";
	suffix: ": ";
}

@media (prefers-color-scheme: dark) {
	h2 {
		background-color: dimgrey;
	}
	
	[data-complete="true"] h2 {
		background-color: var(--brand-purple);
	}
	
	.solved-box {
		--border-clr: grey;
		background-color: black;
	}
	
	.counter {
		background-color: #484848;
	}
	
	[data-complete="true"] .counter {
		background-color: #00137F;
	}
	
	li[data-solved="true"] {
		background-color: indigo;
	}
	
	button {
		border-color: white;
	}
	
	noscript {
		color: tomato;
	}
}