@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,200&display=swap');

:root {
	--main-color: rgb(14, 93, 196);
	--main-font: 'Fira Sans', sans-serif;
}
* {
	margin: 0 !important;
	padding: 0 !important;
	touch-action: none;
}
html {
	font-size: 62.5%;
}
body {
	font-family: var(--main-font);
	color: var(--main-color);
}
main {
	display: flex; 
	flex-direction: column;	
	border: 1px solid var(--main-color);
}
button:focus, input:focus, select:focus {
	outline: none !important;
}

.title {
	font-size: 4rem;
	text-align: center;
	margin: 1rem 0 !important;
}
.options-row {
	display: flex;
	align-items: center;
	justify-content: center;	
	margin-bottom: 1rem !important;
	font-size: 2.25rem !important;
}
.option {
	margin: 0 1rem !important;
}
.button-row {
	display: flex;
	gap: 1rem;
	align-items: center;
	justify-content: center;	
	flex-wrap: wrap;
	margin: 1rem 0 !important;
}
select, input {
	font-family: var(--main-font);
	font-size: 1.5rem;
	color: var(--main-color);
	border-color: var(--main-color);
	border-radius: .5rem;
}
#tonic {
	width: 8rem;
}
#wave {
	width: 9rem;
}
#shaper {
	width: 10rem;
}
#graph {
	position: absolute;
	z-index: -10;
	top: 0;
	left: 0;
	width: 100%;
	opacity: 50%;
}
button {
	font-size: 2rem;
	font-family: var(--main-font);
	border-width: 0;
	border-radius: .5rem;
	padding: .5rem 2rem !important;
	margin: .25rem 0 !important;
	background: var(--main-color);
	color: white;
	cursor: pointer;
}