* { box-sizing: border-box; }
    html, body {
	height: 100%;
	width: 100%;
	margin: 0;
	color: white;
	background: #191919;
	font-family: monospace;
	font-size: 14px;
}
a {
	color: inherit;
	text-decoration: none;
}

header {
	position: fixed;
	top: 0;
	left: 0;
	background-color: rgba(0,0,0,0.4);
	border-radius: 5px;
	margin: 10px;
	padding: 10px;
	z-index: 2;
}
h1 {
	font-size: 18px;
	margin-top: 0;
}
#settings {
	display: flex;
	flex-direction: column;
}

label {
	padding-top: 10px;
}
input {
	margin: 5px 0;
}
fieldset>input {
	width: 15vw;
	min-width: 200px;
}

canvas {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	max-width: 100vw;
	max-height: 100vw;
}

footer {
	position: fixed;
	top: 0;
	right: 0;
	margin: 10px;
	opacity: 0.7;
	font-size: 18px;
}
footer:hover {
	opacity: 1;
}
input[type="range"] {
 -webkit-appearance: none;
}

input[type="range"]:focus {
 outline: none;
}
input[type="range"]::-webkit-slider-runnable-track {
 background: #333;
 border-radius: 10px;
 height: 5px;
 border: 1px solid #fff;
}

input[type="range"]::-moz-range-track {
 background: #ccc;
 height: 5px;
 border-radius: 5px;
}
input[type="range"]::-webkit-slider-thumb {
 -webkit-appearance: none;
 height: 15px;
 width: 15px;
 background: #09c;
 margin-top: -5px;
 border-radius: 50%;
 border: 3px solid #fff;
}

input[type="range"]::-moz-range-thumb {
 height: 15px;
 width: 15px;
 background: pink;
 margin-top: -5px;
 border-radius: 50%;
}