body {
	background: #444;
	color: white;
	font-family: sans-serif;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100vh;
	overflow: hidden;
	margin: 0;
	padding: 0;
	font-size: min(7vh, 15vw);
}

#grid {
	flex: 1;
}
 
.row,
.krow {
	display: flex;
	justify-content: center;
	margin: calc(1em / 7);
}

.row > div,
.krow > div {
	width: 1.25em;
	height: 1.25em;
	margin: 0 calc(1em / 14);
	box-sizing: border-box;
	border: calc(1em / 14) solid white;
	text-align: center;
	line-height: calc(8em / 7);
}

.yellow {
	background: #eb0;
}

.green {
	background: green;
}

#keyboard {

}

.krow {

}

.krow > div {
	width: 2em;
}

.invalid {
	animation: invalid 250ms linear 3;
}

@keyframes invalid {
	from { transform: translateX(0); }
	25% { transform: translateX(calc(-1em / 3)); }
	75% { transform: translateX(calc(1em / 3)); }
	to { transform: translateX(0); }
}

.row:not(.active) > div {
	border-color: #aaa;
}

.invalid > div {
	border-color: red;
}