.menu {
  position: fixed;
  top: 0;
  right: -100%;
  width: 100vw;
  height: 100vh;
  background-color: #0000008a;
  transition: right 0.3s ease-in-out;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: start;
  gap: 15px;
  padding: 20% 15px;
  color: white;
  z-index: 99999999999;
}
.menu > a {
  font-size: 22px;
  font-weight: 400;
}
@media screen and (min-width: 897px) {
  .menu {
    display: none;
  }
}
.menu.open {
  right: -45% !important;
  -webkit-box-shadow: -14px 2px 23px -2px rgba(34, 60, 80, 0.4);
  -moz-box-shadow: -14px 2px 23px -2px rgba(34, 60, 80, 0.4);
  box-shadow: -14px 2px 23px -2px rgba(34, 60, 80, 0.4);
}
.open_button {
  z-index: 999999999999;
  position: fixed;
  top: 40%;
  right: 0;
  transform: translateY(-50%);
  width: 30px;
  height: 75px;
  cursor: pointer;
  transition: right 0.3s ease-in-out;
  background: url("../../img/burger_icon.svg") no-repeat center, #0000008a;
  border-radius: 20px 0 0 20px;
  display: grid;
  place-content: center;
  -webkit-box-shadow: -14px 2px 23px -2px rgba(34, 60, 80, 0.4);
  -moz-box-shadow: -14px 2px 23px -2px rgba(34, 60, 80, 0.4);
  box-shadow: -14px 2px 23px -2px rgba(34, 60, 80, 0.4);
}
@media screen and (min-width: 897px) {
  .open_button {
    display: none;
  }
}
.open_button.open {
  right: 54.7% !important;
  background: url("../../img/cross_icon.svg") no-repeat center, #0000008a;
}