.hamburger-menu-wrap {
  position: relative;
  height: 32px;
  width: 32px;
  z-index: 5;
}

/* Toggler */
.toggler {
  position: absolute;
  width: 32px;
  height: 32px;
  z-index: 6;
  cursor: pointer;
  opacity: 0;
}

/* hamburger */
.hamburger {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hamburger div {
  width: 100%;
  height: 2px;
  background-color: white;
  position: relative;
  z-index: 1;
  transition: all 0.5s ease-in-out;
}
.hamburger div::before,
.hamburger div::after {
  content: '';
  width: inherit;
  height: inherit;
  background-color: inherit;
  position: absolute;
  top: -10px;
  z-index: 1;  
  }
  .hamburger div::after {
  top: 10px;
}

/* menu */
.menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(0, 0, 0, 0.9);
  visibility: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.menu ul {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  row-gap: 2rem;
}
.menu ul li a:hover {
  color: orange;
}

/* Toggler Animation - turns lines into X*/
.toggler:checked + .hamburger > div{
  transform: rotate(135deg);
}
.toggler:checked + .hamburger > div::before,
.toggler:checked + .hamburger > div::after{
  top: 0;
  transform: rotate(90deg);
}
/* Rotate on hover when checked */
.toggler:checked:hover + .hamburger > div {
  transform: rotate(315deg);
}

/* to make the menu visible  */
.toggler:checked ~ .menu {
  visibility: visible;
}