@keyframes spin{0%{transform:translateZ(-12vh) rotateX(0deg) rotateY(0deg) rotateZ(0deg)}16%{transform:translateZ(-12vh) rotateX(180deg) rotateY(180deg) rotateZ(0deg)}33%{transform:translateZ(-12vh) rotateX(360deg) rotateY(90deg) rotateZ(180deg)}50%,to{transform:translateZ(-12vh) rotateX(360deg) rotateY(360deg) rotateZ(360deg)}66%{transform:translateZ(-12vh) rotateX(180deg) rotateY(360deg) rotateZ(270deg)}83%{transform:translateZ(-12vh) rotateX(270deg) rotateY(180deg) rotateZ(180deg)}}*,::after,::before{box-sizing:inherit;margin:unset;padding:unset;height:100%}html{box-sizing:border-box;--bg-color:50 95% 65%;--bg-color-secondary:210 5% 65%;--bg-color-dark:210 80% 35%;background:radial-gradient(circle at top right,hsl(var(--bg-color)),hsl(var(--bg-color)/0%)),radial-gradient(circle at bottom left,hsl(var(--bg-color-secondary)),hsl(var(--bg-color-secondary)/0%));background-color:hsl(var(--bg-color-secondary))}@media (prefers-color-scheme:dark){html{background:radial-gradient(circle at top right,hsl(var(--bg-color-dark)),hsl(var(--bg-color-dark)/0%)),radial-gradient(circle at bottom left,black,transparent);background-color:#000}}#wrapper{display:flex;justify-content:center;align-items:center;perspective:120vh}#dice,.side{width:24vh;height:24vh}#dice{transform-style:preserve-3d;animation:spin 45s infinite linear}@media (prefers-reduced-motion){#dice{animation:spin 180s infinite linear}}#dice .front.face{transform:rotateX(0deg) translateZ(12.1vh)}#dice .front.inner{transform:rotateX(0deg) translateZ(12vh)}#dice .back.face{transform:rotateX(-180deg) translateZ(12.1vh)}#dice .back.inner{transform:rotateX(-180deg) translateZ(12vh)}#dice .right.face{transform:rotateY(90deg) translateZ(12.1vh)}#dice .right.inner{transform:rotateY(90deg) translateZ(12vh)}#dice .left.face{transform:rotateY(-90deg) translateZ(12.1vh)}#dice .left.inner{transform:rotateY(-90deg) translateZ(12vh)}#dice .top.face{transform:rotateX(90deg) translateZ(12.1vh)}#dice .top.inner{transform:rotateX(90deg) translateZ(12vh)}#dice .bottom.face{transform:rotateX(-90deg) translateZ(12.1vh)}#dice .bottom.inner{transform:rotateX(-90deg) translateZ(12vh)}.side{position:absolute;padding:1.2vh;background:#fff;box-shadow:inset 0 0 4vh hsl(0deg 0% 80%);border-radius:4vh}.face{display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);grid-template-areas:"a . c""e g f""d . b"}.dot{display:block;place-self:center center;width:6vh;height:6vh;border-radius:3vh;background:hsl(0deg 0% 20%);box-shadow:inset .6vh 0 1.2vh #000}.dot:nth-child(2){grid-area:b}.dot:nth-child(3){grid-area:c}.dot:nth-child(4){grid-area:d}.dot:nth-child(5){grid-area:e}.dot:nth-child(6){grid-area:f}.dot:nth-child(odd):last-child{grid-area:g}#dice .cover,#dice .inner{background:hsl(0deg 0% 90%);box-shadow:none}#dice .cover{border-radius:0}#dice .cover.x{transform:rotateY(90deg)}#dice .cover.y{transform:translateZ(0)}#dice .cover.z{transform:rotateX(90deg)}