body{
	background-color: green;

}

h1{
 		color:pink;
 		font-family: Helvetica;
 		font-size: 50pt;

 	}

 button{
 	font-size: 50pt;
 	border: 2pt solid black;
 	border-radius: 20%;
 	background-color: yellow;
 }

 button#hamburgerbutton{
    z-index:2;
    position:fixed;
    top:0;
    font-size: 30pt;
 }
header {
    margin top:100px;
}
aside#sidedrawermenu{
	background-color: yellow;
	width: 100vw;
	height: 100vh;
	position:fixed;
	top:0;
	left:-100vw;
	transition:transform 1s;
}
.slidethedrawer {
	transform:translate(100vw);
}
button#arrowdownbutton{
    z-index:2;
    position:fixed;
    top:0;
    left:50vw;
    font-size:30pt;
 }
aside#topdrawermenu{
    background-color: pink;
    width:100vw;
    height:100vh;
    position:fixed;
    top:-100vh;
    transition:transform 1s;
}
.topdrawer{
    transform:translateY(100vh);
}

button#arrowupbutton{
    z-index:2;
    position:fixed;
    top:90vh;
    left:50vw;
    font-size: 30pt;
}
aside#bottomdrawermenu{
    background-color: orange;
    width:100vw;
    height:100vh;
    position:fixed;
    top:100vh;
    transition:transform 1s;
}

.slideupdrawer{
    transform:translateY(-100vh);
}

button#arrowleftbutton{
    z-index:2;
    position:fixed;
    top:0vh;
    left:90vw;
    font-size: 30pt;
}

aside#leftsidedmenu{
    background-color: white;
    width:100vw;
    height:100vh;
    position:fixed;
    top:0;
    right:-100vw;
    transition:transform 1s;
}
.slideleftdrawer{
    transform:translateX(-100vw);
}
 button:hover {
 	background-color: yellow;
 	border-color: pink;
 	box-shadow: 10px 10px 10px black;
 }

 .nightmode {
 	background-color: black;
 	color:white;
 }
 .daymode{
 	background-color: lightblue;
 	color:white;
 }
 .pinkmode{
 	color:hotpink;
 	background-color: lightpink;
 	font-size: 10em;
 }
 .sunsetmode{
 	background-color: orange;
 	color:darkorange;
 }
 .greymode{
 	background-color: grey;
 	color:dimgrey;
 }