:root {
  --couleur-cube: rgba( 7, 7, 36, 0.8);
}

.space-scene {
	position: fixed;
	top: 30%;
	left: 10%;
	width: 300px;
	height: 300px;
	perspective: 1000px;
	z-index: -1;
}

.cube-container {
	width: 100%;
	height: 100%;
	position: absolute;
	transform-style: preserve-3d;
	animation: cube-rotate 30s linear infinite;
}

.cube-face {
	position: absolute;
	width: 200px;
	height: 200px;
	top: 50%;
	left: 50%;
	margin-top: -100px;
	margin-left: -100px;
	border: 1px solid rgba(0, 255, 255, 0.5);
	background: rgba(0, 255, 255, 0.1);
	box-shadow: 0 0 5px rgba(0, 255, 255, 0.7);
	opacity: 1;
	/* Pour voir au travers */
	backdrop-filter: blur(2px);
	border-radius: 20px;
}

.front  { transform: translateZ(100px); background-color: var(--couleur-cube); }
.back   { transform: rotateY(180deg) translateZ(100px);  background-color: var(--couleur-cube);}
.right  { transform: rotateY(90deg) translateZ(100px); background-color: var(--couleur-cube); }
.left   { transform: rotateY(-90deg) translateZ(100px); background-color: var(--couleur-cube); }
.top    { transform: rotateX(90deg) translateZ(100px); background-color: var(--couleur-cube); }
.bottom { transform: rotateX(-90deg) translateZ(100px); background-color: var(--couleur-cube); }

@keyframes cube-rotate {
    0% { 
        transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg) rotateZ(0deg); 
    }
    25% { 
        transform: translate3d(100%, -40px, 50px) rotateX(90deg) rotateY(180deg) rotateZ(45deg); 
    }
    50% { 
        transform: translate3d(-60%, 60px, -100px) rotateX(180deg) rotateY(360deg) rotateZ(90deg); 
    }
    75% { 
        transform: translate3d(-100%, -50px, 80px) rotateX(270deg) rotateY(540deg) rotateZ(135deg); 
    }
    100% { 
        transform: translate3d(0, 0, 0) rotateX(360deg) rotateY(720deg) rotateZ(180deg); 
    }
}