body{
	background-color: black;
}

li{
	list-style-type: none;
}

/* Button One */
.Button-one{
	position: fixed;
	       z-index:100;
	font-size: 30pt;
	font-family: Futura;
	background-color: transparent;
	color: white;
	border: transparent;

}

.Button-one:hover{
	color:yellow;
	transform: rotate(45deg) scale(1.2);
    transition: transform 0.5s ease-in-out;
}
.drawer-one:hover{
	color:yellow;	
}
.drawer-one{
	position: fixed;
	       top:0;
	       left:-20vw;
	color: white;
	width: 20vw;
	height: 100vh;
	font-size: 50pt;
	font-family: Futura;
	text-decoration: none;
	transition: transform 2s;
	margin-top: 65vh;

}

.slide-the-drawer-one{
	transition: transform 1s;
	transform: translate(20vw);

}


/* Button Two */
.Button-two {
    position: fixed;
    margin-left: 50vw;
    z-index: 100;
    font-size: 30pt;
    font-family: Futura;
    background-color: transparent;
    color: white;
    border: transparent;
}

.Button-two:hover {
    color: red;
    transform: rotate(45deg) scale(1.2);
    transition: transform 1s ease-in-out;
}

.drawer-two:hover{
	color:red;	
}

.drawer-two {
    position: fixed;
    top: 0;
    left: -20vw;
    color: white;
    width: 20vw;
    height: 100vh;
    font-size: 50pt;
    font-family: Futura;
    text-decoration: none;
    transition: transform 2s;
    margin-top: 65vh;
}

.slide-the-drawer-two {
    transition: transform 1s ease-in-out;
    transform: translate(50vw);
    animation-name: slideInTwo;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
}

@keyframes slideInTwo {
    from {
        transform: translate(-20vw);
    }
    to {
        transform: translate(50vw);
    }
}

/* Button Three */
.Button-three {
    position: fixed;
    margin-left: 96vw;
    z-index: 100;
    font-size: 30pt;
    font-family: Futura;
    background-color: transparent;
    color:rgb(178, 255, 6);
    border: transparent;
}

.Button-three:hover {
    color: black;
    transform: scale(1.5);
    transition: transform 0.5s ease-in-out;
}
.drawer-three:hover{
	color:black;	
}
.drawer-three {
    position: fixed;
    top: 0;
    left: -20vw;
    color: rgb(178, 255, 6);
    width: 20vw;
    height: 100vh;
    font-size: 50pt;
    font-family: Futura;
    text-decoration: none;
    transition: transform 2s;
    margin-top: 65vh;
}

.slide-the-drawer-three {
    transition: transform 1s ease-in-out;
    transform: translate(96vw);
    animation-name: slideInThree;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
}

@keyframes slideInThree {
    from {
        transform: translate(-20vw);
         
    }
    to {
        transform: translate(96vw);

    }
}