.cube-container{color:#555;flex-direction:row;justify-content:center;align-items:center;display:flex}.text{text-align:center;width:100%;margin-top:22rem;font-size:1rem;font-weight:200}.cube,.cube *{width:6rem;height:6rem;position:absolute}.cube .sides *{box-sizing:border-box;background:#00000080;border:.12rem solid #fff;border-radius:.25rem}@keyframes rotate{0%{transform:rotateX(-37.5deg)rotateY(45deg)}50%{transform:rotateX(-37.5deg)rotateY(405deg)}to{transform:rotateX(-37.5deg)rotateY(405deg)}}.sides{transform-style:preserve-3d;animation:3s .8s infinite rotate;transform:rotateX(-37.5deg)rotateY(45deg)}.cube .sides .top{transform-origin:50%;animation:3s infinite forwards top-animation;transform:rotateX(90deg)translateZ(96px)}@keyframes top-animation{0%{opacity:1;transform:rotateX(90deg)translateZ(100px)}20%{opacity:1;transform:rotateX(90deg)translateZ(48px)}70%{opacity:1;transform:rotateX(90deg)translateZ(48px)}90%{opacity:1;transform:rotateX(90deg)translateZ(100px)}to{opacity:1;transform:rotateX(90deg)translateZ(100px)}}.cube .sides .bottom{transform-origin:50%;animation:3s infinite forwards bottom-animation;transform:rotateX(-90deg)translateZ(96px)}@keyframes bottom-animation{0%{opacity:1;transform:rotateX(-90deg)translateZ(100px)}20%{opacity:1;transform:rotateX(-90deg)translateZ(48px)}70%{opacity:1;transform:rotateX(-90deg)translateZ(48px)}90%{opacity:1;transform:rotateX(-90deg)translateZ(100px)}to{opacity:1;transform:rotateX(-90deg)translateZ(100px)}}.cube .sides .front{transform-origin:50%;animation:3s .1s infinite forwards front-animation;transform:rotateY(0)translateZ(96px)}@keyframes front-animation{0%{opacity:1;transform:rotateY(0)translateZ(96px)}20%{opacity:1;transform:rotateY(0)translateZ(48px)}70%{opacity:1;transform:rotateY(0)translateZ(48px)}90%{opacity:1;transform:rotateY(0)translateZ(96px)}to{opacity:1;transform:rotateY(0)translateZ(96px)}}.cube .sides .back{transform-origin:50%;animation:3s .1s infinite forwards back-animation;transform:rotateY(-180deg)translateZ(96px)}@keyframes back-animation{0%{opacity:1;transform:rotateY(-180deg)translateZ(96px)}20%{opacity:1;transform:rotateY(-180deg)translateZ(48px)}70%{opacity:1;transform:rotateY(-180deg)translateZ(48px)}90%{opacity:1;transform:rotateY(-180deg)translateZ(96px)}to{opacity:1;transform:rotateY(-180deg)translateZ(96px)}}.cube .sides .left{transform-origin:50%;animation:3s .1s infinite forwards left-animation;transform:rotateY(-90deg)translateZ(96px)}@keyframes left-animation{0%{opacity:1;transform:rotateY(-90deg)translateZ(96px)}20%{opacity:1;transform:rotateY(-90deg)translateZ(48px)}70%{opacity:1;transform:rotateY(-90deg)translateZ(48px)}90%{opacity:1;transform:rotateY(-90deg)translateZ(96px)}to{opacity:1;transform:rotateY(-90deg)translateZ(96px)}}.cube .sides .right{transform-origin:50%;animation:3s .1s infinite forwards right-animation;transform:rotateY(90deg)translateZ(96px)}@keyframes right-animation{0%{opacity:1;transform:rotateY(90deg)translateZ(96px)}20%{opacity:1;transform:rotateY(90deg)translateZ(48px)}70%{opacity:1;transform:rotateY(90deg)translateZ(48px)}90%{opacity:1;transform:rotateY(90deg)translateZ(96px)}to{opacity:1;transform:rotateY(90deg)translateZ(96px)}}