:root {
	--border: 5px solid white;
	--cell-size: 60px;
	--board-size: calc((var(--cell-size) + 10px) * 4); /* +10px for border */

	--btn-left-offset: 10px;
}

* {
	margin: 0;
	padding: 0;
}

body {
	background-color: #202124;
	color: #fff;
}

h1 {
	text-align: center;
	font-size: 80px;
	margin: 40px 0;
}

.grid {
	width: var(--board-size);
	height: var(--board-size);
	border: var(--border);
	border-radius: 4px;
	color: #000;
	display: flex;
	flex-wrap: wrap;
	margin: 0 auto;
}

.cell {
	width: var(--cell-size);
	height: var(--cell-size);
	line-height: var(--cell-size);
	font-size: calc(var(--cell-size) / 2);
	border: var(--border);
	text-align: center;
}

.control-board {
	width: var(--board-size);
	height: calc(var(--cell-size) * 1.65);
	margin: 20px auto 20px auto;
	position: relative;
}

.btn {
	position: absolute;
	width: calc(var(--cell-size) * 0.75);
	height: calc(var(--cell-size) * 0.75);
	font-size: calc(var(--cell-size) * 0.5);
	cursor: pointer;
}

.btn-up {
	left: calc(var(--board-size) / 2 - (var(--cell-size) * 0.75) / 2);
}

.btn-down {
	left: calc(var(--board-size) / 2 - (var(--cell-size) * 0.75) / 2);
	top: calc(var(--cell-size) * 0.75 + 5px);
}

.btn-left {
	left: calc(
		var(--board-size) / 2 - (var(--cell-size) * 0.75) / 2 - var(--cell-size) +
			var(--btn-left-offset)
	);
	top: calc(var(--cell-size) * 0.75 + 5px);
}

.btn-right {
	left: calc(
		var(--board-size) / 2 - (var(--cell-size) * 0.75) / 2 + var(--cell-size) -
			var(--btn-left-offset)
	);
	top: calc(var(--cell-size) * 0.75 + 5px);
}

@media screen and (min-width: 480px) {
	:root {
		--cell-size: 100px;
		--btn-left-offset: 20px;
	}
}