html {
	box-sizing: border-box;
	-webkit-user-select: none;
	user-select: none;
}
html *::after,
html *::before,
html * {
	box-sizing: inherit;
}

:focus {
	outline: none;
}

html,
body {
	height: 100%;
}

body {
	margin: 0;
	color: white;
	background: black;
	font: 100% / 2 monospace;
	text-align: center;
}

a {
	text-decoration: none;
	display: block;
	padding: 0.5em;
	font-size: 200%;
	border: 1px solid darkorange;
	background: black;
}
a:hover,
a:focus {
	background-color: darkorange;
}

h1 {
	white-space: pre-wrap;
	min-height: 100%;
	margin: 0;
	padding: 25vh 0;
}

pre {
	text-align: left;
	max-width: 100%;
	min-height: 100%;
	overflow-x: auto;
	overflow-y: visible;
	-webkit-overflow-scrolling: touch;
}
ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-flow: row wrap;

	position: sticky;
	top: 0;
}
li {
	flex: 1 1 auto;
	line-height: normal;
}

/* CHART */
form[method="GET"] {
	display: flex;
	line-height: normal;
}
pre {
	line-height: 1;
}
section.small {
	font-size: 50%;
}
section.tens pre {
	white-space: normal;
	margin: 1em auto;
	max-width: 12em;
	font-size: 150%;
	line-height: 1.3;
}
section.tens span {
	background: grey;
	border-radius: 0.5em;
	outline: 0.05em solid black;
}

/* INPUT */
.form--input-row,
.form--buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

form button,
form input {
	flex: 1 1 auto;
	padding: 0.4em;
	margin: 0;
	font-size: 2em;
	background: black;
	-webkit-appearance: none;
	border-radius: 0;
	text-align: center;
	transition: opacity 0.33s;
}
form input {
	min-width: 1.8em;
}
button {
	border: 1px solid dimgrey;
}
button:disabled {
	opacity: 0.66;
}

.form--buttons {
	padding: 0;
	margin: 0;
	border: 0;
}
.form--input-row {
	position: sticky;
	bottom: 0;
	background: black;
}
.form--input-row input {
	flex: 1 1 auto;
	font-size: 16px;
	min-width: 2em;
	max-width: 5em;
	background: whitesmoke;
	border: 1px solid darkorange;
}
.form--input-row button {
	border-color: darkorange;
}
button:not(:disabled):hover,
button:not(:disabled):focus,
input:hover,
input:focus {
	background: white;
	border-color: darkorange;
}
button:not(:disabled):active {
	background: darkorange;
}

@media screen and (max-width: 375px) {
	ul li:last-of-type a,
	button:last-of-type,
	button:nth-of-type(5n + 0) {
		border-right-width: 0;
	}
	ul li:first-of-type a,
	.button:first-of-type,
	button:nth-of-type(5n + 1) {
		border-left-width: 0;
	}
}