html, body {
  margin: 0;
  padding: 0;
  height: 100%; /* Asegura que el html y el body ocupen el 100% de la altura */
}

.navbar-nav {
    margin-left: 0; /* Asegúrate de que no haya margen a la izquierda */
    display: flex; /* Utilizar flex para que se alineen horizontalmente */
}

.navbar-nav .nav-item {
    margin-right: 1rem; /* Espacio entre los elementos de navegación, ajusta según necesites */
}


body {
  font-family: system-ui;
  color: white;
  text-align: center;
}

#canvas1 {
  position: fixed; /* Asegura que el canvas cubra toda la ventana */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: black; /* Fondo negro para mayor visibilidad */
  z-index: -1; /* Para que esté detrás del contenido */
}


/* Añade esto para ajustar el margen superior */

#Integrantes, #Biliografias{
  scroll-margin-top: 80px; /* Ajusta este valor según la altura de tu navbar */
}

#Integrantes, #Unidad_IV {
    margin-top: 25px; /* Ajusta el valor según la altura de tu navbar */
}

/* Clase personalizada para un texto más oscuro */
.text-custom-muted {
  color: #343a40; /* Un gris oscuro */
}
  
/* Cambia el color de los enlaces del navbar al pasar el cursor */
.navbar-nav .nav-link {
  color: white;
  transition: color 0.3s ease; /* Efecto de transición suave */
}
.navbar-nav .nav-link:hover {
  color: #ffcc00; /* Cambia el color a amarillo dorado cuando pases el cursor */
}



/* Hace que aparezca + al pasar mouse encima */
.project-link {
    position: relative;
    display: inline-block;
    
    text-decoration: none; /* Quita el subrayado */
    color: inherit; /* Hereda el color del texto padre */
}


.project-link::before {
    content: "+";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Ajuste para centrar el símbolo */
    font-size: 15em; /* Tamaño del signo de más */
    color: rgba(255, 255, 255, 0); /* Totalmente transparente al inicio */
    background-color: rgba(0, 0, 0, 0); /* Fondo transparente al inicio */
    border-radius: 50%;
    width: 280px; /* Ancho del círculo */
    height: 280px; /* Altura del círculo */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.3s, background-color 0.3s;
    pointer-events: none; /* Evita interferencia con el mouse */
}

.project-link:hover::before {
    color: rgba(255, 255, 255, 0.8); /* Color blanco ligeramente transparente al hacer hover */
    background-color: rgba(0, 0, 0, 0.7); /* Fondo oscuro con menor transparencia */
}