html, body {
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
}

button#openControl {
  position: absolute;
  right: 0px;
  bottom: 0px;
  background-color: none;
  border: none;
}

canvas {
  position: absolute;
  top: 0px;
  left: 0px;
  margin: 0px;
  padding: 0px;
}

div#canvasDiv {
  width: 100%;
  height: 100%;
  min-height: 90%;
  max-height: 90%;
  background-color: blue;
  position: absolute;
  top: 0px;
  left: 0px;
  padding: 0px;
  margin: 0px;
}

div#controlDiv {
  overflow: hidden;
  position: fixed;
  background-color:rgba(255,255,255,0.8);
  color: black;
  width: 100%;
  height: 10%;
  top: 100%;
  padding: 0px;
  margin: 0px;
  z-index: 999;
  transition: 0.5s;
  display: flex;
  flex-direction: row;
}

.control {
	display: flex;
	flex-direction: column;
	flex: 0.25;
	padding-left: 1em;
	padding-right: 1em;
	height: 100%;
}

.control .control-slider {
	display: block;
	padding-left: 1em;
	padding-right: 1em;
}

.control .control-slider input {
	width: 100%;
}
.control .control-name {
	display: block;
	flex: 1;
	text-align: center;
	font-size: 18pt;
	font-weight: bold;
}