@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap');

        body {
            font-family: 'Arial', sans-serif;
            margin: 0;
            padding: 0;
            background-color: #1f1f1f; /* Fondo principal */
            color: #ffa500; /* Color de texto general */
        }

        header {
            background-color: rgba(31, 31, 31, 0.8); /* Fondo del encabezado con opacidad */
            color: #ffa500; /* Color de texto en el encabezado */
            text-align: center;
            padding: 1em;
            border-bottom: 1px solid #ffa500; /* Línea separadora */
        }

        header h1, .elite-title {
            font-size: 2.5em; /* Tamaño del título del encabezado ajustado */
            margin: 0;
            letter-spacing: 3px; /* Espaciado entre letras */
            text-transform: uppercase; /* Convierte el texto a mayúsculas */
            font-family: 'Orbitron', sans-serif; /* Fuente Orbitron */
            color: #ffa500; /* Color naranja */
        }

        footer {
            background-color: rgba(31, 31, 31, 0.8); /* Fondo del pie de página con opacidad */
            color: #ffa500; /* Color de texto en el pie de página */
            text-align: center;
            padding: 1em;
            position: fixed;
            bottom: 0;
            width: 100%;
            font-family: 'Orbitron', sans-serif; /* Fuente Orbitron */
        }

        canvas {
            position: fixed;
            top: 0;
            left: 0;
            pointer-events: none; /* Evita que el canvas capture eventos del ratón */
            z-index: -1; /* Coloca el canvas detrás del contenido */
        }

        .orange-text {
            color: #fff; /* Cambio a color blanco */
            padding: 20px; /* Añadido para separar el texto del borde de la ventana */
            font-size: 1.2em; /* Tamaño de letra ajustado */
            line-height: 1.6; /* Espaciado entre líneas */
        }

        .image-container {
            display: grid; /* Utilizar el modelo de cuadrícula */
            grid-template-columns: repeat(3, 1fr); /* Tres columnas de igual tamaño */
            gap: 20px; /* Espacio entre las imágenes */
            justify-items: center; /* Centrar las imágenes horizontalmente */
            align-items: center; /* Centrar las imágenes verticalmente */
            max-width: 100%; /* Ajustar el ancho máximo del contenedor */
            margin: auto; /* Centrar el contenedor */
            padding: 20px;
        }

        .image-box {
            width: 600px; /* Tamaño del cuadro */
            height: 600px;
            background-color: rgba(0, 0, 0, 0.5); /* Fondo negro translúcido */
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 20px; /* Redondea los vértices */
            transition: transform 0.3s ease;
        }

        .image-box img {
            max-width: 100%; /* Ajustar el ancho máximo de las imágenes */
            max-height: 100%; /* Ajustar la altura máxima de las imágenes */
            height: auto; /* Mantener la proporción de aspecto */
            width: auto;
        }

        .image-box:hover {
            transform: scale(1.05); /* Efecto hover más sutil */
            cursor: pointer; /* Cambiar el cursor al pasar sobre la imagen */
        }

        .white-title {
            text-align: center; /* Centrar el título */
            color: #ffa500; /* Color naranja */
            font-family: 'Orbitron', sans-serif; /* Misma tipografía que el título principal */
            font-size: 1.5em; /* Tamaño del título */
            margin-top: 20px; /* Espacio superior */
        }
    
/* Media query para pantallas pequeñas (móviles) */
@media screen and (max-width: 800px) {
    .image-container {
        grid-template-columns: 1fr; /* Una columna */
        grid-gap: 10px; /* Ajustar el espacio entre las imágenes si es necesario */
    }

    .image-box {
        width: 100%; /* Asegura que la imagen ocupe el ancho completo del contenedor */
        height: auto; /* Mantiene la proporción adecuada de la imagen */
    }
}

/* Media query para pantallas de tamaño mediano (notebooks) */

    /* Media query for medium-sized screens (notebooks and desktops up to 1400px) */
    @media screen and (min-width: 801px) and (max-width: 1400px) {
        .image-container {
            display: grid;
            grid-template-columns: repeat(2, 1fr); /* Two equal columns */
            grid-gap: 15px; /* Equal space between all boxes */
            justify-content: center; /* Ensure the grid is centered */
        }

        .image-box {
            width: 400px;
            height: 400px; /* Ensure uniform square size */
        }
    }
    
    .image-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* Two equal columns */
        grid-gap: 15px; /* Equal space between all boxes */
        justify-content: center; /* Ensure the grid is centered */
    }

    .image-box {
        width: 400px;
        height: 400px; /* Ensure uniform square size */
    }
}

