body {
	background-color: #000;
	text-align: center;
	height: 100vh;
	margin: auto;
}

body, #menu {
	align-items: center;
	text-align: center;
	display: flex;
}

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

#board div button, #score_board {
	height: 100%;
	width: 100%;
}

body, button {
	cursor: url("img/hand.png"), auto;
}

#board {
	background-image: url("img/wood.png");
	grid-template-columns: repeat(5, 1fr);
	grid-template-rows: repeat(5, 1fr);
	background-size: cover;
	background-color: #fff;
	display: grid;
	margin: auto;
}

.clickable:hover {
	background-image: url("img/highlight.png");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
}

#play_button:hover, #reset_button:hover {
	cursor: url("img/click.png"), auto;
}

#score {
	grid-area: 1 / 4 / span 2 / span 2;
	padding: 5%;
}

#score_board {
	background-image: url("img/score.png");
	background-size: 100% 100%;
}

#reset {
	grid-area: 4 / 1 / span 2 / span 2;
}

#menu {
	background-image: url("img/title-screen.png");
	background-size: cover;
	margin: auto;
}

#play_button {
	height: auto;
	width: 50%;
}

.space {
	max-height: 100%;
	max-width: 100%;
	padding: 10%;
}

img {
	pointer-events: none;
	height: auto;
	width: 100%;
}

.space, #board, #menu {
	aspect-ratio: 1 / 1;
	min-height: 0;
	min-width: 0;
}

#score_board img {
	margin-top: 40%;
	height: 40%;
	width: 25%;
}

@media (orientation: portrait) {
	#board, #menu {
		height: auto;
		width: 100vw;
	}
}

@media (orientation: landscape) {
	#board, #menu {
		height: 100vh;
		width: auto;
	}
}