:root {
     --dot-size: 19px;
     --face-size: 380px;
     --pastel1: #ff98e0;
     --pastel2: #d6f5ff;
     --pastel3: #fddf4c;
     --pastel4: #87e4c5;
     --pastel5: #a177e9;
     --pastel6: #ff6445;
 }

 * {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
 }

 body {
     height: 100vh;
     display: flex;
     align-items: center;
     justify-content: center;
     background: #000000;
     overflow: auto;
     font-family: system-ui, sans-serif;
 }

 .scene {
     perspective: 800px;
 }

 .cube {
     position: relative;
     width: var(--face-size);
     height: var(--face-size);
     transform-style: preserve-3d;
     animation: spinZoom 16s ease-in-out infinite;
 }

 .face {
     position: absolute;
     width: 100%;
     height: 100%;
     display: grid;
     place-items: center;
     background-size: calc(var(--dot-size) * 2) calc(var(--dot-size) * 2);
     background-repeat: repeat;
 }

 .face:nth-child(1) {
     transform: translateZ(calc(var(--face-size) / 2));
     background-image: radial-gradient(circle, var(--pastel1) 50%, transparent 51%);
 }

 .face:nth-child(2) {
     transform: rotateY(180deg) translateZ(calc(var(--face-size) / 2));
     background-image: radial-gradient(circle, var(--pastel2) 50%, transparent 51%);
 }

 .face:nth-child(3) {
     transform: rotateY(90deg) translateZ(calc(var(--face-size) / 2));
     background-image: radial-gradient(circle, var(--pastel3) 50%, transparent 51%);
 }

 .face:nth-child(4) {
     transform: rotateY(-90deg) translateZ(calc(var(--face-size) / 2));
     background-image: radial-gradient(circle, var(--pastel4) 50%, transparent 51%);
 }

 .face:nth-child(5) {
     transform: rotateX(90deg) translateZ(calc(var(--face-size) / 2));
     background-image: radial-gradient(circle, var(--pastel5) 50%, transparent 51%);
 }

 .face:nth-child(6) {
     transform: rotateX(-90deg) translateZ(calc(var(--face-size) / 2));
     background-image: radial-gradient(circle, var(--pastel6) 50%, transparent 51%);
 }

 @keyframes spinZoom {
     0% {
         transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1);
     }

     25% {
         transform: rotateX(90deg) rotateY(180deg) rotateZ(45deg) scale(1.2);
     }

     50% {
         transform: rotateX(180deg) rotateY(360deg) rotateZ(90deg) scale(1.35);
     }

     75% {
         transform: rotateX(270deg) rotateY(540deg) rotateZ(135deg) scale(1.2);
     }

     100% {
         transform: rotateX(360deg) rotateY(720deg) rotateZ(180deg) scale(1);
     }
 }