*{margin:0;padding:0;box-sizing:border-box}body{display:flex;justify-content:center;align-items:center;min-height:100vh;background-color:#4c1c8f}.wrapper{width:420px;background-color:#6a5acd;color:#fff;border-radius:10px;padding:30px 40px;transition:3ms}.wrapper h1{font-size:36px;text-align:center}.wrapper .input-box{position:relative;width:100%;height:50px;margin:30px 0}.input-box input{width:100%;height:100%;background:transparent;border:2px solid rgba(225,255,255,.2);outline:none;border-radius:40px;font-size:16px;color:#fff;padding:20px 45px 20px 20px}.input-box input::placeholder{color:#fff}.input-box .icon{position:absolute;right:20px;top:50%;transform:translateY(-50%);font-size:16px}.wrapper .remember-forgot{display:flex;justify-content:space-between;margin:-15px 0 15px}.remember-forgot{accent-color:#fff;margin-right:4px}.remember-forgot{color:#fff;text-decoration:none}.remember-forgot a:hover{text-decoration:underline}.wrapper button{width:100%;height:45px;background-color:#fff;border:none;outline:none;border-radius:40px;box-shadow:0 0 10px #0000001a;cursor:pointer;font-size:16px;color:#333;font-weight:700}.wrapper .register-link{font-size:14.5px;text-align:center;margin:20px0 15px}.register-link p a{color:#fff;text-decoration:none;font-weight:600}.register-link p a:hover{text-decoration:underline}.valide{border-radius:40px;border:1px solid green}.invalide{border-radius:40px;border:1px solid red}