:root {
  --cube-size: 70px; /* Tamaño reducido de los cubos */
  --line-color: #333;
  --hover-color: #2ecc71;
}

.graph-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  background-color: #000;
  border: 1px solid #ddd;
  margin: 20px auto;
  perspective: 1000px;
}

.cube-container {
  position: absolute;
  width: var(--cube-size);
  height: var(--cube-size);
  transform-style: preserve-3d;
  transition: transform 1s;
}

.cube-container:hover {
  transform: rotateX(360deg) rotateY(360deg);
}

.cube {
  position: absolute;
  width: var(--cube-size);
  height: var(--cube-size);
  transform-style: preserve-3d;
}

.face {
  position: absolute;
  width: var(--cube-size);
  height: var(--cube-size);
  background-color: var(--hover-color);
  border: 1px solid #000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  color: white;
}

/* Posiciones de las caras del cubo */
.front { transform: translateZ(calc(var(--cube-size) / 2)); }
.back { transform: rotateY(180deg) translateZ(calc(var(--cube-size) / 2)); }
.left { transform: rotateY(-90deg) translateZ(calc(var(--cube-size) / 2)); }
.right { transform: rotateY(90deg) translateZ(calc(var(--cube-size) / 2)); }
.top { transform: rotateX(90deg) translateZ(calc(var(--cube-size) / 2)); }
.bottom { transform: rotateX(-90deg) translateZ(calc(var(--cube-size) / 2)); }

.lines {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

.line-path {
  stroke: var(--line-color);
  stroke-width: 2;
  transition: stroke 0.3s;
}

.line-path:hover {
  stroke: #e74c3c;
}