@charset "UTF-8";
/* CSS Document */

body {
	overflow:hidden;
}

#table {
	width:101vw;
	margin-top:44vh;
	height:56vh;
	background-color:peru;
	margin-left:-1vw;
}

#screen {
	background-color:silver;
	width:40vw;
	height:48vh;
	margin-top:-92vh;
	margin-left:15vw;
	transform: skewX(-6deg) skewY(2deg) rotate(-4deg);
	z-index:1;
	position:absolute;
}

#onscreen {
	background-color:white;
	background-image:url("../images/mc_onscreen/muriel.png");
	width:38vw;
	height:44vh;
	margin-top:2vh;
	margin-left:1vw;
	z-index:5;
	position:absolute;
	border-radius:5px;
	background-size:38vw 44vh;
}

#overlay {
	background-color:black;
	width:38vw;
	height:44vh;
	margin-top:2vh;
	margin-left:1vw;
	z-index:6;
	position:absolute;
	border-radius:5px;
}

#hinge {
	background-color:grey;
	width:40.2vw;
	height:0.15vw;
	position:absolute;
	margin-top:-44vh;
	margin-left:14.5vw;
	transform: rotate(-2deg);
	z-index:10;
	border-radius:1vw;
}

#keyboard {
	background-color:silver;
	width:41vw;
	height:34vh; 
	margin-top:-44vh;
	margin-left:19.3vw;
	transform: skewX(30deg) skewY(0deg) rotate(-2deg);
	z-index:1;
	position:absolute;
}
.row {
	width:40vw;
	height:4vh;
	margin-left:1vw;
	margin-top:1.5vh;
	margin-bottom:-0.7vh;
}
.key {
	background-color:black;
	width:1.7vw;
	height:3.33vh;
	float:left;
	margin-left:1vh;
	border-radius:3px;
	color:lightgrey;
	padding-left:1.05vw;
	padding-top:0.66vh;
	font-family: niveau-grotesk, sans-serif;
	font-weight: 300;
	font-style: normal;
}
.letterkey:hover {
	background-color:darkgrey;
}
#spacebar {
	width:11.45vw;
}
#trackpad {
	background-color:grey;
	width:14vw;
	height:10.5vh;
	margin:auto;
	margin-top:2.25vh;
	border-radius:4px;
}

#cover {
	background-color:red;
	width:24vw;
	height:12vh;
	margin-top:-52vh;
	margin-left:66vw;
	padding-top:5px;
	position:absolute;
	z-index:6;
	transform:skewX(74deg) skewY(5deg) rotate(-10deg);
}

#spine {
	background-color:maroon;
	width:22vw;
	height:10vh;
	margin-top:-44vh;
	margin-left:59vw;
	position:absolute;
	z-index:5;
	transform:skewX(23deg) skewY(-5deg) rotate(21deg);
	padding-top:4px;
}

#pages {
	background-color:antiquewhite;
	width:14vw;
	height:9vh;
	position:absolute;
	z-index:4;
	margin-top:-40vh;
	margin-left:81vw;
	transform: skewX(-3deg) skewY(2deg) rotate(-7deg);
}

#back {
	background-color:black;
	width:22vw;
	height:12vh;
	margin-top:-42vh;
	margin-left:67vw;
	padding-top:3px;
	position:absolute;
	z-index:1;
	transform:skewX(74deg) skewY(4deg) rotate(-8deg);
}

#logo {
	width:4vw;
	height:7vh;
	position:absolute;
	z-index:12;
	margin-top:1.5vh;
	margin-left:17.5vw;
} 
#bar1 {
	background-color:lightgrey;
	height:5vh;
	width:0.4vw;
	margin-top:1vh;
	float:left;
}
#bar2 {
	background-color:lightgrey;
	height:5vh;
	width:0.4vw;
	margin-top:1vh;
	float:left;
	margin-left:0.2vh;
}
#bar3 {
	background-color:lightgrey;
	height:5vh;
	width:0.4vw;
	margin-top:1vh;
	float:left;
	margin-left:0.2vh;
}
#bar4 {
	background-color:lightgrey;
	height:5vh;
	width:0.4vw;
	margin-top:1vh;
	float:left;
	margin-left:0.2vh;
}
#bar5 {
	background-color:lightgrey;
	height:6vh;
	width:0.4vw;
	margin-top:0vh;
	float:left;
	margin-left:0.2vh;
}
#bar6 {
	background-color:lightgrey;
	height:6vh;
	width:0.4vw;
	margin-top:1vh;
	float:left;
	margin-left:0.2vh;
}
#bar7 {
	background-color:lightgrey;
	height:5vh;
	width:0.4vw;
	margin-top:1vh;
	float:left;
	margin-left:0.2vh;
}