.section{position:absolute;display:flex;justify-content:center;align-items:center;width:100vw;height:100vh;background-color:#000;gap:2px;flex-wrap:wrap;overflow:hidden}.section:before{content:"";position:absolute;width:100%;height:100%;background:linear-gradient(#000,#fab316,#000);animation:animate 5s linear infinite}@keyframes animate{0%{transform:translateY(-100%)}to{transform:translateY(100%)}}.section span{position:relative;display:block;width:calc(4vw - 5px);height:calc(4vw - 20px);background-color:#181818;z-index:2;transition:1.5s}.section span:hover{background-color:#fab316;transition:0s}.section .signin{position:absolute;width:400px;background-color:#222;z-index:1000;padding:40px;border-radius:4px;box-shadow:0 15px 35px rgba(0,0,0,.5)}.section .signin,.section .signin .content{display:flex;justify-content:center;align-items:center}.section .signin .content{position:relative;width:100%;flex-direction:column;gap:40px}.section .signin .content h2{font-size:2rem;color:#fab316;text-transform:uppercase}.section .signin .content .form{width:100%;display:flex;flex-direction:column;gap:25px}.section .signin .content .form .inputBx{position:relative;width:100%}.section .signin .content .form .inputBx input{position:relative;width:100%;background:#333;border:none;outline:none;padding:25px 10px 7.5px;border-radius:4px;color:#fff;font-weight:500;font-size:1em}.section .signin .content .form .inputBx i{position:absolute;left:0;padding:15px 10px;color:#aaa;transition:.5s;pointer-events:none}.signin .content .form .inputBx input:focus~i,.signin .content .form .inputBx input:valid~i{transform:translateY(-7.5px);font-size:.8em;color:#fff}.signin .content .form .links{position:relative;width:100%;display:flexbox;justify-content:space-between}.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]{padding:10px;background-color:#fab316;color:#111;font-weight:600;font-size:1.25em;letter-spacing:.05em;cursor:pointer}@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{display:flex;justify-content:center;align-items:center;overflow:hidden}.box{position:relative;border-radius:4px;overflow:hidden;z-index:10}.box,.box:before{width:100%;height:100%}.box:after,.box:before{content:"";position:absolute;top:-50%;left:-50%;background:linear-gradient(0deg,transparent,transparent,#fab316,#fab316,#fab316);z-index:1;transform-origin:bottom right;animation:cardAnimate 6s linear infinite}.box:after{width:100%;height:100%;animation-delay:-3s}.cardContent{position:absolute;inset:4px;border-radius:8px;z-index:2}@keyframes cardAnimate{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.borderLine{position:absolute;inset:0}.borderLine:before{animation:cardAnimate 6s linear infinite;animation-delay:-1.5s}.borderLine:after,.borderLine:before{content:"";position:absolute;top:-50%;left:-50%;width:100%;height:100%;background:linear-gradient(0deg,transparent,transparent,#fff,#fff,#fff);z-index:1;transform-origin:bottom right}.borderLine:after{animation:cardAnimate 6s linear infinite;animation-delay:-4.5s}