/* Ajustes específicos para pantallas de notebooks (1366x768 o similares) */
@media screen and (min-width: 1200px) and (max-width: 1366px) {
    .image-container {
        grid-template-columns: repeat(2, 1fr); /* Mantener dos columnas */
        grid-gap: 15px; /* Ajustar el espacio entre los cuadros */
        max-width: 90%; /* Ajustar el contenedor al 90% para evitar zoom excesivo */
        margin: auto; /* Centrar el contenedor */
    }

    .image-box {
        width: 100%; /* Asegurar que las imágenes se adapten al ancho disponible */
        height: auto; /* Mantener proporción correcta */
    }

    header h1 {
        font-size: 2em; /* Ajustar el tamaño del título */
    }

    .orange-text {
        font-size: 1.1em; /* Ajustar el tamaño del texto para evitar zoom */
    }
}

@media screen and (min-width: 300px) and (max-width: 482px) {
    footer {
        padding: 0.5em; /* Reduce padding to make the rectangle smaller */
        font-size: 0.75em; /* Reduce font size to match smaller screen sizes */
    }
}

    /* Media query para dimensiones móviles (320px a 800px) sin scroll horizontal y con contenedores ajustados */
    @media screen and (min-width: 320px) and (max-width: 800px) {
        .image-container {
            grid-template-columns: 1fr; /* Una sola columna */
            grid-auto-rows: 320px; /* Ajustar la altura de los contenedores */
            grid-gap: 15px; /* Espacio uniforme entre los cuadros */
            justify-items: center; /* Centrar las imágenes */
            overflow-x: hidden; /* Quitar scroll horizontal */
        }

        .image-box {
            width: 320px; /* Ajustar el ancho del cuadro */
            height: 320px; /* Ajustar la altura del cuadro */
            background-color: rgba(0, 0, 0, 0.5); /* Fondo negro translúcido */
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 20px; /* Bordes redondeados */
            transition: transform 0.3s ease;
        }

        .image-box img {
            max-width: 100%; /* Ajustar imagen al ancho del cuadro */
            max-height: 100%; /* Ajustar imagen a la altura del cuadro */
            object-fit: contain; /* Asegurar que la imagen mantenga su proporción */
            margin: auto; /* Centrar la imagen */
        }
    }

    /* Media query para dimensiones de tablet (801px a 1024px) sin scroll horizontal y con contenedores ajustados */
    @media screen and (min-width: 801px) and (max-width: 1024px) {
        .image-container {
            grid-template-columns: repeat(2, 1fr); /* Dos columnas */
            grid-auto-rows: 360px; /* Ajustar la altura de los contenedores */
            grid-gap: 15px; /* Espacio uniforme entre los cuadros */
            justify-items: center; /* Centrar las imágenes */
            max-width: 95%; /* Ajustar el ancho máximo al 95% */
            margin: auto; /* Centrar el contenedor */
            overflow-x: hidden; /* Quitar scroll horizontal */
        }

        .image-box {
            width: 360px; /* Ajustar el ancho del cuadro */
            height: 360px; /* Ajustar la altura del cuadro */
            background-color: rgba(0, 0, 0, 0.5); /* Fondo negro translúcido */
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 20px; /* Bordes redondeados */
            transition: transform 0.3s ease;
        }

        .image-box img {
            max-width: 100%; /* Ajustar imagen al ancho del cuadro */
            max-height: 100%; /* Ajustar imagen a la altura del cuadro */
            object-fit: contain; /* Asegurar que la imagen mantenga su proporción */
            margin: auto; /* Centrar la imagen */
        }
    }

    /* Media query para dimensiones móviles S (320px a 1024px) con reducción del 20% en el tamaño de los contenedores */
    @media screen and (min-width: 320px) and (max-width: 1024px) {
        .image-container {
            grid-template-columns: 1fr; /* Una sola columna */
            grid-auto-rows: 256px; /* Reducción del tamaño de los contenedores (320px a 256px, reducción del 20%) */
            grid-gap: 15px; /* Espacio uniforme entre los cuadros */
            justify-items: center; /* Centrar las imágenes */
            overflow-x: hidden; /* Quitar scroll horizontal */
        }

        .image-box {
            width: 256px; /* Reducción del 20% en el tamaño del ancho */
            height: 256px; /* Reducción del 20% en el tamaño de la altura */
            background-color: rgba(0, 0, 0, 0.5); /* Fondo negro translúcido */
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 20px; /* Bordes redondeados */
            transition: transform 0.3s ease;
        }

        .image-box img {
            max-width: 100%; /* Ajustar imagen al ancho del cuadro */
            max-height: 100%; /* Ajustar imagen a la altura del cuadro */
            object-fit: contain; /* Asegurar que la imagen mantenga su proporción */
            margin: auto; /* Centrar la imagen */
        }
    }