*, *::before, *::after{
  box-sizing: border-box;
}

.nav-wrapper{
  position: relative;
  width: 100%;
  height: 100%;
}
.nav-wrapper::before,
.nav-wrapper::after{
  content: '';
  position: relative;
  display: block;
  width: 100%;
  height: 50%;
  background-color: var(--background);
}
.nav-wrapper::after{
  background-color: var(--alt);
}

.nav-wrapper nav{
  position: absolute;
  margin-top: -4em;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.navigation{
  max-width: 500px;
  border-radius: 8px;
  padding-right: 30px;
  line-height: 1.5;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.nav-wrapper ul{
  display: flex;
  justify-content: space-between;
  list-style: none;
  width: 0;
  overflow: hidden;
  transition: .5s cubic-bezier(.77,0,.18,1);
}

.nav-wrapper.active ul{
  width: 15em;
  margin-right: .7em;
}

nav a{
  color: var(--main);
  transition: .3s;
  font-size: .9rem;
}

nav a:hover{
  color: var(--alt);
}
.nav-toogler {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 48px;
  padding: 14px 5px;
  cursor: pointer;
}

.nav-wrapper:not(.active) .nav-toogler{
  margin-left: -10px;
}
.nav-mid {
  position: absolute;
  display: block;
  top: 20.5px;
  width: 30px;
  height: 3px;
  background-color: var(--main);
  transition: .2s cubic-bezier(.77,0,.18,1);
}
.nav-mid.active {
  opacity: 0;
}
.nav-toogler::before,
.nav-toogler::after{
  content: '';
  position: relative;
  display: block;
  width: 30px;
  height: 3px;
  background-color: var(--main);
  transition: .4s cubic-bezier(.77,0,.18,1);
}
.nav-toogler::after {
  margin-top: 10px;
}
.nav-wrapper.active .nav-toogler::before,
.nav-wrapper.active .nav-toogler::after{
  position: absolute;
  top: 50%;
  background-color: var(--main);
  transform: rotate(135deg);
}
.nav-wrapper.active .nav-toogler::after {
  transform: rotate(-135deg);
  margin-top: 0;
}

@media only screen and (min-width: 600px  ) {
  .nav-toogler {
  display: none;
  }
  .nav-wrapper ul {
    width: 17em;
  }
}