:root{--bg-color: #181b22;--bg-secondary-color: #22242e;--fg-color: white;--accent-color: #8325fc;--animation-cube-size: 120px}body{display:flex;color:var(--fg-color);background:var(--bg-color);padding:0;margin:0}.hidden{visibility:hidden}#buttons-container{display:flex;gap:.5rem;position:fixed;bottom:0;right:0;justify-content:flex-end;width:100%;margin:.5rem}#scene{position:fixed;top:0;left:0;z-index:-1}button,#text{background:var(--bg-secondary-color);color:inherit;font-size:1rem;cursor:pointer;border:none;border-radius:10px;padding:.5rem 1rem}#text{cursor:default;height:fit-content;margin:.5rem}#cube-scene{position:fixed;width:100%;height:100%;top:0;z-index:2;display:grid;place-items:center;justify-self:center;align-self:center}.cube-wrapper{transform-style:preserve-3d;animation:bouncing 2s infinite}.cube{transform-style:preserve-3d;transform:rotateX(45deg) rotate(45deg);animation:rotation 2s infinite}.cube-faces{transform-style:preserve-3d;height:var(--animation-cube-size);width:var(--animation-cube-size);position:relative;transform-origin:0 0;transform:translate(0) translateY(0) translateZ(-40px)}.cube-face{position:absolute;top:0;right:0;bottom:0;left:0;background:var(--accent-color);border:solid 1px var(--bg-color)}.cube-face.shadow{transform:translateZ(calc(-1 * var(--animation-cube-size)));animation:bouncing-shadow 2s infinite}.cube-face.top{transform:translateZ(var(--animation-cube-size))}.cube-face.front{transform-origin:0 50%;transform:rotateY(-90deg)}.cube-face.back{transform-origin:0 50%;transform:rotateY(-90deg) translateZ(calc(-1 * var(--animation-cube-size)))}.cube-face.right{transform-origin:50% 0;transform:rotateX(-90deg) translateY(calc(-1 * var(--animation-cube-size)))}.cube-face.left{transform-origin:50% 0;transform:rotateX(-90deg) translateY(calc(-1 * var(--animation-cube-size))) translateZ(var(--animation-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(-1 * var(--animation-cube-size))) 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(-1 * var(--animation-cube-size))) scale(1.3);animation-timing-function:cubic-bezier(.76,.05,.86,.06);opacity:.05}}