@import url('https://fonts.googleapis.com/css?family=Julius+Sans+One|Electrolize');
#wrap{
	position: relative;
    top: -55px;
	display: inline-block;
	width: 180px;
	padding: 25px 35px;
	border-radius: 8px;
	background-color: hsl(200, 85%, 46%);
	margin: -10px auto 0 auto;
}
.clear{
	clear: both;
	width: 100%;
}
#display{
    font-family: "Electrolize", sans-serif;
	background-color: #222;
	color: hsl(183, 100%, 50%);
	padding: 8px;
	box-sizing: border-box;
	font-size: 22px;
	margin-bottom: 20px;
}
#result{
	display: inline-block;
}
.btn{
	cursor: pointer;
    font-family: "Julius Sans One", sans-serif;
	width: 50px;
	height: 50px;
	margin: 8px;
	border: 3px solid hsl(214, 60%, 30%);
	border-radius: 25px;
	background-color: hsl(200, 85%, 36%);
	color: #fff;
	text-shadow: 1px 1px 3px #333;
	font-weight: bold;
	font-size: 22px;
}
.bf{
	cursor: pointer;
    font-family: "Julius Sans One", sans-serif;
	width: 40px;
	height: 40px;
	margin: 30px 6px 6px 6px;
	border: 2px solid hsl(214, 60%, 30%);
	border-radius: 25px;
	background-color: #fff;
	color: hsl(200, 85%, 36%);
	font-weight: bold;
	font-size: 22px;
}
table{
	display: inline-block;
	border-collapse: collapse;
	background-color: hsl(200, 85%, 46%);
	color: #eee;
	padding: 18px;
}
td{
	vertical-align: top;
	border: 1px solid #eee;
	font-weight: bold;
	width: 100px;
	height: 50px;
	box-sizing: border-box;
	padding: 5px;
}
#lift{
	position: relative;
	width: 100%;
	height: 48px;
	border: 1px solid #ddd;
	border-radius: 6px;
	background-color: #888;
	box-sizing: border-box;
    transition: all 1.5s linear;
}
#door{
	width: 51%;
	height: 100%;
	background-color: #222;
	margin: 0 auto;
	border-radius: 5px;
}
#left{
	float: left;
	background-color: #ddd;
	width: calc(50% - 2px);
	height: calc(100% - 2px);
	border: 1px solid #222;
	border-radius: 5px 0 0 5px;
    transition: 1s;
}
#right{
	float: right;
	background-color: #ddd;
	width: calc(50% - 2px);
	height: calc(100% - 2px);
	border: 1px solid #222;
	border-radius: 0 5px 5px 0;
    transition: 1s;
}