@import "https://fonts.googleapis.com/css2?family=Quicksand:wght@300&display=swap";.login-body{background:#0a0a0a;justify-content:center;align-items:center;width:100%;min-height:100vh;font-family:Quicksand,sans-serif;display:flex;overflow:hidden}.ring{justify-content:center;align-items:center;width:450px;height:450px;display:flex;position:relative}.ring i{border:2px solid #fff;transition:all .5s;position:absolute;inset:0}.ring i:first-child{border-radius:38% 62% 63% 37%/41% 44% 56% 59%;animation:6s linear infinite animate-ring}.ring i:nth-child(2){border-radius:41% 44% 56% 59%/38% 62% 63% 37%;animation:4s linear infinite animate-ring}.ring i:nth-child(3){border-radius:41% 44% 56% 59%/38% 62% 63% 37%;animation:10s linear infinite animate-ring2}.ring:hover i{border:6px solid var(--clr);filter:drop-shadow(0 0 20px var(--clr))}@keyframes animate-ring{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes animate-ring2{0%{transform:rotate(360deg)}to{transform:rotate(0)}}.login-form-container{flex-direction:column;justify-content:center;align-items:center;gap:20px;width:300px;height:100%;display:flex;position:absolute}.login-form-container h2{color:#fff;font-size:2em;font-weight:900}.inputBx{width:100%;position:relative}.inputBx input{color:#fff;text-align:center;background:0 0;border:2px solid #fff;border-radius:40px;outline:none;width:100%;padding:12px 20px;font-size:1.1em;position:relative}.inputBx button{color:#fff;cursor:pointer;background:linear-gradient(45deg,#10b981,#059669);border:none;border-radius:40px;width:100%;padding:12px;font-size:1.1em;font-weight:700;transition:all .3s}.inputBx button:hover{opacity:.8;letter-spacing:1px}.error-msg{color:#ff4d4d;text-align:center;font-size:.8em}