body,
h1,
h2,
p,
ul {
	margin : 0;
	padding: 0;
}

body {
	font-family     : Arial, sans-serif;
	line-height     : 1.6;
	background-color: #333;
	color           : #f4f4f4;
}

header {
	background-color: #555;
	color           : #fff;
	text-align      : center;
	padding         : 1rem 0;
}

main {
	max-width       : 800px;
	margin          : 2rem auto;
	padding         : 1rem;
	background-color: #444;
	box-shadow      : 0 0 10px rgba(255, 255, 255, 0.1);
}

section.flex {
	margin-bottom : 2rem;
	display       : flex;
	flex-direction: row;
	flex-wrap     : nowrap;
	padding       : 0;
}

section.flex>div {
	width: 50%;
}

section.below {
	clear: both;
}

h2 {
	margin-bottom: 1rem;
}

div.form {
	display       : flex;
	flex-direction: column;
}

input[type='text'] {
	resize       : none;
	margin-bottom: 1rem;
	background   : #555;
	color        : #f4f4f4;
}

button {
	background-color: #555;
	color           : #fff;
	padding         : 0.5rem;
	cursor          : pointer;
	border          : none;
}

button:hover {
	background-color: #777;
}

#results-list {
	list-style-type : none;
	background-color: #555;
	aspect-ratio    : 1.2;
	border          : 1px solid #444;
	overflow-y      : scroll;
}

#results-list li {
	background-color: #333;
	padding-left    : 0.5rem;
	color           : #f4f4f4;
}

#results-list li:hover {
	background-color: #444;
}

footer {
	background-color: #555;
	color           : #fff;
	text-align      : center;
	padding         : 1rem 0;
	position        : absolute;
	bottom          : 0;
	width           : 100%;
}

#grid {
	margin               : 1em;
	display              : grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows   : repeat(4, 1fr);
	aspect-ratio         : 1;
}

#grid-overlay {
	position: absolute;
	top     : 0;
	left    : 0;
	z-index : 2;
}

.grid-item {
	background-color: #666;
	outline         : 2px solid #888;
	display         : flex;
	font-size       : 32px;
	justify-content : center;
	align-items     : center;
}

.grid-void {
	background-color: #000;
}

.checkbox-group {
	display       : flex;
	flex-direction: column;
}

.checkbox-group>div {
	display       : flex;
	flex-direction: row;
}

.stat {
	display       : flex;
	flex-direction: row;
}

.stat>p {
	margin-left: 0.4ex;
}