html, body {
	margin: 0;
	padding: 0;
	overflow: hidden;
	height: 100%;
	cursor: -webkit-grab;
	cursor: grab;
	background-image: url('bg.jpg');
	background-size: cover;
	font-family:arial;
}

b {
	font-weight:bold;
}

#hd-visualizer-container {
	position: relative;
	width: 100%;
	height: 100%;
}

#hd-visualizer-container canvas {
	background: transparent;
}

#dropdown-container {
	position:absolute;
	top:2em;
	left:3em;
	z-index:10;
}

.dropdown {
	display:none;
	color:white;
	border:2px solid white;
	border-radius:2em;
	text-transform:uppercase;
	overflow:hidden;
	background:#818181;
	width:27ch;
	margin:1em 0;
	white-space:nowrap;
	cursor:pointer;
}

.dropdown .title {
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding:1em 1.75em;
	background:linear-gradient(to bottom, hsl(21deg 83% 62%), #ea6820, hsl(21deg 83% 47%));
	border-bottom:1px solid white;
}

.dropdown.open {
	padding-bottom:1.75em;
}

.dropdown .title img {
	transition:transform .25s ease;
	height:1em;
}

.dropdown.open .title img {
	transform:rotate(90deg);
}

.dropdown.active {
	display:block;
}

.dropdown .options {
	overflow:hidden;
}

.dropdown.open .options {
}

.dropdown .options div {
	display:none;
	padding:1em 1.75em;
	background:#B1B1B1;
	margin-bottom:1px;
}

.dropdown.open .options div,
.dropdown .options div.active {
	display:block;
}

.dropdown .options div.hide {
	display:none;
}

.dropdown .options div.active, .dropdown .options div:hover {
	background:#999;
}

#notice {
	position: absolute;
	top: 1em;
	left: 50%;
	color: white;
	transform: translateX(-50%);
}