.open_menu_button {
  background-color: transparent;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 0;
  position: absolute;
  top: 0px;
  right: 1vh;
}

.line {
  fill: none;
  stroke: red;
  stroke-width: 6;
  transition: stroke-dasharray 400ms cubic-bezier(0.4, 0, 0.2, 1),
              stroke-dashoffset 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

.line1 {
  stroke-dasharray: 60 300;
  stroke-width: 3;
}

.line2 {
  stroke-dasharray: 60 60;
  stroke-width: 3;
}

.line3 {
  stroke-dasharray: 60 207;
  stroke-width: 3;
}

.opened .line1 {
  stroke-dasharray: 90 207;
  stroke-dashoffset: -134;
  stroke-width: 3;
}

.opened .line2 {
  stroke-dasharray: 1 60;
  stroke-dashoffset: -30;
  stroke-width: 3;
}

.opened .line3 {
  stroke-dasharray: 90 207;
  stroke-dashoffset: -134;
  stroke-width: 3;
}

@media screen and (min-width: 1000px) {
  .open_menu_button {
    display: inline;
  }
}