/* DEBUG
.top-straight:hover {
	border:dashed 1px;
}*/

/* * * Leftpane * * */
#Leftpane {
	background-color: rgb(220,10,45);
	width: 20vw;
	height: 30vw;
	border-radius: 2vw 2vw 0 2vw;
	box-shadow: 0.5vw 0.5vw rgb(139,6,28);
	z-index: 0;
	position: absolute;
}

#Leftpane .top-straight {
	background-color: rgb(220,10,45);
	height: 5vw;
	width: 10vw;
	z-index:0;
	position: absolute;
	box-shadow: 0 0.5vw rgb(139,6,28);
	border-radius: 2vw 0 1vw 0; 
}

#Leftpane .main {
	margin-top: 8vw;
	height: 32vw;
	width: 100%;
	position: absolute;
}

#eye-ring {
	margin: 1vw 0 0 1vw;
	width: 3vw;
	height: 3vw;
	position: absolute;
	background-color: rgb(222,222,222);
	border-radius: 3vw;
}

#eye {
	margin: 0.25vw;
	width: 2.5vw;
	height: 2.5vw;
	background-image: radial-gradient(circle at 30% 30%, rgb(40,170,253) 0%, rgb(40,170,253) 30%, rgb(25,106,158) 31%);
	border-radius: 2.5vw;
	/*box-shadow: 0.2vw 0.2vw rgba(0,0,0, 0.5);*/
}

#eye:after {
	margin: 0.4vw;
	width: 0.5vw;
	height: 0.5vw;
	background-color: rgb(161,218,254);
	border-radius: 0.5vw;
	content: '';
	position: absolute;
}

#led {
	margin: 1vw 0 0 5vw;
	width: 1vw;
	height: 1vw;
	background-image: radial-gradient(circle at 40% 40%, rgb(255,192,203) 0%, rgb(255,192,203) 20%, rgb(155,0,26) 31%);
	border-radius: 1vw;
	position: absolute;
	box-shadow: 0.1vw 0.1vw rgba(155,0,26,0.5);
}

#led:before {
	margin: 0 0 0 2vw;
	width: 1vw;
	height: 1vw;
	background-image: radial-gradient(circle at 40% 40%, rgb(255,248,196) 0%, rgb(255,248,196) 20%, rgb(159,139,15) 31%);
	border-radius: 1vw;
	content: '';
	position: absolute;
	box-shadow: 0.1vw 0.1vw rgba(159,139,15,0.5);
}

#led:after {
	margin: 0 0 0 4vw;
	width: 1vw;
	height: 1vw;
	background-image: radial-gradient(circle at 40% 40%, rgb(216,236,218) 0%, rgb(216,236,218) 20%, rgb(51,108,59) 31%);
	border-radius: 1vw;
	content: '';
	position: absolute;
	box-shadow: 0.1vw 0.1vw rgba(51,108,59,0.5);
}

#displayframe {
	background-color: rgb(222,222,222);
	margin: 8vw 0 0 1.5vw;
	width: 16vw;
	height: 12vw;
	border-radius: 0.2vw 0.2vw 0.2vw 1.5vw;
	box-shadow: 0.2vw 0.2vw rgba(222,222,222,0.5);
}

#displayframe #top-edge {
	height: 20%;
	width: 80%;
	margin: 0 auto 0 auto;
}

#displayframe #top-edge:before { /* dot1 */
	margin: 0.5vw 0 0 25%;
	width: 0.5vw;
	height: 0.5vw;
	background-color: rgb(255,0,43);
	border-radius: 0.5vw;
	content: ' ';
	box-shadow: 0.1vw 0.1vw rgba(255,0,43,0.5);
	position: absolute;
}

#displayframe #top-edge:after { /* dot2 */
	margin: 0.5vw 0 0 35%;
	width: 0.5vw;
	height: 0.5vw;
	background-color: rgb(255,0,43);
	border-radius: 0.5vw;
	content: ' ';
	box-shadow: 0.1vw 0.1vw rgba(255,0,43,0.5);
	position: absolute;
}

#displayframe .display {
	margin: 0 10% 0 10%;
	width: 80%;
	height: 60%;
}

