.main-menu-container{
  position: fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  z-index: 99999;

  background-color:rgba(0,0,0,0.3);
  backdrop-filter: saturate(180%) blur(10px);
  opacity: 0;
  transition:all ease 0.2s;
}
.main-menu-container.main-menu-hide{
  opacity: 0;
}

.main-menu-container.main-menu-show{
  opacity: 1;
  
}
  
.main-menu-container .main-menu-list{
  background-color: white;
  max-width:300px;
  height: 100%;
  transition:all ease 0.5s;
}
.main-menu-container .main-menu-list.main-menu-show{
  margin-left:0px;
}

.main-menu-container .main-menu-list.main-menu-hide{
  margin-left:-300px;
}
  
  
.main-menu-close{
  position: absolute;
  right:2%;
  color:white;
  font-size: 3rem;
}