html, body {
	overflow-x: hidden;
}

body {
	background-image: url("img/tile.png");
	font-family: sans-serif;
	background-color: #fff;
	font-size: 1.2em;
	margin: auto;
	color: #000;
}

main, header, footer {
	text-align: center;
	margin: 1em auto;
	max-width: 60em;
}

h1 {
	margin: 1em;
}

section p  {
	line-height: 1.7em;
	text-align: left;
	margin: 1em 2em;
}

hr {
	background-image: url("img/lemon_tea.png");
	height: 3em;
}

section {
	background-color: #fff;
	border: solid 2px #000;
	max-width: fit-content;
	text-align: center;
	margin: 1em auto;
}

img {
	max-width: 100%;
}

button {
	text-align: center;
	background: none;
	margin: 3em auto;
	border: none;
}

#board {
	background-image: url("img/dither.png");
	border: outset 2em #080;
	text-align: center;
	margin: 2em auto;
	padding: 0;
}

#board td {
	background: none;
	height: 5em;
	width: 5em;
	padding: 0;
	margin: 0;
}

#board button {
	padding: 0;
	margin: 0;
}

#board button:hover {
	-webkit-filter: invert(1);
	filter: invert(1);
}

#reset_button:active {
	-webkit-transform: translateY(0.5em);
	transform: translateY(0.5em);
	background-color: #ff0;
}

#reset_button img, #board img {
	pointer-events: none;
	object-fit: cover;
}

button, #board {
	cursor: url("img/pointer.png"), auto;
}

#win_banner {
	margin: 1.5em auto;
}

#score {
	text-transform: uppercase;
	border: ridge #4aa 0.5em;
	background-color: #000;
	margin: 0 auto 2em;
	font-weight: bold;
	font-size: 1.5em;
	color: #ff0;
}

#win_banner, #score, #image_cache {
	display: none;
}