#displayframe #bottom-edge {
	height: 20%;
	width: 80%;
}

#displayframe #bottom-edge:before {
	width: 2vw;
	height: 1vw;
	background-color: rgb(220,10,45);
	content: '';
	position: absolute;
	transform: rotatez(45deg);
	margin: 1.75vw 0 0 -0.75vw;
}

#displayframe #bottom-edge:after {
	margin: 0.5vw 0 0 10%;
	width: 1vw;
	height: 1vw;
	background-color: rgb(255,0,43);
	border-radius: 0.5vw;
	content: ' ';
	box-shadow: 0.1vw 0.1vw rgba(255,0,43,0.5);
	position: absolute;
}

#displayframe #bottom-edge #speaker {
	width: 2vw;
	height: 2vw;
	content: '';
	position: absolute;
	margin: 0.5vw 0 0 13vw;
}

#displayframe #bottom-edge #speaker div {
	height:0.1vw;
	margin: 0.2vw 0 0.2vw 0;
	}

#colorstipybuddons {
	margin: 1.5vw 0 0.5vw 4.5vw;
	width: 16vw;
	height: 2vw;
}

#colorstipybuddons:before {
	background-color: rgb(255,0,43);
	width: calc(16vw/5);
	height: 0.5vw;
	border: 1px solid black;
	box-sizing: border-box;
	box-shadow: 0.1vw 0.1vw rgba(255,0,43,0.5);
	border-radius: 0.2vw;
	float: left;
	content: '';
}

#colorstipybuddons:after {
	margin-left: 1vw;
	background-color: rgb(3,101,147);
	width: calc(16vw/5);
	height: 0.5vw;
	border: 1px solid black;
	box-sizing: border-box;
	box-shadow: 0.1vw 0.1vw rgba(3,101,147,0.5);
	border-radius: 0.2vw;
	float: left;
	content: '';
}

#finalcountdown {
	margin: -2vw 0 0 1vw;
	width: 2vw;
	height: 2vw;
	background-color: rgb(35,35,35);
	border-radius: 2vw;
	box-shadow: 0.1vw 0.1vw rgba(35,35,35,0.5);
	position: absolute;
}

#finalcountdown:before {
	content: '';
	margin: 3vw 0 0 11vw;
	width: 5vw;
	height: 1.5vw;
	background-color: rgb(35,35,35);
	border-radius: 0.2vw;
	position: absolute;
}

#finalcountdown:after {
	margin: -8.75vw 0 0 12.75vw;
	width: 1.5vw;
	height: 5vw;
	background-color: rgb(35,35,35);
	border-radius: 0.2vw;
	position: absolute;
	content: '';
}

#finalcountdown .display {
	margin: 2vw 4vw 4vw 4vw;
	background-color: rgb(81,174,95);
	height: 4vw;
	width: 6vw;
}

/* * * Rotatything * * */
#Rotatything {
	background: linear-gradient(90deg, rgb(220,10,45), rgb(233,102,124), rgb(220,10,45), rgb(137,6,28));
	margin: 3vw 0 0 19vw;
	width: 2vw;
	height: 27vw;
	z-index: 1;
	position: absolute;
	box-shadow: 0.5vw 0 1.5vw 0 rgba(0,0,0,0.5);
}

#Rotatything:before {
	margin: 2.5vw 0 0 0;
	height: 0.2vw;
	width: 2vw;
	background: linear-gradient(90deg, rgb(137,6,28), rgb(220,10,45), rgb(137,6,28), rgb(137,6,28));
	position: absolute;
	content: ' ';
	box-sizing: border-box;
}

#Rotatything:after {
	margin: 24vw 0 0 0;
	height: 0.2vw;
	width: 2vw;
	background: linear-gradient(90deg, rgb(137,6,28), rgb(220,10,45), rgb(137,6,28), rgb(137,6,28));
	position: absolute;
	content: ' ';
	box-sizing: border-box;
}

