.menu-button {
    border: 0;
     background-color: #fff; 
    /* padding: 15px; */
    /* border-radius: 50px; */
    margin: 10px;
    /* width: 60px; */
    height: 40px;
    position: fixed;
    left: 0em;
    top: 0em;
    z-index: 999999;
    outline: none;
    cursor: pointer;
}
.menu-button:hover,
.menu-button.active {
  background-color: #fff;
}
.menu-button:hover .menu-bar,
.menu-button.active .menu-bar {
  background-color: #686969;
}
.menu-button .menu-bar {
  width: 30px;
  height: 2px;
  background-color: #686969;
  position: relative;
  margin: 4px 0;
  -webkit-transform-origin: center center;
          transform-origin: center center;
}
#menu {
  width: 0%;
  height: 0%;
  position: fixed;
  background-color: #fff;
  top: -10%;
  left: -10%;
  -webkit-transform: translate(10%, 10%);
          transform: translate(10%, 10%);
  z-index: -1;  
}

.menu-nav {
  list-style: none;
  text-align: center;
  position: absolute;
  top: 30%;
  left: 50%;
  -webkit-transform: translate(-50%, -30%);
  transform: translate(-50%, -30%);
  width: fit-content;
  font-size: 1.5em;
  overflow: hidden;
  padding-inline-start: 0px;
}
.menu-nav a {
  text-decoration: none;
  color: #686969;
  padding: 10px;
  display: block;
      line-height: 1em;
  opacity: 0;
}
.menu-nav a:hover {
  color: #f5a644;
}