body { background: linear-gradient( to right, var(--bg-color1) 0%, var(--bg-color2) 100% ); } .container { overflow: hidden; background: #fff; max-width: 350px; width: 100%; padding: 25px 30px; border-radius: 5px; box-shadow: 0 10px 10px rgba(0, 0, 0, 0.15); } .container form .input-box { width: 100%; height: 45px; margin-top: 25px; position: relative; margin-bottom: 2rem; } .container form .input-box input { width: 100%; height: 100%; padding-inline: 10px; outline: none; font-size: 16px; border: none; } .container form .underline::before { content: ""; position: absolute; height: 2px; width: 100%; background: #ccc; left: 0; bottom: 0; } .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 0; } .container .option { font-size: 14px; text-align: center; }