*{margin:0;padding:0;box-sizing:border-box;font-family:Poppins,sans-serif}body{display:grid;height:100vh;width:100%;place-items:center;background:linear-gradient(to right,#4c93dc 0,#93beea 100%)}::selection{background:#93beea}.container{background:#fff;max-width:400px;width:100%;padding:10px 30px;border-radius:5px;box-shadow:0 10px 10px rgba(0,0,0,.15)}.container form .title{font-size:30px;font-weight:600;margin:20px 0 10px;position:relative}.container form .title:before{content:"";position:absolute;height:4px;width:33px;left:0;bottom:3px;border-radius:5px;background:linear-gradient(to right,#4c93dc 0,#5d9ddf 100%)}.container form .input-box{width:100%;height:50px;margin-top:30px;position:relative}.container form .input-box input{width:100%;height:100%;outline:0;font-size:18px;border:none}.container form .underline::before{content:"";position:absolute;height:2px;width:100%;background:#ccc;left:0;bottom:0}.container form .underline::after{content:"";position:absolute;height:2px;width:100%;background:#4c93dc;left:0;bottom:0;transform:scaleX(0);transform-origin:left;transition:.3s}.container form .input-box input:focus~.underline::after,.container form .input-box input:valid~.underline::after{transform:scaleX(1);transform-origin:left}.container form .button{margin:40px 0 20px}.container .input-box input[type=submit]{background:#4c93dc;font-size:18px;color:#fff;border-radius:5px;cursor:pointer}.container .input-box input[type=submit]:hover{background:linear-gradient(to left,#4484c6 0,#5d9ddf 100%)}.container .option{font-size:14px;text-align:center}.container .option div{display:flex;align-items:center}