:root {
  --cube-size: 80px;
  --line-color: #333;
  --hover-color: #2ecc71;
  --background-color: #000;
  --sidebar-width: 250px;  /* Ajustamos el ancho del sidebar */
}

body {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: flex-start; /* Asegura que el contenido comience desde la izquierda */
  align-items: center;
  height: 100vh;
  background-color: var(--background-color);
}

.graph-container {
  position: relative;
  width: calc(100vw - var(--sidebar-width));  /* Restamos el ancho del sidebar */
  height: 100vh;
  margin-left: var(--sidebar-width); /* Añadimos margen para que no se solape */
}

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

.cube-container:hover {
  transform: rotateX(360deg) rotateY(360deg); /* Efecto al pasar el mouse */
}

.cube {
  position: absolute;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

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

.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;
}