* {
	margin: auto;
	padding: 0;
	color: white;
	overflow: hidden;
}

body {
	display: grid;
	grid-template-columns: repeat(5, 20vw);
	grid-template-rows: repeat(5, 20vh);
	background: black;
}

div.cell {
	transition: background-color 0.2s, line-height 0.2s;
	width: calc(80vw / 5);
	height: calc(80vh / 5);
	border: 1px solid black;
	display: inline-block;
	border-radius: 10px;
	background: #1d1d20;
	cursor: pointer;
}

div.cell:hover {
	border: 3px solid white;
}

div.cell {
	font-size: 25px;
	line-height: calc(80vh / 5);
	vertical-align: middle;
	text-align: center;
}

input[type=checkbox] {
	position: absolute;
	width: 0;
	height: 0;
	visibility: collapse;
}

input[type=checkbox].confirm+label div.cell {
	transition: background-color 0.2s, color 0.2s, line-height 0.2s;
	background-color: #1e2036;
	line-height: calc(80vh / 10);
}

input[type=checkbox]:checked+label div.cell {
	transition: background-color 2s, color 2s, line-height 0.2s;
	background-color: #5eff86;
	color: #1d1d20;
}

div.cell span {
	opacity: 0;
}

.confirm+label div.cell span {
	transition: opacity 1s;
	opacity: 1;
}