html, body {
	margin: 0;
	padding: 0;
}

#mainCanvas {
	margin: 0;
	padding: 0;
	width: 99%;
	height: 99%;
}

#statCanvas {
	align-self: flex-end;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
}

#panel {
	position: fixed;
	right: 0;
	top: 0;

	width: 30%;
	max-width: 20em;
	height: 100%;

	display: flex;
	flex-flow: column;

	font-family: monospace;
	background-color: powderblue;
	opacity: 0.7;
}

#status {
	width: 100%;
}

#controls {
	width: 100%;
	height: auto;
	list-style-type: none;
	padding: 0;
}

input[type=checkbox] {
	display: none;
}
input[type=range] {
	width: 100%;
}
/* Animations on hover */
label {
	transition: background .15s ease-in-out;
	-moz-transition: background .15s ease-in-out;
	-webkit-transition: background .15s ease-in-out;
}

input[type=checkbox] + label {
    display:inline-block;
	width: 100%;
    padding: 0.7em 1em;
	margin: 0.1em;
    background-color: #e7e7e7;
}
input[type=checkbox]:checked + label {
	background-color: #70cc37;
}
input + label:hover {
	background-color: #c5c5c5;
}