:root {
	--bcg: #282c34;
	--c: #abb2bf;
	--ratio: 70%;
	--length: 10;
}
* {
	font-family: "Micro 5", Aldrich, Arial, sans-serif;
}
#width {
	display: flex;
	flex-direction: column;
	font-size: 1.5em;
}
#num1,
#num2 {
	transition: color 0.5s linear;
}
#num1::before {
	content: "WIDTH: ";
	color: var(--c);
}
#num1::after {
	content: " GRID";
	color: var(--c);
}
#num2::before {
	content: "INTERVAL: ";
	color: var(--c);
}
#num2::after {
	content: " MS";
	color: var(--c);
}
body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 3%;
	overflow: hidden;
	height: 100vh;
	margin: 0px;
	background: var(--bcg);
	color: var(--c);
}
#table {
	position: absolute;
	top: 1%;
	right: 1%;
	font-size: 2em;
	text-align: end;
}
time {
	display: flex;
	text-align: center;
}

#h,
#m,
#s {
	width: 0.8em;
}
time > .colon {
	width: 0.3em;
	transition: 0.3s;
}
.off {
	opacity: 0.1;
}
#score::before {
	content: "SCORE: ";
	color: var(--c);
}
#container {
	outline: var(--c) solid 1px;
	display: grid;
	grid-template-rows: repeat(var(--length), 1fr);
	grid-template-columns: repeat(var(--length), 1fr);
	width: var(--ratio, 50px);
	height: var(--ratio, 50px);
	transition: width, height 0.2s;
}
footer {
	font-size: 1.5em;
}
#control1 {
	display: grid;
	grid-template:
		". up ." 1fr
		"left . right" 1fr
		". down ." 1fr
		/1fr 1fr 1fr;
	position: absolute;
	z-index: 1;
	bottom: 4%;
	right: 2%;
}
#up {
	grid-area: up;
}
#right {
	grid-area: right;
}
#down {
	grid-area: down;
}
#left {
	grid-area: left;
}
button {
	all: unset;
	user-select: none;
	box-shadow: rgba(0, 0, 0, 0.6) 0px 2px 4px, rgba(255, 255, 255, 0.4) 0px 2px 4px inset, rgba(0, 0, 0, 0.6) 0px -2px 4px inset;
	transition: all 0.2s;
	background: var(--bcg);
	cursor: pointer;
	border-radius: 50%;
	font-family: Arial, Helvetica, sans-serif;
	color: var(--c);
	text-align: center;
}
button:hover {
	box-shadow: rgba(0, 0, 0, 0.6) 0px 2px 4px, rgba(255, 255, 255, 0.4) 0px 2px 4px inset, rgba(0, 0, 0, 0.6) 0px -2px 4px inset;
	filter: brightness(1.1);
	transform: scale(1.05);
}
button:active,
button.active {
	box-shadow: rgba(0, 0, 0, 0.6) 0px 2px 4px inset, rgba(255, 255, 255, 0.4) 0px -2px 2px inset;
	filter: brightness(0.9);
	transform: scale(0.95);
}
#control2 {
	display: flex;
	flex-direction: row;
	gap: 20px;
	position: relative;
}
#control2 > * {
	width: 40px;
	height: 40px;
	font-size: 1em;
}
#pause {
	background-color: yellow;
}
#restart {
	background-color: red;
}
#control3 {
	transform-origin: 0% 50%;
	position: absolute;
	left: 6%;
	transform: rotate(-90deg) translate(-100px, 0px);
	width: 200px;
}
input {
	width: 200px;
}
footer {
	position: absolute;
	bottom: 0%;
	transform: translate(0, 50px);
	letter-spacing: 70px;
}