.header {
  display: flex;
  position: fixed;
  width: 100%;
  height: 80px;
  z-index: 100;
}
.header .container {
  display: flex;
}
.header .container .header__burger {
  display: none;
}
.header .container a {
  transition: 0.3s;
  font-size: var(--step-0, 1em);
}
.header .container .header__spacer {
  flex-grow: 1;
}
.header .container .header__sitename {
  font-size: var(--step-2, 1.4em);
}
.header .container .header__nav {
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.header .container .header__nav li {
  margin-right: calc(2 * var(--space));
}
.header .container .header__nav li a:after {
  content: "";
  display: block;
  margin: 0 auto 0;
  height: 0.125em;
  width: 0;
  background-color: var(--accent-2);
  background-image: var(--accent-2);
  transition: width 0.3s;
}
.header .container .header__nav li a:hover:after, .header .container .header__nav li a[aria-current]:after {
  width: 100%;
}
.header .container .header__nav li a:hover, .header .container .header__nav li a[aria-current] {
  color: var(--accent-2);
}

@media (max-width: 700px) {
  .header .container {
    align-items: center;
  }
  .header .container .header__burger {
    display: block;
    overflow: hidden;
    color: var(--color-light);
  }
  .header .container .header__burger .hamburger {
    transition: translate 1s, rotate 1s;
  }
  .header .container .header__burger[aria-expanded=true] .hamburger {
    translate: 3px 0;
    rotate: 0.125turn;
  }
  .header .container .header__burger .line {
    transition: 1s;
    stroke-dasharray: 60 31 60 300;
  }
  .header .container .header__burger[aria-expanded=true] .line {
    color: var(--color-dark);
    stroke-dasharray: 60 105 60 300;
    stroke-dashoffset: -90;
  }
  .header .container .header__nav {
    display: block;
    justify-content: initial;
    position: fixed;
    top: 0;
    right: -250px;
    bottom: 0;
    width: 250px;
    transition: right 0.5s;
    padding: 80px 20px 20px;
    background-color: var(--background);
  }
  .header .container .header__nav[aria-expanded=true] {
    right: 0;
  }
  .header .container .header__nav li + li {
    margin-top: 15px;
  }
  .header .container .header__nav li {
    display: flex;
  }
  .header .container .header__nav li a {
    margin: auto;
    color: var(--color-dark);
  }
  .header .container .header__nav li a:after {
    background-color: var(--accent);
    background-image: var(--accent);
  }
  .header .container .header__nav li a:hover, .header .container .header__nav li a[aria-current] {
    color: var(--accent);
  }
}