.cube-container {
	position: relative;
	margin-top: 7rem;
	margin-left: 4rem;
	perspective: 1000px;
	width: 200px;
	height: 200px;
	right: 32px;
}
.cube {
	width: 100%;
	height: 100%;
	position: absolute;
	transform-style: preserve-3d;
	animation: rotate 10s infinite linear;
}

.face {
	position: absolute;
	width: 100%;
	height: 100%;
	opacity: 0.9;
	border: 3px solid var(--onPrimary);
	text-align: center;

	display: flex;
	justify-content: center; /* orizzontale */
	align-items: center; /* verticale */

	background-color: var(--primary-obf);
	font-size: 1.2em;
	font-weight: bold;
	color: var(--onPrimary);
	text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

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

@keyframes rotate {
	from {
		transform: rotateX(0deg) rotateY(0deg);
	}
	to {
		transform: rotateX(360deg) rotateY(360deg);
	}
}
@media screen and (max-width: 380px) {
	.cube-container {
		width: 150px;
		height: 150px;
	}
	.front {
		transform: translateZ(75px);
	}
	.back {
		transform: rotateY(180deg) translateZ(75px);
	}
	.right {
		transform: rotateY(90deg) translateZ(75px);
	}
	.left {
		transform: rotateY(-90deg) translateZ(75px);
	}
	.top {
		transform: rotateX(90deg) translateZ(75px);
	}
	.bottom {
		transform: rotateX(-90deg) translateZ(75px);
	}
}