* { box-sizing:border-box; }
html { background:black; }
body {
	margin:0; padding:0;
	height:100vh;
	background-color:#444;
	background-image:radial-gradient(at top,rgba(255,255,255,0.2),rgba(255,255,200,0.2) 20%,rgba(0,0,0,0.8) 70%), url(/images/rusty-vert.jpg);
	background-size:auto,300px;
	background-position:center;
	color:#ccc;
	font-family:sans-serif;
	font-size:5vh;
	font-weight:bold;
	animation:jerk 0.3s linear 0s 1 forwards;
}
@keyframes jerk {
	0%, 50%, 100% { transform:translatey(0); opacity:1; }
	25% { transform:translatey(1vh); opacity:0.7; }
	75% { transform:translatey(-1vh); opacity:0.7; }
}
nav {
	position:fixed;
	top:30vh; right:-1vw;
	height:60vh; width:30vh;
	padding:2vh;
	background-color:#666;
	background-image:linear-gradient(transparent,#222), url(/images/aluminum.jpg);
	background-size:auto,30vh;
	color:rgba(0,0,0,0.3);
	text-shadow:-0.03em -0.03em 0.03em rgba(0,0,0,0.2), 0.03em 0.03em 0.03em rgba(255,255,255,0.2);
	box-shadow:inset 0 0.5vh 0.5vh rgba(255,255,240,0.3), inset 0 -0.5vh 0.5vh rgba(10,10,0,0.3);
}
#floor-number-screen {
	display:inline-block;
	width:10vh;
	text-align:center;
	font-family:'Orbitron',monospace;
	background:#030; color:forestgreen;
	text-shadow:0 0 0.2em forestgreen;
	border-radius:0.5vh;
}
#denied-screen {
	display:inline-block;
	width:14vh;
	font-size:1.5vh;
	text-align:center;
	background:#222;
	color:#292929;
	text-shadow:none;
	border-radius:0.5vh;
	transition:all 0.2s;
}
#denied-screen.denied {
	background:red;
	color:peachpuff;
	text-shadow:0 0 0.2em salmon;
	box-shadow:0 0 1vh salmon;
}
ul { list-style-type:none; margin:0; padding:0; }
li { margin:1vh 0; }
.light {
	display:inline-block;
	width:6vh; height:6vh;
	vertical-align:middle;
	margin-right:3vh;
	background:#997;
	border-top:0.5vh solid #886;
	border-radius:50%;
	cursor:pointer;
	transition:all 0.5s;
}
.light:active {
	border-top:0.2vh solid #886;
	transform:translatey(-0.2vh);
}
.lit {
	background:radial-gradient(white,#dda);
	box-shadow:0 0 1vh white;
	border:none;
}
.buzzing {
	animation:buzzing 0.2s 0s infinite;
}
@keyframes buzzing {
	from { background:#997; box-shadow:none; border-top:0.5vh solid #886; }
	to   { background:radial-gradient(salmon,red); box-shadow:0 0 1vh red; border-top:none; }
}
#doorway {
	background:radial-gradient(#333,black);
	position:fixed;
	bottom:0; right:calc(25vh + 20vw);
	width:60vh; height:90vh;
	overflow:hidden;
	box-shadow:inset 2vh 0 6vh rgba(0,0,0,0.8);
	border-top:2vh solid #666;
	border-left:2vh solid #666;
	border-right:2vh solid #666;
}
#door {
	background-color:#666;
	background-image:linear-gradient(transparent,#222), url(/images/aluminum.jpg);
	background-size:auto,50vh;
	height:100%; width:100%;
	box-shadow:inset 0 0 6vh rgba(0,0,0,0.8);
	transition:all 3s;
	cursor:pointer;
}
#needlebox {
	position:fixed;
	top:0; right:-1vw;
	height:20vh; width:30vh;
	background:url(/images/needlemap-elevator.png) center/contain;
}
#needle {
	position:fixed;
	top:16vh; right:15vh;
	height:12px; width:11vh;
	background:black;
	border-radius:50% 0 0 50%;
	transform-origin:right;
	transform:rotate(0deg);
	transition:all 5s;
}