html, body, canvas {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
    background: black;

    font-family: 'Consolas', 'Courier New', monospace;
		color: rgba(52, 152, 219,0.6);
}

canvas {
	cursor: pointer;
	z-index: 1;
	-webkit-filter: blur(0) sepia(0);
   filter: blur(0) sepia(0);
	transition: filter 500ms linear;
	transition: -webkit-filter 500ms linear;
	-webkit-transition : -webkit-filter 500ms linear;
}

canvas:active {
	cursor: -webkit-grabbing;
}

canvas.dead {
	-webkit-filter: blur(5px) sepia(1);
   filter: blur(5px) sepia(1);
}

body > div {
 	display: none;
}

#hud {
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent url('../assets/helmet.png') center no-repeat;
    background-size: cover;
    z-index: 10;
}

#hud > div {
	position: absolute;
	bottom: 0px;

	width: 30%;
	height: 35%;

	box-sizing: border-box;
	padding: 20px;

	-webkit-perspective: 300;
}

#hud > div > h2 {
	font-size: 2em;
	margin: 0;
}

#hud > #task {
	left: 0;
	transform-origin: 0 0;
	transform: skewX(5deg) skewY(5deg);
	text-align: right;
}

#hud > #oxy {
	right: 0;
	transform-origin: 100% 0;
	transform: skewX(-5deg) skewY(-5deg);
}

#info {
	position: absolute;
	right: 5vh;
	top: 5vh;

	padding: 2.5vh;
	box-sizing: border-box;

	background-color: rgba(52, 152, 219, 0.2);
	border: 4px solid rgba(52, 152, 219, 0.4);
	border-radius: 10px;

	pointer-events: none;
	opacity: 1;
	transition: opacity 500ms;

	z-index: 10;
}
#info > h1 {
	font-size: 3em;
}

#info > h1, #info > h2, #info > h3 {
	margin: 0;
}

#info > ul, #info > ol {
	margin: 0;
}

#info > ul > li, #info > ol > li {
	font-size: 18px;
}

.infotext {
	position: absolute;
	bottom: 5vh;
	width: 100vw;
	opacity: 1;
	transition: opacity 250ms;
	z-index: 10;
}

.infotext > h1 {
	width: 100vw;
	text-align: center;
}

#start {
	cursor: pointer;
}

#babylon {
	position: absolute;
	width: 256px;
	height: 128px;
	top: 5vh;
	left: 5vh;
	z-index: 10;
}

.hide {
	opacity: 0 !important;
	pointer-events: none;
}

.hidden {
	display: none;
}