button.hamburger {
  border: none;
  margin: 0;
  padding: 0;
  overflow: visible;
  text-align: unset;
  background: transparent;

  /* inherit font & color from ancestor */
  color: inherit;
  font: inherit;

  /* Normalize `line-height`. Cannot be changed from `normal` in Firefox 4+. */
  line-height: normal;

  /* Corrects font smoothing for webkit */
  -webkit-font-smoothing: inherit;
  -moz-osx-font-smoothing: inherit;

  /* Corrects inability to style clickable `input` types in iOS */
  -webkit-appearance: none;
}

.hamburger-container {
  margin-left: auto;
  position: relative;
}

.hamburger {
  cursor: pointer;
  position: relative;
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
}

.hamburger:focus {
  outline-style: none;
}

.hamburger .icon,
.hamburger .icon::before,
.hamburger .icon::after {
  width: 35px;
  height: 4px;
  background: black;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.2s;
  position: absolute;
}

.hamburger .icon {
  top: 10px;
}
.hamburger .icon::before {
  content: '';
  top: -10px;
}

.hamburger .icon::after {
  content: '';
  top: 10px;
}

.hamburger-nav {
  margin-top: 20px;
  background: #eee;
  position: absolute;
  right: 0%;
  display: flex;
  flex-direction: column;
}

.hamburger-nav > div {
  padding: 10px;
}
.hamburger .open {
  background: transparent;
}

.hamburger .open::before {
  transform: rotateZ(45deg) translate(1px, 11px);
}

.hamburger .open::after {
  transform: rotateZ(-45deg) translate(3px, -14px);
}