body{background-color: #000; margin: 0; overflow: hidden}#cube-container{width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center}#cube{width: 300px; height: 300px; position: relative; transform-style: preserve-3d; transform: translateZ(-500px)}#cube div{width: 300px; height: 300px; position: absolute; background-color: transparent; border: 2px solid transparent; box-sizing: border-box; display: flex; justify-content: center; align-items: center; font-family: Arial, sans-serif; color: #fff; font-size: 30px; text-shadow: 0 0 10px rgba(255, 255, 255, .8); transform-style: preserve-3d; user-select: none; animation: colorTransition 10s ease-in-out infinite alternate, glowTransition 10s ease-in-out infinite alternate; animation-delay: 0s; transition: box-shadow .5s ease-in-out, color 10s ease-in-out; box-shadow: 0 0 20px white}@keyframes colorTransition{0%{background-color: #000000; box-shadow: 0 0 20px white; color: white}50%{background-color: transparent; box-shadow: 0 0 100px transparent; color: black}100%{background-color: #000000; box-shadow: 0 0 20px white; color: white}}#cube .face1{transform: translateZ(150px)}#cube .face2{transform: rotateY(90deg) translateZ(150px)}#cube .face3{transform: rotateY(180deg) translateZ(150px)}#cube .face4{transform: rotateY(-90deg) translateZ(150px)}#cube .face5{transform: rotateX(90deg) translateZ(150px)}#cube .face6{transform: rotateX(-90deg) translateZ(150px); display: flex; flex-direction: column; justify-content: space-between; align-items: center; text-align: center; line-height: 1.2; margin: 0; padding: 20px}#cube .face6 p{margin: 0}#cube div.animate-glow{animation: glowTransition 10s ease-in-out infinite alternate; animation-delay: 0s}@keyframes glowTransition{0%{box-shadow: 0 0 20px white}50%{box-shadow: 0 0 100px black}100%{box-shadow: 0 0 20px white}}@keyframes backgroundFlow{0%{background-color: black}50%{background-color: white}100%{background-color: black}}body{animation: backgroundFlow 10s linear infinite}