#menu-toggle {
  display: none;
}

@media screen and (max-width: 767px) {
  .menu-btn {
      position: fixed;
      top: 15px;
      right: 15px;
      width: 40px;
      height: 30px;
      cursor: pointer;
      z-index: 999;
  }

  .menu-btn::after {
      content: "MENU";
      font-size: 14px;
  }

  .menu-btn span {
      display: block;
      width: 100%;
      height: 5px;
      background: var(--main-color);
      margin: 6px 0;
      transition: 0.3s;
  }

  .menu-btn span:nth-child(3) {
      margin-bottom: 0;
  }

  .menu {
      position: fixed;
      top: 0;
      right: -100%;
      width: 100%;
      height: 100vh;
      background: white;
      color: black;
      padding: 60px 20px;
      transition: 0.3s;
  }

  .menu a {
      display: block;
      color: white;
      text-decoration: none;
      padding: 10px 0;
  }



  #menu-toggle:checked~.menu {
      right: 0 !important;
      z-index: 990;
  }

  #menu-toggle:checked~.menu-btn span:nth-child(1) {
      transform: rotate(45deg) translate(5px, 5px);
  }

  #menu-toggle:checked~.menu-btn span:nth-child(2) {
      opacity: 0;
  }

  #menu-toggle:checked~.menu-btn span:nth-child(3) {
      transform: rotate(-45deg) translate(10px, -10px);
  }

}