@charset "UTF-8";

.form-box {
	margin-bottom: 1em;
}

label {
	font-weight: bold;
}

.char-grid {
	display: flex;
	flex-flow: row wrap;
	justify-content: safe center;
}

.char {
	display: flex;
	border: 1px solid var(--text);
	border-radius: 0.2em;
	box-shadow: 1px 1px 0px 0px grey;
	text-align: center;
	font-size: 2em;
	margin: 0.1em;
	padding: 0.1em 0.2em;
	min-width: 1.5em;
	justify-content: center;
	align-items: center;
	unicode-bidi: plaintext;
}

a.char {
	color: inherit;
	text-decoration: none;
}

a.char:hover {
	background-color: var(--highlight2);
}

a.char:focus {
	outline-width: 2px;
}

p:has(#list-link) {
	font-size: 1.1em;
	text-align: center;
}

noscript {
	color: var(--active);
	font-weight: bold;
}

@media (max-width: 800px) {
	.char {
		font-size: 1.9em;
	}
}

@media (max-width: 700px) {
	.char {
		font-size: 1.8em;
	}
}

@media (max-width: 600px) {
	.char {
		font-size: 1.7em;
	}
}

@media (max-width: 500px) {
	.char {
		font-size: 1.6em;
		margin: 0.075em;
	}
}

@media (max-width: 400px) {
	.char {
		font-size: 1.5em;
		margin: 0.05em;
	}
	
	label {
		font-size: 0.9em;
	}
}

@media (prefers-color-scheme: dark) {
	.char {
		border-color: grey;
		box-shadow: 1px 1px 0px 0px #505050;
	}
}