canvas {
	cursor: move;
}

body {
	padding: 0;
	margin: 0;
	background-color: #000;
}

#navbar {

	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 64px;
	padding: 0;

	background-color: rgba(0,0,0,0.25);

	z-index: 100;

}

#playbutton {

	display: inline-block;
	position: absolute;
	top: 0;
	left: 80px;
	width: 32px;
	height: 32px;
	margin: 16px;
	cursor: pointer;

	opacity: .5;
	transition: opacity .5s;

	background: url("play.svg");

}

#playbutton:hover {
	opacity: 1;
}

#playbutton.play {

	background: url("pause.svg");

}

#fps {
	position: absolute;
	right: 0;
	top: 0;

	display: inline-block;
	width: 64px;
	height: 32px;
	margin: 16px;

	font-weight: bold;
	font-family: "Arial", sans-serif;
	font-size: 18px;
	text-align: right;
	line-height: 32px;
	color: #000;

	opacity: .5;
}

#resolutionSelect {
	position: absolute;
	top: 0;
	left: 16px;
	display: inline-block;
	width: 48px;
	height: 32px;
	margin: 16px;

	appearance: none;
	font-family: "Arial", sans-serif;
	font-size: 16px;
	font-weight: bold;

	background-color: rgba(0,0,0,0.5);
	border: none;
	text-align: center;
	opacity: .5;
	cursor: pointer;

	transition: opacity .5s, background-color .5s;
}

#resolutionSelect:hover {
	background-color: rgba(0,0,0,0.15);
	opacity: 1;
}