#canvas {
	margin: 11vh auto;
	z-index: -1;
	opacity: 1;
	transition: opacity linear 1s;
}
h2 {
	position: fixed;
	top: 8vw;
	margin: 0px;
	width: 100%;
	color: #000;
	text-shadow:
		 0px  1px 0px #fff,
		 0px -1px 0px #fff,
		 1px  0px 0px #fff,
		-1px  0px 0px #fff;
}
blockquote {
	position: fixed;
	bottom: 10%;
	margin: 0px;
	width: 100%;
	background: rgba(255,255,255,0.5);
	box-shadow: 0 0 0 1px #fff;
}

#canvas {
	max-width: 90vmin;
}
.knob {
	fill: none;
	stroke: black;
	stroke-width: 1px;
}
.knob-skirt {
	stroke-width: 11px;
	fill: white;
}
.knob-hat {
	stroke: white;
}
.knob-marker {
	fill: white;
}
.knob-text {
	font-weight: 900;
	font-size: 14px;
	text-anchor: middle;
	transform: translate(0px, -34px);
	fill: white;
}
#bpm { transform: translate(70px,70px); }
#attack { transform: translate(280px,70px); }
#decay { transform: translate(380px,70px); }
#harmonic { transform: translate(270px,280px); }
#modulation { transform: translate(500px,280px); }
#volume { transform: translate(700px,280px); }

#scheme { transform: translate(1px,1px); }
#scheme text {
	font-weight: 400;
	font-size: 12px;
	fill: black;
}
#scheme rect {
	fill: dodgerblue;
	stroke: dodgerblue;
	stroke-width: 2;
}
#scheme path {
	fill: none;
	stroke: dodgerblue;
	stroke-width: 2;
}
#play rect.overlay {
	fill: white;
	opacity: 0.7;
}
#play rect.button {
	fill: black;
	opacity: 0.8;
}
#play path {
	fill: white;
}