.section{background-color:#000;flex-wrap:wrap;justify-content:center;align-items:center;gap:2px;width:100vw;height:100vh;display:flex;position:absolute;overflow:hidden}.section:before{content:"";background:linear-gradient(#000,#fab316,#000);width:100%;height:100%;animation:5s linear infinite animate;position:absolute}@keyframes animate{0%{transform:translateY(-100%)}to{transform:translateY(100%)}}.section span{z-index:2;background-color:#181818;width:calc(4vw - 5px);height:calc(4vw - 20px);transition:all 1.5s;display:block;position:relative}.section span:hover{background-color:#fab316;transition:all}.section .signin{z-index:1000;background-color:#222;border-radius:4px;justify-content:center;align-items:center;width:400px;padding:40px;display:flex;position:absolute;box-shadow:0 15px 35px #00000080}.section .signin .content{flex-direction:column;justify-content:center;align-items:center;gap:40px;width:100%;display:flex;position:relative}.section .signin .content h2{color:#fab316;text-transform:uppercase;font-size:2rem}.section .signin .content .form{flex-direction:column;gap:25px;width:100%;display:flex}.section .signin .content .form .inputBx{width:100%;position:relative}.section .signin .content .form .inputBx input{color:#fff;background:#333;border:none;border-radius:4px;outline:none;width:100%;padding:25px 10px 7.5px;font-size:1em;font-weight:500;position:relative}.section .signin .content .form .inputBx i{color:#aaa;pointer-events:none;padding:15px 10px;transition:all .5s;position:absolute;left:0}.signin .content .form .inputBx input:focus~i,.signin .content .form .inputBx input:valid~i{color:#fff;font-size:.8em;transform:translateY(-7.5px)}.signin .content .form .links{width:100%;display:flexbox;justify-content:space-between;position:relative}.signin .content .form .links a{color:#fff;text-decoration:none}.signin .content .form .links a:nth-child(2){color:#fab316;font-weight:600}.signin .content .form .inputBx input[type=submit]{color:#111;letter-spacing:.05em;cursor:pointer;background-color:#fab316;padding:10px;font-size:1.25em;font-weight:600}@media only screen and (max-width:1200px) and (min-width:901px){.section span{width:calc(5vw - 2px);height:calc(5vw - 2px)}}@media only screen and (max-width:900px) and (min-width:601px){.section span{width:calc(10vw - 2px);height:calc(10vw - 2px)}}@media (max-width:600px){.section span{width:calc(20vw - 2px);height:calc(20vw - 2px)}}
.card{justify-content:center;align-items:center;display:flex;overflow:hidden}.box{z-index:10;border-radius:4px;width:100%;height:100%;position:relative;overflow:hidden}.box:before{content:"";z-index:1;transform-origin:100% 100%;background:linear-gradient(#fab316,#fab316,#fab316,#0000,#0000);width:100%;height:100%;animation:6s linear infinite cardAnimate;position:absolute;top:-50%;left:-50%}.box:after{content:"";z-index:1;transform-origin:100% 100%;background:linear-gradient(#fab316,#fab316,#fab316,#0000,#0000);width:100%;height:100%;animation:6s linear -3s infinite cardAnimate;position:absolute;top:-50%;left:-50%}.cardContent{z-index:2;border-radius:8px;position:absolute;inset:4px}@keyframes cardAnimate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.borderLine{position:absolute;inset:0}.borderLine:before{content:"";z-index:1;transform-origin:100% 100%;background:linear-gradient(#fff,#fff,#fff,#0000,#0000);width:100%;height:100%;animation:6s linear -1.5s infinite cardAnimate;position:absolute;top:-50%;left:-50%}.borderLine:after{content:"";z-index:1;transform-origin:100% 100%;background:linear-gradient(#fff,#fff,#fff,#0000,#0000);width:100%;height:100%;animation:6s linear -4.5s infinite cardAnimate;position:absolute;top:-50%;left:-50%}