header
  input#navi[type="checkbox"]
  label[for="navi"]
    .dots
    .dots
    .dots
    .dots
    .dots
    .dots
    .dots
    .dots
    .dots

header {
  width: 100%;
  height: 80px;
  #navi {
    display: none;
    &:checked {
      ~ label {
        transform: rotate(225deg);
        .dots:nth-of-type(1) { filter: opacity(0); }
        .dots:nth-of-type(2) { transform: scaleY(4.75); }
        .dots:nth-of-type(3) { filter: opacity(0); }
        .dots:nth-of-type(4) { transform: scaleX(4.75); }
        .dots:nth-of-type(5) { filter: opacity(0); }
        .dots:nth-of-type(6) { transform: scaleX(4.75); }
        .dots:nth-of-type(7) { filter: opacity(0); }
        .dots:nth-of-type(8) { transform: scaleY(4.75); }
        .dots:nth-of-type(9) { filter: opacity(0); }
      }
    }
  }
  label {
    cursor: pointer;
    position: fixed;
    top: 32px;
    right: 32px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: space-between;
    width: 26px;
    height: 26px;
    transition: .5s;
    .dots {
      width: 6px;
      height: 6px;
      background-color: black;
      transition: .5s;
      &:nth-of-type(3n+2) {
        margin: 0 4px;
      }
      &:nth-of-type(2) { transform-origin: top; }
      &:nth-of-type(4) { transform-origin: left; }
      &:nth-of-type(6) { transform-origin: right; }
      &:nth-of-type(8) { transform-origin: bottom; }
    }
  }
}