:root{--size:150px}@media (min-width:640px){:root{--size:250px}}.scene{width:var(--size);height:var(--size);perspective:600px;margin:50px}.cube{width:100%;height:100%;transform-style:preserve-3d;animation:8s linear infinite rotate;position:relative}.face{width:var(--size);height:var(--size);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border:1px solid var(--accent);background-color:#000;background-position:50%;background-repeat:no-repeat;background-size:contain;position:absolute}.front{transform:rotateY(0deg)translateZ(calc(var(--size)/2))}.back{transform:rotateY(180deg)translateZ(calc(var(--size)/2))}.right{transform:rotateY(90deg)translateZ(calc(var(--size)/2))}.left{transform:rotateY(-90deg)translateZ(calc(var(--size)/2))}.top{transform:rotateX(90deg)translateZ(calc(var(--size)/2))}.bottom{transform:rotateX(-90deg)translateZ(calc(var(--size)/2))}@keyframes rotate{0%{transform:rotateX(0)rotateY(0)}to{transform:rotateX(360deg)rotateY(360deg)}}