input{
  width: 50%;
  display: flex;
  padding: 15px;
  background-color: white;
  border: 2px solid black;
  color: #111;
  font-size: 15px;
  box-shadow: 3px 1px 0px 2px, 0px -1px 0px 2px rgba(0, 0, 0, 0.62);
  height: 58px;    
  transform: skew(-3deg, 1deg);
  font-family: 'Knewave', cursive;
  text-align: center;
  letter-spacing: 2px;
  text-transform: uppercase;
  &:focus,
  &:valid{
    outline: none;
    ~ ul li{
      @for $i from 1 through 6 {
        &:nth-child(#{$i}){
          &::before{
            filter: blur(20px);
            transform: translate(0, -35px) rotate(-210deg);
          }
          &::after{
            filter: blur(0);
            transform: scale(1) rotate(0);
          }
        }
      }
      @for $i from 1 through 6{
        &:nth-child(#{$i}){
          &::after{
            transition-delay: 200ms + ($i * 200ms);
          }
        }
      }
    }
  }
}

body
{
  background-color:#b2b9ff99;
}
#nav_container
{
  width:600px;
  height:70px;
  margin:0 auto;
  border-radius:10px;
  text-align:center;
  margin-top:60px;
  box-shadow:0px 3px 0px #1F5A87, 0px 0px 7px black;
}
nav span
{
  margin-left:40px;
  font-size:20px;
  color:white;
  font-family:sans-serif;
  position:relative;top:22px;left:-15px;
  z-index:1;
  padding:50px 0px 50px 0px;
  cursor:pointer;
}
nav span:active
{
  opacity:0.3;
}
#selector
{
  height:100%;
  width:80px;
  background:#f76da0;
  position:relative;top:-24px;left:394px;
  z-index:0;
}

.pageContent {
padding: 5px;
background: #f6f6f6;
margin: 10px 0;
border: 1px solid #b6b6b6;
border-radius:2px;
font-family: Verdana, Tahoma, Aral, sans-serif;
}