/* Estilos generales para el fondo y las partículas */
body {
    margin: 0;
    padding: 0;
    overflow: hidden; 
    background: #FFFFFF; /* Fondo blanco */
    font-family: sans-serif;
    color: #333; /* Color de texto predeterminado si no se especifica */
}

#particles-js {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #FFFFFF; /* Fondo blanco para las partículas también */
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
    z-index: 1;
}

/* Estilos para el contenido centrado */
.container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10; 
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 90%;
    max-width: 500px; /* Ajuste para un buen tamaño en pantallas grandes */
    padding: 20px;
}

.logo {
    max-width: 80%; /* Ajusta el tamaño máximo del logo para que sea responsive */
    height: auto;
    margin-bottom: 1.5rem; /* Espacio entre el logo y la primera leyenda */
}

.legend {
    font-size: 3em; /* Tamaño de fuente más grande para la leyenda principal */
    margin: 0.5rem 0; /* Espacio vertical para las leyendas */
    font-weight: bold;
    line-height: 1.2;
}

.sub-legend {
    font-size: 1.5em; /* Tamaño de fuente para la sub-leyenda */
    margin: 0.5rem 0;
    line-height: 1.2;
}

.black-text {
    color: #000000; /* Color de texto negro para las leyendas */
}

/* Media Queries para responsividad */
@media (max-width: 768px) {
    .logo {
        max-width: 90%;
    }
    .legend {
        font-size: 2.2em;
    }
    .sub-legend {
        font-size: 1.2em;
    }
}

@media (max-width: 480px) {
    .logo {
        max-width: 100%;
    }
    .legend {
        font-size: 1.8em;
    }
    .sub-legend {
        font-size: 1em;
    }
}