a {
  color: inherit;
  cursor: pointer;
  text-decoration: none
}

a:hover {
  opacity: 0.8
}

.nav-toggle {
  cursor: pointer;
  height: 30px;
  left: 12px;
  position: fixed;
  top: 20px;
  width: 30px;
  z-index: 200000
}

.nav-toggle:hover {
  opacity: 0.8
}

.nav-toggle .nav-toggle-bar, .nav-toggle .nav-toggle-bar::after, .nav-toggle .nav-toggle-bar::before {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  background: #707071;
  content: "";
  height: 3px;
  transition: all 0.5s;
  width: 100%
}

.nav-toggle .nav-toggle-bar {
  margin-top: 0
}

.nav-toggle .nav-toggle-bar::after {
  margin-top: 0.5rem
}

.nav-toggle .nav-toggle-bar::before {
  margin-top: -0.5rem
}

.nav-toggle.expanded .nav-toggle-bar {
  background: transparent
}

.nav-toggle.expanded .nav-toggle-bar::after, .nav-toggle.expanded .nav-toggle-bar::before {
  background: #fff;
  margin-top: 0
}

.nav-toggle.expanded .nav-toggle-bar::after {
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg)
}

.nav-toggle.expanded .nav-toggle-bar::before {
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg)
}

.nav {
  background: #171a1e;
  color: #fff;
  cursor: pointer;
  display: flex;
  font-size: 1.5rem;
  height: 100vh;
  left: -120%;
  padding: 4rem 2rem 2rem 12px;
  position: fixed;
  top: 0;
  transition: all 0.5s;
  width: 100%;
  z-index: 1000
}

.nav.expanded {
  left: 0
}

.nav ul {
  list-style: none;
  margin: auto 0;
  padding: 0
}