html, body {
	margin: 0;
	overflow: hidden;
}

*::selection {
	color: #FFF;
	background-color: #39C;
}


canvas {
	background-color: #000;
}

#menu-container {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;

	/* Make sure to keep this in sync with src/menu.js:setVisible! */
	display: flex;

	align-items: center;
	justify-content: center;

	background-color: #222222A0;
}

.menu {
	display: flex;
	flex-direction: column;

	margin: 15px;

	flex-basis: 18rem;
	flex-shrink: 1;

	color: #FFF;

	font-family: "Inter", sans-serif;
}

.menu > h1 {
	text-align: center;
}

.menu > label {
	display: flex;
	flex-direction: row;

	justify-content: space-between;
	flex-wrap: wrap;
}

.menu > h2 {
	margin-bottom: 0;
}

.menu > p {
	margin-top: 0;
}

.menu > button {
	align-self: stretch;
	padding: 5px;

	border-radius: 3px;
	border: none;

	margin-bottom: 8px;

	cursor: pointer;

	font-weight: bold;

	font-size: 120%;
}

.menu > button.best {
	background-color: #FFF;
	color: #000;
	font-size: 150%;
}

.menu > button.good {
	background-color: #FFF;
	color: #000;
}

.menu > button.bad {
	background-color: #F24;
	color: #FFF;
}