@import url('https://fonts.googleapis.com/css2?family=Comme&display=swap');

body {
	background-color: #80bcbc;
	color: #000;
	font-family: "Comme", sans-serif !important;
}

.game-overlay > h1.name {
	font-size: 3em !important;
	font-weight: 700 !important;
	margin: 0;
}

.game-overlay > h2.version {
	font-size: 1em !important;
	font-weight: 700 !important;
	margin: 0;
	margin-top: -0.5em;
	margin-bottom: 0.5em;
}

.game-overlay > p.loading-message {
	font-size: 3em !important;
}

.game-overlay button.reset {
	font-size: 2.25em !important;
}

.game-overlay .octave-input-container,
.game-overlay .button-collection {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 0.5em;
}

.game-overlay .button-collection {
	grid-template-rows: 1fr 1fr 1fr 1fr;
	padding: 0.5em;
}

.game-overlay .octave-input-container {
	grid-template-rows: 1fr;
	margin-top: 1em;
	padding-left: 0.5em;
	padding-right: 0.5em;
}

.button-collection#bottom-button-collection {
	grid-template-rows: 1fr;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

.button-collection > button {
	font-size: 2.25em !important;
	background-color: #fff;
	color: inherit;
	border-radius: 0.03125em;
	transition-property: background-color;
	transition-duration: 1s;
	transition-timing-function: linear;
}

.button-collection#bottom-button-collection > button {
	font-size: 1.5em !important;
}

/* .button-collection > button.note {
} */

/* .note-collection > button.note:active,
.note-collection > button.note.active {
	background-color: rgba(0, 128, 128, 0.5);
	transition-duration: 1ms;
} */

.pitch-slider-container {
	margin-top: 1em;
	margin-bottom: 1em;
}

.pitch-slider-container > * {
	width: calc(100% - 1em);
}

.pitch-slider-container > label {
	display: inline-block;
}

.game-overlay label {
	padding-left: 0.25em;
	padding-right: 0.25em;
}

.game-overlay input[type="radio"] {
	width: 1em;
	height: 1em;
}

.game-overlay .pitch-slider-input {
	width: calc(100% - 1em);
	height: 1em;
}