@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
*{

  font-family: "Poppins", sans-serif;
}
body{
  width: 100%;
  height: 100vh;
}
::selection{
  background: white;
}

form .field{
  width: 100%;
  
}
form .field.shake{
  animation: shake 0.3s ease-in-out;
}
@keyframes shake {
  0%, 100%{
    margin-left: 0px;
  }
  20%, 80%{
    margin-left: -12px;
  }
  40%, 60%{
    margin-left: 12px;
  }
}
form .field .input-area{
  width: 100%;
}
form input{
  width: 100%;
  height: 100%;
  outline: none;
  font-size: 18px;
}

.field .input-area i{
  font-size: 18px;
  pointer-events: none;
  transform: translateY(-50%);
}
.input-area .icon{

  transition: color 0.2s ease;
}
.input-area .error-icon{
  right: 15px;
}

form .field.valid .icon{
  color: orangered;
}
form .field.shake input:focus ~ .icon,
form .field.error input:focus ~ .icon{
  color: #bfbfbf;
}
form input::placeholder{
  color: #bfbfbf;
  font-size: 17px;
}
form .field .error-txt{
  margin-top: 5px;
}
form .field .error{
  display: none;
}
form .field.shake .error,
form .field.error .error{
  display: block;
}
form .pass-txt{
  text-align: left;
  margin-top: -10px;
}

form input[type="submit"]{
  height: 50px;
  margin-top: 30px;
  padding: 0;
  cursor: pointer;
  transition: all 0.3s ease;
}