* {
	box-sizing: border-box;
}
html, body {
	height: 100%;
	margin: 0;
	background-color: black;
}
.sudoku-container {
	width: 100%;
	height: 100%;
	position: relative;
}
#sudoku-grid {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.separator {
	stroke: #636e72;
	stroke-width: 0.03;
}
.cell {
	fill: #fff;
	stroke: #b2bec3;
	stroke-width: 0.02;
}
.cell.dark {
	fill: #dfe6e9;
}
.cell.dark1 {
	fill: #ffeaa7;
}
.cell.dark2 {
	fill: #55efc4;
}
.cell.dark3 {
	fill: #74b9ff;
}
.cell.warning {
	fill: #fab1a0;
}
.pick {
	cursor: pointer;
	font-size: 0.05em;
	text-anchor: middle;
	dominant-baseline: central;
	fill: #636e72;
}
.pick.highlighted {
	fill: #d63031;
}
.pick.history {
	fill: #0984e3;
}
.candidate {
	cursor: crosshair;
	font-size: 0.015em;
	text-anchor: middle;
	dominant-baseline: central;
	fill: #b2bec3;
}
.candidate.highlighted {
	font-weight: bold;
	fill: #e74c3c;
}
.candidate.history {
	font-weight: bold;
	fill: #3498db;
}