#cap-top {
	width: 100%;
	height: 0.5vw;
	position: absolute;
	background-image: linear-gradient(90deg, rgb(220,10,45), rgb(233,102,124), rgb(220,10,45), rgb(137,6,28));
	margin: -0.5vw 0 0 0;
	border-radius: 0.5vw 0.5vw 0 0;
	box-sizing: border-box;
}

#cap-bottom {
	width: 2vw;
	height: 2vw;
	position: absolute;
	background-color: rgb(118,5,24);
	margin: 26vw 0 0 0;
	border-radius: 1vw 1vw 1vw 1vw;
	box-sizing: border-box;
	transform: rotatex(60deg);
}

/* * * Rightpane * * */
#Rightpane {
	margin: 5.5vw 0 0 calc(20vw - 1px); /* dunno where that freaking pixel comes from, otherwise 1px gap in shadow */
	background-color: rgb(220,10,45);
	width: 20vw;
	height: 24.5vw;
	border-radius: 0 0 2vw 0;
	z-index: 0;
	box-shadow: 0.5vw 0.5vw rgb(139,6,28);
	position: absolute;
}

#Rightpane .top-straight {
	margin-top: -2.5vw;
	background-color: rgb(220,10,45);
	height: 3vw;
	width: 12vw;
	z-index:1;
	position: absolute;
	border-radius: 0 2vw 0 0; 
}

#Rightpane .display {
	margin: 4vw 0 0 2.5vw;
	width: 16vw;
	height: 4vw;
}

#lotsobuddons {
	margin: 2vw 0 0 2.5vw;
	width: 16vw;
	height: 4vw;
}

#lotsobuddons div {
	background-color: rgb(40,170,253);
	width: calc(100%/5);
	height: 2vw;
	border: 1px solid black;
	float: left;
	box-sizing: border-box;
	box-shadow: 0.2vw 0.2vw rgba(40,170,253,0.5);
}

#twoblackstripybuddons {
	margin: 1vw 0 0 11vw;
}

#twoblackstripybuddons div {
	margin-left: 0.5vw;
	background-color: rgb(0,46,41);
	width: calc(16vw/5);
	height: 0.5vw;
	border: 1px solid black;
	box-sizing: border-box;
	box-shadow: 0.1vw 0.1vw rgba(0,46,41,0.5);
	border-radius: 0.2vw;
	float: left;
}

#twowhitebuddonsandacircle {
	margin: 2vw 0 0 2.5vw;
	width: 16vw;
	height: 4vw;
}

#twowhitebuddonsandacircle div { /* the buddons */
	background-color: rgb(222,222,222);
	width: calc(100%/5);
	height: 2vw;
	border: 1px solid black;
	float: left;
	box-sizing: border-box;
	box-shadow: 0.2vw 0.2vw rgba(222,222,222,0.5);
}

#twowhitebuddonsandacircle:after { /* the circle */
	margin: 1vw 0 0 7.5vw;
	width: 1.5vw;
	height: 1.5vw;
	background-image: radial-gradient(circle at 40% 40%, rgb(255,246,192) 0%, rgb(255,246,192) 20%, rgb(159,139,15) 31%);
	border-radius: 1vw;
	position: absolute;
	content: '';
	box-shadow: 0.2vw 0.2vw rgba(159,139,15,0.5);
}

#twobigblackbuddons {
	margin: 0 0 0 2.5vw;
	width: 20vw;
	height: 4vw;
}

#twobigblackbuddons div {
	margin: 0 2vw 0 0;
	background-color: rgb(0,46,41);
	width: calc(100%/2 - 3vw);
	height: 2vw;
	border: 1px solid black;
	float: left;
	box-sizing: border-box;
	box-shadow: 0.2vw 0.2vw rgba(0,46,41,0.5);
	border-radius: 0.2vw;
}

/* * * Shared * * */
.display {
	background-color: rgb(35,35,35);
	border-radius: 0.2vw;
}

.top-left-corner {
	border-top-left-radius: 0.2vw;
}

.top-right-corner {
	border-top-right-radius: 0.2vw;
}

.bottom-left-corner {
	border-bottom-left-radius: 0.2vw;
}

.bottom-right-corner {
	border-bottom-right-radius: 0.2vw;
}