body{background:#0b0d15}@property --angle{syntax:"<angle>";initial-value:0deg;inherits:false}@keyframes spin{0%{--angle:0deg}to{--angle:360deg}}#loginform{background:#1c1f2b;border-radius:10px;color:#f0f0f0;display:flex;flex-direction:column;margin:auto;padding:2em;position:relative;width:500px}#loginform label{cursor:pointer;display:block;font-size:14px;letter-spacing:1.2px;text-transform:uppercase}#loginform .input{background:hsla(0,0%,100%,.6);color:#1c1f2b;width:100%}#loginform .input:focus{background:#fff}#loginform p{margin-bottom:16px}#loginform .login-submit{margin-left:auto}#loginform .login-submit input[type=submit]{cursor:pointer;font-size:14px;letter-spacing:1.2px;text-transform:uppercase}#loginform:after,#loginform:before{animation:spin 3s linear infinite;background-image:conic-gradient(from var(--angle),#ff4545,#0f9,#006aff,#ff0095,#ff4545);border-radius:10px;content:"";height:100%;left:50%;padding:3px;position:absolute;top:50%;translate:-50% -50%;width:100%;z-index:-1}#loginform:before{filter:blur(1.5rem);opacity:.5}