*{
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     font-family: "Arial", sans-serif;
   }
   body{
     width: 100%;
     height: 100vh;
     display: flex;
     align-items: center;
     justify-content: center;
   }
   ::selection{
     color: #fff;
     background: #56baed;
   }
   .wrapper{
     width: 380px;
     padding: 40px 30px 50px 30px;
     border-radius: 5px;
     text-align: center;
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
   }
   .wrapper header{
     font-size: 27px;
     font-weight: 550;
   }
   .wrapper form{
     margin: 40px 0;
   }
   form .field{
     width: 100%;
     margin-bottom: 20px;
   }
   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{
     height: 50px;
     width: 100%;
     position: relative;
   }
   form input{
     width: 100%;
     height: 100%;
     outline: none;
     padding: 0 45px;
     font-size: 18px;
     border-radius: 5px;
     border: 1px solid #e1d9ec;
     border-bottom-width: 2px;
     transition: all 0.2s ease;
   }
   form .field input:focus,
   form .field.valid input{
     border-color: #56baed;
   }
   form .field.shake input,
   form .field.error input{
     border-color: #dc3545;
   }
   .field .input-area svg{
     position: absolute;
     top: 50%;
     width: 18px;
     height: 18px;
     pointer-events: none;
     transform: translateY(-50%);
   }
   .input-area .icon{
     left: 15px;
     fill: #bfbfbf;
     transition: fill 0.2s ease;
   }
   .input-area .error-icon{
     right: 15px;
     fill: #dc3545;
   }
   form input:focus ~ .icon,
   form .field.valid .icon{
     fill: #56baed;
   }
   form .field.shake input:focus ~ .icon,
   form .field.error input:focus ~ .icon{
     fill: #bfbfbf;
   }
   form input::placeholder{
     color: #bfbfbf;
     font-size: 17px;
   }
   form .field .error-txt{
     color: #dc3545;
     text-align: left;
     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;
   }
   .wrapper a{
     color: #56baed;
     text-decoration: none;
   }
   .wrapper a:hover{
     text-decoration: underline;
   }
   form input[type="submit"]{
     height: 50px;
     margin-top: 30px;
     color: #fff;
     padding: 0;
     border: none;
     background: #56baed;
     cursor: pointer;
     border-bottom: 2px solid rgba(0,0,0,0.1);
     transition: all 0.3s ease;
   }
   form input[type="submit"]:hover{
     background: #39ace7;
   }