:root{--w:200px;--h:200px}*{margin:0;padding:0;box-sizing:border-box}.cube{width:var(--w);height:var(--h);position:relative;transform-style:preserve-3d;transform:rotateX(-30deg);animation:cube-rotate 4s linear infinite}@keyframes cube-rotate{0%{transform:rotateX(-30deg) rotateY(0)}to{transform:rotateX(-30deg) rotateY(1turn)}}.cube div{transform-style:preserve-3d}.cube div,.cube div span{position:absolute;width:100%;height:100%;top:0;left:0}.cube div span{background:linear-gradient(#000,#0fe)}.cube div :first-child{transform:rotateY(calc(90deg * 1)) translateZ(calc(var(--h)/2))}.cube div :nth-child(2){transform:rotateY(calc(90deg * 2)) translateZ(calc(var(--h)/2))}.cube div :nth-child(3){transform:rotateY(calc(90deg * 3)) translateZ(calc(var(--h)/2))}.cube div :nth-child(4){transform:rotateY(calc(90deg * 4)) translateZ(calc(var(--h)/2))}.top{display:flex;justify-content:center;align-items:center;color:#f0f8ff;font-size:200%;text-shadow:2px 2px 2px #0fe;font-weight:bolder;background:#0a0a0a;transform:rotateX(90deg) translateZ(calc(var(--h)/2))}.top,.top:before{top:0;left:0;position:absolute}.top:before{content:" ";background:#0fe;height:var(--h);width:var(--w);transform:translateZ(calc(var(--h) * 4 / (-3)));filter:blur(20px);box-shadow:0 0 calc(var(--h)) #0fe,0 0 var(--h) #0fe}.top:after{content:"";position:absolute;animation:dots 3s 1s infinite;text-shadow:2px 2px 2px #0fe}@keyframes dots{0%,to{content:"."}10%{content:"L"}20%{content:"Lo"}30%{content:"Loa"}40%{content:"Load"}50%{content:"Loadi"}60%{content:"Loadin"}70%,90%{content:"Loading"}}.container{animation:updown 2s ease-in-out infinite}@keyframes updown{50%{transform:translateY(50px)}to{transform:translateY()}}