.hamburger {
  --hamburger-width: 25px;
  --hamburger-height: 5px;
  --hamburger-time: 500ms;
  --hamburger-degree: 45deg;
  cursor: pointer;
  /* background: gray; */
  width: var(--hamburger-width);
  height: calc(var(--hamburger-height) + var(--hamburger-height) + var(--hamburger-height) + var(--hamburger-height) + var(--hamburger-height));
}

  .hamburger .step {
  background-color: hsla(234, 100%, 50%, 1);
  position: absolute;
    width: 100%;
    height: var(--hamburger-height);
}

  .hamburger .hamburger-top {
  background-color: hsla(234, 100%, 50%, 1);
  top: 0;
  left: 0;
    transition: var(--hamburger-time);
}

  .hamburger .hamburger-middle {
    /* background-color: black ; */
    left: 0;
    top: calc(var(--hamburger-height) * 2);
    transform-origin: right;
    transform: scale(1, 1);
    transition: transform  var(--hamburger-time);
  }

  .hamburger .hamburger-bottom {
    /* background-color: hotpink ; */
    bottom: 0;
    left: 0;
    transition: var(--hamburger-time);
  }

  .hamburger.open {
    position: fixed;
    top: 1.00rem;
    right: 1.00rem;
  }

  .hamburger.open .hamburger-top {
      transform-origin: top left;
      transform: rotate(var(--hamburger-degree))scale(1.2, 1);
      transition: transform var(--hamburger-time);
    }

  .hamburger.open .hamburger-middle {
      transform-origin: right;
      transform: scale(0, 1);
      transition: transform var(--hamburger-time);
    }

  .hamburger.open .hamburger-bottom {
      transform-origin: bottom left;
      transform: rotate(calc(-1 * var(--hamburger-degree))) scale(1.2, 1);
      transition: transform var(--hamburger-time);
    }



/*# sourceMappingURL=hamburger-button.css.map*/