*{margin:0;padding:0;box-sizing:border-box;font-family:Arial,Helvetica,sans-serif}:root{--main: #d90429;--secondary: #ef233c;--accent: #0224ce;--dark-grey: #8d99ae;--light: #edf2f4}#root{display:grid;place-items:center;height:100vw;height:100vh;background-color:#111;background-image:url(/react-signup-form/assets/stacked-waves-haikei-b2229b26.svg);background-size:cover}.card-container{display:flex;justify-content:center;flex-direction:column;font-size:1rem;padding:3em;width:clamp(375px,85%,425px);background:rgba(255,255,255,.119);border-radius:16px;backdrop-filter:blur(2.8px);-webkit-backdrop-filter:blur(2.8px);border:1px solid rgba(255,255,255,.221)}.card-container h1{color:var(--light);font-family:Georgia,Times New Roman,Times,serif}form input{width:100%;height:40px;background-color:#515151;border:none;padding:0 1em;color:var(--light)}form input:focus{outline:none}form .field{position:relative;display:flex;border-bottom:3px #fff dotted;isolation:isolate;margin-top:4em}form .field:after{content:"";width:100%;height:100%;position:absolute;top:0;left:0;z-index:-1;background:linear-gradient(90deg,var(--main),var(--accent));padding:1px;transform:scaleX(0);transform-origin:0;transition:transform .3s ease}form .field label{position:absolute;font-size:1.05em;top:25%;left:.8em;cursor:pointer;transition:transform .3s ease;color:var(--light)}form .field:focus-within label,form input:not(:placeholder-shown)+label{transform:translate(-10px,-35px) scale(.8)}form .field:focus-within:after{transform:scaleX(1)}form .password-strength{display:flex;width:100%;height:1.75em;gap:.3em;margin:2em 0 1em}form .password-strength .bar{flex-basis:25%}form .password-strength-params ul li{color:var(--light);list-style:none}.bar{box-shadow:inset 0 1.75em #515151;transition:.3s}.bar.shown{box-shadow:none}.bar:nth-child(1){background:linear-gradient(90deg,red,orangered)}.bar:nth-child(2){background:linear-gradient(90deg,orangered,orange)}.bar:nth-child(3){background:linear-gradient(90deg,orange,yellow)}.bar:nth-child(4){background:linear-gradient(90deg,yellow,yellowgreen)}form .submit{margin-top:2em;padding:1px;background:linear-gradient(45deg,var(--main),var(--accent))}form .submit input{background-color:#515151;cursor:pointer;position:relative;background:linear-gradient(45deg,var(--main),var(--accent))}form .field button{background-color:#515151;border:0;cursor:pointer;padding:0 .8em}@media screen and (max-width: 400px){.card-container{height:100%;justify-content:flex-start;font-size:1.2rem;width:100vw;padding:1.5em;background:transparent;border-radius:0;box-shadow:none;backdrop-filter:0;-webkit-backdrop-filter:0;border:none}}