button {
	cursor: pointer;
}

#canvas {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}

.label {
	--text-color: white;
	--shadow-color: white;
	user-select: none;
	position: absolute;
	color: var(--text-color);
	font-family: sans-serif;
	font-size: 2em;
	text-shadow:
			+2px +2px 4px var(--shadow-color),
			-2px -2px 4px var(--shadow-color);
}

#level_label {
	left: 1em;
	top: 1em;
}

#dist_label {
	right: 1em;
	top: 1em;
}

#level_complete_label {
	--text-color: #ffb700;
	--shadow-color: #6e5500;
	--scale-factor: 32;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	visibility: hidden;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	font-size: 4em;
}

#level_complete_label.visible {
	visibility: visible;
}

#level_complete_label > div {
	transition: transform 0.5s ease-in, opacity 0.5s ease-in;
	transform: scale(32);
	opacity: 0;
}

#level_complete_label.visible > div {
	transform: scale(1);
	opacity: 1;
}

#next_button {
	transition: opacity 1s ease-in;
	font-size: 1.5rem;
	opacity: 0;
	padding: 0.25em 0.5em;
	margin: 0;
	font-family: sans-serif;
	color: #484848;
	background: white;
	border: 2px solid #7c7c7c;
	border-radius: 4em;
}

#level_complete_label.visible #next_button {
	opacity: 1;
}

#toolbar {
	left: 1rem;
	bottom: 1rem;
	display: flex;
	flex-direction: row;
}

#toolbar button {
	display: block;
	border: none;
	padding: 0;
	background: transparent;
	opacity: 0.25;
}

#toolbar button:hover {
	opacity: 1;
}

#toolbar button img {
	display: block;
}

@media (max-width: 499px) {
	.label {
		font-size: 1.5em;
		margin: -0.5em;
	}

	#level_complete_label {
		font-size: 2em;
		margin: 0;
	}

	#next_button {
		font-size: 1.25rem;
	}
}