*{
    background-color: azure;
}
.button-one {
    font-size: 5vw;
    background-color: red;
    border: 5px dashed white;
    outline: none;
    padding:15px;
    margin-left: 90vw;
    box-shadow: 6pt 6pt 2pt black;
}
.button-one{
    background-color: beige;
    border: 5px dashed red;
}
.drawer-one {
    position: fixed;
    top: 0;
    left: 0;
    background: red;
    width: 20vw;
    height: 100vh;
    font-size: 22pt;
    transition: transform 2s;

}

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

}

.button-two {
    font-size: 5vw;
    background-color: blue;
    border: 5px dashed rgb(234, 234, 92);
    outline: none;
    padding: 15px;
    margin-top: 5vh;
    margin-left: 90vw;
    box-shadow: 6pt 6pt 2pt black;
}

.drawer-two {
    position: fixed;
    top: 20;
    left: 60;
    background: rgb(13, 0, 255);
    width: 10vw;
    height: 100vh;
    font-size: 22pt;
    transition: transform 5s;

}
.slide-the-menu {
   
    transform: translate(20vw);

}

.button-three {
    font-size: 5vw;
    background-color: rgb(75, 200, 43);
    border: 5px dashed rgb(163, 63, 235);
    outline: none;
    padding: 15px;
    margin-top: 5vh;
    margin-left: 90vw;
    box-shadow: 6pt 6pt 2pt black;
}

.slide-the-drawer-three {
    position: fixed;
    top: 0;
    left: 0;
    background: rgb(75, 200, 43);
    width: 15vw;
    height: 100vh;
    font-size: 22pt;
    transition: transform 2s;

}
.slide-the-drawer-three {
   
    transform: translate(20vw);

}

.button-four {
    font-size: 5vw;
    background-color: rgb(228, 150, 231);
    border: 5px dashed rgb(231, 48, 244);
    outline: none;
    padding: 15px;
    margin-top: 7vh;
    margin-left: 90vw;
    box-shadow: 6pt 6pt 2pt black;
    
}
.slide-the-drawer-four {
    position: fixed;
    top: 0;
    left: 0;
    background: rgb(231, 48, 244);
    width: 20vw;
    height: 100vh;
    font-size: 22pt;
    transition: transform 2s;
    

}
.slide-the-drawer-four {
   
    transform: translate(40vw);
    

}