.cube-loader{position:relative;width:75px;height:75px;transform-style:preserve-3d;transform:rotateX(-30deg);animation:animate 4s linear infinite}@keyframes animate{0%{transform:rotateX(-30deg) rotateY(0)}to{transform:rotateX(-30deg) rotateY(1turn)}}.cube-loader .cube-wrapper{position:absolute;width:100%;height:100%;transform-style:preserve-3d}.cube-loader .cube-wrapper .cube-span{position:absolute;width:100%;height:100%;transform:rotateY(calc(90deg * var(--i))) translateZ(37.5px);background:linear-gradient(180deg,#423e40 0,#405c64 5.5%,#3e6b7e 12.1%,#3c7a94 19.6%,#3a86a6 27.9%,#3891b6 36.6%,#369ac4 45.6%,#34a2d0 54.6%,#32a9db 63.4%,#30aee4 71.7%,#2eb3ec 79.4%,#2db7f2 86.2%,#2cbbf7 91.9%,#2bbdfb 96.3%,#2abefd 99%,#2abffe)}.cube-top{background:#423e40 0;transform:rotateX(90deg) translateZ(37.5px);transform-style:preserve-3d}.cube-top,.cube-top:before{position:absolute;width:75px;height:75px}.cube-top:before{content:"";background:#3c948f 19.6%;transform:translateZ(-90px);filter:blur(10px);box-shadow:0 0 10px #323232,0 0 20px 19.6% #3c948f,0 0 30px #323232,0 0 40px 19.6% #3c948f}@media (max-width:600px){.cube-loader{width:50px;height:50px}.cube-loader .cube-top{width:50px;height:50px;transform:rotateX(90deg) translateZ(25px)}.cube-loader .cube-top:before{width:50px;height:50px;transform:translateZ(-60px)}.cube-loader .cube-wrapper .cube-span{transform:rotateY(calc(90deg * var(--i))) translateZ(25px)}}