*{
	margin:0;
	padding:0;
	list-style-type: none;
}

body{
	background-color: teal;
}

button {
	line-height: 1.20em;
	position: fixed;
	font-size:5vw;
	border: .3vw solid black;
	background-color: white; 
	margin:4vw 0 0 2vw;
	padding: 0 .80vw 0 .80vw;
	box-shadow: 0.5vw 0.5vw 0.5vw black;
	border-radius:10%;
}

button:hover {
	color:white;
	border-color:white;
	background-color:teal;
}



nav{
	font-family: Arial, sans-serif;
	position: fixed;
	font-size: 2vw;
	color:white;
	background-color: grey;
	top:9vw;
	left:-10vw;
	padding: 2vw;
	transition: transform .99s;
	 
}
div {
	line-height: 1.20em;
	position: fixed;
	font-size:5vw;
	border: .3vw solid black;
	background-color: white; 
	margin:76vw 0 0 40vw;
	padding: 0 10vw 0 10vw;
	box-shadow: 0.5vw 0.5vw 0.5vw black;
	border-radius:10%;
}
div:hover {
	color:white;
	border-color:white;
	background-color:teal;
}

article{
	font-family: Arial, sans-serif;
	position: fixed;
	font-size: 2vw;
	color:white;
	top:90vw;
	background-color: grey;
	left:42.5vw;
	padding: 7vw;
	transition: transform .99s;
	 
}
.slide-the-drawer {
	transform: translateX(10vw);


}
.slide-the-drawer2 {
	transform: translateY(-37.5vw);


}