* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
body,
html {
	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
		Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	font-size: 18px;
	color: #f7ebe8;
}
body {
	display: flex;
	width: 100vw;
	overflow: hidden;
}
.red,
.blue {
	width: 50%;
	height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: start;
	align-items: center;
}
.red .score,
.blue .score {
	font-size: 25vw;
	margin-bottom: 0;
	font-family: 'Fredoka One', cursive;
}
.red {
	background-color: #d00000;
}
.blue {
	background-color: #3f88c5;
}
.inputs {
	width: 60%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin-bottom: 100px;
}
.on,
.in {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 10px;
}
.on span,
.in span {
	width: 2.5rem;
	font-size: 1.6rem;
	font-weight: 700;
	font-family: 'Fredoka One', cursive;
}
.on button,
.in button {
	font-size: 1.6rem;
	width: 2.3rem;
	height: 2.3rem;
	background-color: #1e1e24;
	border: none;
	margin: 0 5px;
	color: #f1f1f1;
	font-family: 'Fredoka One', cursive;
	border-radius: 5px;
}
button.active {
	/* border: 5px solid black; */
	background-color: #ffba08;
	color: #895a09;
	/* background-color: #e4e4e4; */
	/* color: #c9c9c9; */
}

.controls {
	position: absolute;
	top: 5vh;
	left: 50%;
	transform: translateX(-50%);
}
.controls button {
	padding: 1rem 2rem;
	color: #f7ebe8;
	background-color: #1e1e24;
	border: none;
	font-size: 1.8rem;
	font-family: 'Fredoka One', cursive;
	border-radius: 5px;
}
button#reset {
	position: absolute;
	left: 50%;
	margin-top: 20px;
	transform: translateX(-50%);
	font-family: 'Fredoka One', cursive;
	padding: 1rem 1.3rem;
	color: #f7ebe8;
	background-color: #1e1e24;
	border: none;
	font-size: 1.8rem;
	border-radius: 5px;
}