body {
	font-family: sans-serif;
	color: white;
}

::selection {
	background-color: rgba(0,0,0,0);
}

.tile {
	position: absolute;
	
	background-size: 50px 50px; /* Sets the background image size to 50px by 50px */
	background-position: center; /* Centers the background image */
	background-repeat: no-repeat; /* Prevents the image from repeating */
	background-blend-mode: multiply;
	
	cursor: pointer;
	
	border-radius: 10px;
	box-shadow: inset 5px 5px 15px rgba(255, 255, 255, 0.3), inset -5px -5px 15px rgba(0, 0, 0, 0.3);
	mix-blend-mode: multiply;
}

.tile:hover {
	transform: scale(0.9);
	background-color: rgba(255, 0, 0, 0.1);
}

.tile.highlighted {
	background-color: rgba(0, 0, 255, 0.1);
}

@keyframes flash {
	0% { background-color: rgba(0, 255, 0, 0.3); transform: scale(1); }
	50% { background-color: rgba(0, 255, 0, 0.8); transform: scale(0.9); }
	100% { background-color: rgba(0, 255, 0, 0.3); transform: scale(1); }
}
.tile.hinted {
	background-color: rgba(0, 255, 0, 0.1);
	animation: flash 1s infinite; /* Flash every 1 second, indefinitely */
}

#controls {
	padding: 1em;
}

#game-area {
	position: absolute;
}

.button {
	background-color: rgb(37, 190, 150);
	border: 5px outset rgb(37, 190, 150);
	padding: 10px 20px;
	font-size: 16px;
	cursor: pointer;
	margin: 1em;
}

.button.active {
	border: 5px inset rgb(37, 190, 150);
	background-color: rgb(30, 150, 120);
}

.label {
	background-color: rgb(37, 150, 190);
	border: 5px ridge rgb(37, 150, 190);
	padding: 10px 20px;
	font-size: 16px;
	margin: 1em;
	height: 1em;
}

canvas {
	opacity: 1;
	transition: none;
	pointer-events: none;
}

canvas.fade-out {
	opacity: 0;
	transition: opacity 1s ease-out;
}

#game-over-screen {
	pointer-events: none;
	display: none;
	opacity: 0;
	transition: opacity 1s ease-out;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 50%;
	height: auto;
	background: rgb(120, 88, 0);
	border: 5px ridge rgb(120, 88, 0);
	padding: 20px;
	box-sizing: border-box;
}
#game-over-screen.visible {
	display: block;
	opacity: 1;
	pointer-events: auto;
}

#game-over-message {
	font-size: 300%;
	text-align: center;
}

#game-over-screen .label {
	height: auto;
	width: 50%;
	margin: 1em auto;
}

#game-over-screen .label .button {
	text-align: center;
	margin: 1em auto;
	display: block;
}