#menu-icon {
  display: flex;
  flex-direction: column;
  width: 70px;
  cursor: pointer;
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 30;
}

label .span {
  background: #1b1b1b;
  border-radius: 10px;
  height: 7px;
  margin: 7px 0;
  transition: 0.4s cubic-bezier(0.68, -0.6, 0.32, 1.6);
  z-index: 30;
}

.span:nth-of-type(1) {
  width: 50%;
}

.span:nth-of-type(2) {
  width: 100%;
}

.span:nth-of-type(3) {
  width: 75%;
}

input[type="checkbox"] {
  display: none;
}

input[type="checkbox"]:checked ~ span:nth-of-type(1) {
  transform-origin: bottom;
  transform: rotatez(45deg) translate(8px, 0px);
  background: #fcfcfc;
}

input[type="checkbox"]:checked ~ span:nth-of-type(2) {
  transform-origin: top;
  transform: rotatez(-45deg);
  background: #fcfcfc;
}

input[type="checkbox"]:checked ~ span:nth-of-type(3) {
  transform-origin: bottom;
  width: 50%;
  transform: translate(30px, -11px) rotatez(45deg);
  background: #fcfcfc;
}

.iconBackground {
  background-color: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(10px);
  width: 70px;
  height: 65px;
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 20;
}