:root{--light-cyan:#d6fff6ff;--medium-turquoise:#4dccbdff;--russian-violet:#110d31ff;--french-blue:#2374abff;--light-coral:#ff8484ff;--cube-size:80px;--animation-duration:2s}.scene{position:relative;z-index:2;height:calc(var(--cube-size) * 2.75);width:calc(var(--cube-size) * 2.75);display:grid;place-items:center}.cube-wrapper{animation:bouncing var(--animation-duration) infinite}.cube,.cube-wrapper{transform-style:preserve-3d}.cube{transform:rotateX(45deg) rotate(45deg);animation:rotation var(--animation-duration) infinite}.cube-faces{transform-style:preserve-3d;height:var(--cube-size);width:var(--cube-size);position:relative;transform-origin:0 0;transform:translateX(0) translateY(0) translateZ(calc(var(--cube-size) * -.5))}.cube-face{position:absolute;inset:0;background:var(--russian-violet);border:1px solid var(--light-coral)}.cube-face.shadow{transform:translateZ(calc(var(--cube-size) * -1));animation:bouncing-shadow var(--animation-duration) infinite}.cube-face.top{transform:translateZ(var(--cube-size))}.cube-face.front{transform-origin:0 50%;transform:rotateY(-90deg)}.cube-face.back{transform-origin:0 50%;transform:rotateY(-90deg) translateZ(calc(var(--cube-size) * -1))}.cube-face.right{transform-origin:50% 0;transform:rotateX(-90deg) translateY(calc(var(--cube-size) * -1))}.cube-face.left{transform-origin:50% 0;transform:rotateX(-90deg) translateY(calc(var(--cube-size) * -1)) translateZ(var(--cube-size))}@keyframes rotation{0%{transform:rotateX(45deg) rotateY(0) rotate(45deg);animation-timing-function:cubic-bezier(.17,.84,.44,1)}50%{transform:rotateX(45deg) rotateY(0) rotate(225deg);animation-timing-function:cubic-bezier(.76,.05,.86,.06)}to{transform:rotateX(45deg) rotateY(0) rotate(405deg);animation-timing-function:cubic-bezier(.17,.84,.44,1)}}@keyframes bouncing{0%{transform:translateY(-40px);animation-timing-function:cubic-bezier(.76,.05,.86,.06)}45%{transform:translateY(40px);animation-timing-function:cubic-bezier(.23,1,.32,1)}to{transform:translateY(-40px);animation-timing-function:cubic-bezier(.76,.05,.86,.06)}}@keyframes bouncing-shadow{0%{transform:translateZ(calc(var(--cube-size) * -1)) scale(1.3);animation-timing-function:cubic-bezier(.76,.05,.86,.06);opacity:.05}45%{transform:translateZ(0);animation-timing-function:cubic-bezier(.23,1,.32,1);opacity:.3}to{transform:translateZ(calc(var(--cube-size) * -1)) scale(1.3);animation-timing-function:cubic-bezier(.76,.05,.86,.06);opacity:.05}}