input{
  width: 50%;
  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;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: center;
  &: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);
          }
        }
      }
    }
  }
}
input#submit {
    background-color: #8f663645;
    border-radius: 8px;
}