.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 2;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}
#openNav{
    font-size:5vw;
    cursor:pointer;
    position: fixed;
    z-index:1;
    left: 0;
}
.menu-btn {
 text-align: left;
 position: fixed;
 left:0%;
 top: 2%;
 display: flex;
 justify-content: center;
 z-index: 2;
 align-items: center;
 width: 80px;
 height: 80px;
 color: red;
 cursor: pointer;
 transition: all .5s ease-in-out;
}

.menu-btn__burger {
  width: 50px;
  height: 6px;
  background: #808080;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(255,101,47,.2);
  transition: all .5s ease-in-out;
}
.menu-btn__burger::before,
.menu-btn__burger::after {
  content: '';
  position: absolute;
  width: 50px;
  height: 6px;
  background: #808080;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(255,101,47,.2);
  transition: all .5s ease-in-out;
}
@media screen and (max-width:800px){
    .menu-container {
  position: fixed;
  left: 1%;
  top: 3%;
  z-index: 2;
  width: 65px; /* Adjust the width as needed */
  height: 65px; /* Adjust the height as needed */
  background: rgba(255, 255, 255, 0.5); /* Transparent grey color */
  display: flex;
  border-radius: 10px;
  justify-content: center;
  align-items: center;
}
.menu-btn {
position:relative;
}
.menu-btn__burger, .menu-btn__burger::before,
.menu-btn__burger::after {
    background:black;
    width:35px;
    height: 5px;
}
}
.menu-btn__burger::before {
  transform: translateY(-16px);
}
.menu-btn__burger::after {
  transform: translateY(16px);
}
/* ANIMATION */
.menu-btn.open .menu-btn__burger {
  transform: translateX(-50px);
  background: transparent;
  box-shadow: none;
}
.menu-btn.open .menu-btn__burger::before {
  transform: rotate(45deg) translate(35px, -35px);
}
.menu-btn.open .menu-btn__burger::after {
  transform: rotate(-45deg) translate(35px, 35px);
}