@font-face {
    font-family: "Golden_Plains_-_Demo";
    src: url("../fonts/Golden_Plains_-_Demo.woff") format("woff");
}

/* Estilos para el contenedor de escritorio con animación 2D */
#espacio-L {
  position: relative;
  overflow: hidden;
  z-index: 1; /* Controla la profundidad en la página */
}

/* Estilos para el contenedor móvil con animación 2D */
#espacio-M {
  position: relative;
  overflow: hidden;
  z-index: 1;
}

/* Estilos para el contenedor de escritorio con efecto 3D */
#espacio3D-L {
  position: relative;
  overflow: hidden;
  z-index: 1; /* Elevar si necesitas que se superponga a otros elementos */
}

/* Estilos para el contenedor móvil con efecto 3D */
#espacio3D-M {
  position: relative;
  overflow: hidden;
  z-index: 1;
}

/* Estilo común del canvas generado */
#uniqueSpaceCanvas, #uniqueSpaceCanvas3D {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/*Dodecaedro*/
html, body {
  background: #222;
  margin: 0;
  padding: 0;
}

#dodecaedro {
  width: 100%;
  perspective: 800px; 
  display: flex;
  justify-content: center;
  align-items: center;
  height: 500px; 
}

#dodecaedro .plane {
  width: 400px; /* Duplicamos el tamaño */
  height: 400px;
  transform-style: preserve-3d;
}

#dodecaedro .plane.main {
  transform: rotateX(60deg) rotateZ(-30deg);
  animation: rotate 20s infinite linear;
}

#dodecaedro .plane.main .circle {
  width: 400px; /* Duplicamos el tamaño */
  height: 400px;
  position: absolute;
  transform-style: preserve-3d;
  border-radius: 100%;
  box-sizing: border-box;
  box-shadow: 0 0 60px #48D1CC, inset 0 0 60px #48D1CC; /* Cambiamos los colores a turquesa */
}

#dodecaedro .plane.main .circle::before, #dodecaedro .plane.main .circle::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 10%;
  height: 10%;
  border-radius: 100%;
  background: #00CED1; /* Azul turquesa claro */
  box-sizing: border-box;
  box-shadow: 0 0 60px 2px #00CED1;
}

#dodecaedro .plane.main .circle::before {
  transform: translateZ(-180px); /* Ajustamos el valor para el nuevo tamaño */
}

#dodecaedro .plane.main .circle::after {
  transform: translateZ(180px); /* Ajustamos el valor para el nuevo tamaño */
}

#dodecaedro .plane.main .circle:nth-child(1) {
  transform: rotateZ(72deg) rotateX(63.435deg);
}

#dodecaedro .plane.main .circle:nth-child(2) {
  transform: rotateZ(144deg) rotateX(63.435deg);
}

#dodecaedro .plane.main .circle:nth-child(3) {
  transform: rotateZ(216deg) rotateX(63.435deg);
}

#dodecaedro .plane.main .circle:nth-child(4) {
  transform: rotateZ(288deg) rotateX(63.435deg);
}

#dodecaedro .plane.main .circle:nth-child(5) {
  transform: rotateZ(360deg) rotateX(63.435deg);
}

@keyframes rotate {
  0% {
    transform: rotateX(0) rotateY(0) rotateZ(0);
  }
  100% {
    transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
  }
}
#planetagon {
  width: 100%;
  height: 100vh; /* Ajusta la altura según el diseño de tu página */
  overflow: hidden;
}

canvas#scene {
  display: block;
  width: 100%;
  height: 100%;
}
@keyframes rotate-planet {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.planet-rotation {
  width: 100%; /* Ajusta según el tamaño deseado */
  animation: rotate-planet 240s linear infinite;
}