* {
	margin: 0;
	box-sizing: border-box;
}

body {
	color-scheme: light dark;
	font: 100%/1.5 'Inter', sans-serif;
	padding: 1em clamp(1em, 10vw, 10em);
	min-height: 100vh;

	display: flex;
	flex-direction: column;
	gap: 1em;

	background: var(--back);
	color: var(--color);

	--color: #000;
	--fore: #000;
	--back: #fff;
	--gray: #eee;
}

.notice {
	border: 1px solid var(--fore);
	text-align: center;
	padding: 1em;
}

.logo { color: #2c55a5; }

.fullscreen {
	position: fixed;
	top: 0; left: 0;
	width: 100vw; height: 100vh;

	display: flex;
	align-items: center;
	justify-content: center;

	background: var(--back);
}

@keyframes fade {
	from { opacity: 1; }
	to { opacity: 0; visibility: hidden; }
}

form {
	flex: 1;

	display: flex;
	flex-direction: column;
	gap: 1em;
}

form label + * { margin-top: -1em; }
label { padding-left: 1.05em; }

input, button, select {
	background: var(--gray);
	color: inherit;

	font: inherit;
	border: 1px solid var(--fore);
	border-radius: .5em;
	padding: .5em 1em;
}

input, select {
	background: var(--back);
}

.item-select {
	display: flex;
	gap: 1em;
}

.item-select > select { flex: 1; }
.item-select > input[type=number] { width: 5em; }

button.primary {
	background: var(--fore);
	color: var(--back);
	font-weight: bold;
}

button[disabled] {
	opacity: .6;
}

select {
	appearance: none;
	background-repeat: no-repeat;
	background-position: right .5em center;
	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgOTYgOTYwIDk2MCIgd2lkdGg9IjI0Ij48cGF0aCBkPSJNNDgwIDc0MiAyMDggNDcwbDg4LTg4IDE4NCAxODQgMTg0LTE4NCA4OCA4OC0yNzIgMjcyWiIvPjwvc3ZnPgo=);
}

@media (prefers-color-scheme: dark) {
	body {
		--back: #222;
		--fore: #eee;
		--color: #fff;
		--gray: #000;
	}

	.logo { color: #597bbf; }

	select { background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgOTYgOTYwIDk2MCIgd2lkdGg9IjI0Ij48cGF0aCBkPSJNNDgwIDc0MiAyMDggNDcwbDg4LTg4IDE4NCAxODQgMTg0LTE4NCA4OCA4OC0yNzIgMjcyWiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPgo=); }
}