:root{--cube-width:300px;--translateZ:150px}.header-3d{color:#eee;display:flex;flex-direction:column;align-items:center;justify-content:center}.container-3d{max-width:1000px;margin:0 auto}.header-3d h2{margin:0;font-size:40px;margin-bottom:100px}.cube-container{perspective:1000px}.cube-container .cube{width:var(--cube-width);height:var(--cube-width);transform-style:preserve-3d}.cube-container .cube-face{width:var(--cube-width);height:var(--cube-width);position:absolute;font-size:24px;background-color:yellow;color:#fff;font-weight:bold;display:flex;flex-direction:column;align-items:center;justify-content:center}.cube-container .cube-face .cube-txt{text-align:center;padding:20px}.cube-container .front{background-color:#BA0C2F;transform:translateZ(150px)}.cube-container .back{background-color:#094B74;transform:rotateY(180deg) translateZ(var(--translateZ))}.cube-container .left{background-color:#1B6764;transform:rotateY(-90deg) translateZ(var(--translateZ))}.cube-container .right{background-color:#40474D;transform:rotateY(90deg) translateZ(var(--translateZ))}.cube-container .top{background-color:#3A317C;transform:rotateX(90deg) translateZ(var(--translateZ))}.cube-container .bottom{background-color:#D94E04;transform:rotateX(-90deg) translateZ(var(--translateZ))}@keyframes rotate{0%{transform:rotateY(0deg)}10%{transform:rotateY(90deg)}20%{transform:rotateY(180deg)}30%{transform:rotateY(270deg)}40%{transform:rotateY(360deg)}50%{transform:rotateX(0deg)}60%{transform:rotateX(90deg)}70%{transform:rotateX(180deg)}80%{transform:rotateX(270deg)}90%{transform:rotateX(360deg)}}.cube{animation:rotate 35s infinite linear}