@media screen and (max-width: 600px) {
  .hamburger-lines {
    display: block;
    height: 46px;
    width: 62px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-left: auto;
    padding: 12px;
  }

  .hamburger-lines .line {
    display: block;
    height: 8px;
    width: 100%;
    border-radius: 10px;
    background-color: whitesmoke;
  }

  .checkbox {
    visibility: hidden;
  }

  .hamburger-lines .line1 {
    transform-origin: 0% 0%;
    transition: transform 0.4s ease-in-out;
  }

  .hamburger-lines .line2 {
    transition: transform 0.2s ease-in-out;
  }

  .hamburger-lines .line3 {
    transform-origin: 0% 100%;
    transition: transform 0.4s ease-in-out;
  }

  .nav-container input[type="checkbox"]:checked ~ .menu-items {
    transform: translateX(0);
  }

  .nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line1 {
    transform: rotate(45deg);
  }

  .nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line2 {
    transform: scaleY(0);
  }

  .nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line3 {
    transform: rotate(-45deg);
  }
}