html {
    height: 100%;
    font-size: 12px;
    font-family: "Trebuchet MS", Helvetica, sans-serif;
    color: #222;
}

h1 {
	font-size: 2rem;
	text-transform: uppercase;
	font-weight: bold;
}

h2 {
	font-size: 1.5rem;
}

h3 {
	font-size: 1rem;
	font-weight: bold;
	/*text-transform: uppercase;*/
}

p {
	margin-bottom: 1rem;
}

input, button, select {
	width: 100px;
}

select {
	width: 200px;
}

canvas {
	position: absolute;
}

#visualise-container {
	width: 60%;
	margin: 1rem;
	float: left;
}

#visualise-container:after {
  padding-top: 70%;
  display: block;
  content: '';
}

#interact-container {
	float: left;
	margin: 1rem;
	width: calc(40% - 4rem);
}

#control-sphere {
	display: none;
}

#control-sphere.active {
	display: block;
}