.cube-container{position:relative}.cube-container div{transform-style:preserve-3d;position:absolute;top:50%;left:50%}.axis-switcher{animation:6s step-end infinite switch}@keyframes switch{16.6667%{transform:rotate(.5turn)}33.3333%{transform:rotateX(90deg)}50%{transform:rotate(90deg)}66.6667%{transform:rotateX(90deg)rotate(.5turn)}83.3333%{transform:rotate(90deg)rotate(.5turn)}}.cube{color:#83af9b;transform:rotateX(-35deg)rotateY(45deg)}.cube__comp:first-child *{transform:rotateX(-90deg)translateZ(13.5em)}.cube__comp:first-child :before{top:-3.9375em;box-shadow:0 0,0 9em,9em 0,9em 9em,18em 0,18em 9em}.cube__comp:last-child{animation:1s cubic-bezier(.68,-.55,.265,1.55) infinite r}.cube__face{-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:rotateX(90deg)translateZ(13.5em)}.cube__face:before{content:"";background:#83af9b;border-radius:4px;width:7.875em;height:7.875em;position:absolute;top:-12.9375em;left:-12.9375em;box-shadow:0 0,9em 0,18em 0}.cube__face:first-child{transform:rotateY(0)translateZ(13.5em)}.cube__face:nth-child(2){transform:rotateY(90deg)translateZ(13.5em)}.cube__face:nth-child(3){transform:rotateY(180deg)translateZ(13.5em)}.cube__face:nth-child(4){transform:rotateY(270deg)translateZ(13.5em)}.cube__face:last-child:before{top:-12.9375em;box-shadow:0 0,0 9em,0 18em,9em 0,9em 9em,9em 18em,18em 0,18em 9em,18em 18em}@keyframes r{to{transform:rotateY(-90deg)}}