.hamburger {
  cursor: pointer;
  position: fixed;
  top: 25px;
  right: 0;
  z-index: 1020;
}

.line {
  stroke-width: 6;
  stroke-linecap: round;
  stroke: var(--color-black);
  transition: all 300ms;
}

.top {
  transform-origin: 26px 40px;
}

.middle {
  stroke-dasharray: 60 60;
}

.bottom {
  transform-origin: 26px 60px;
}

.hamburger.cross .line {
  stroke: var(--color-orange);
}

.hamburger.cross .top {
  transform: rotate(45deg);
}

.hamburger.cross .middle {
  stroke-dasharray: 1 60;
  stroke-dashoffset: -30;
}

.hamburger.cross .bottom {
  transform: rotate(-45deg);
}