/* Menú central */
.galeria {
    display: flex;
    justify-content: center;
    gap: 2vw; /* Proporcional al ancho de la pantalla */
    margin: 7vh auto; /* Proporcional a la altura de la pantalla */
    padding: 10%;
}

.item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 12vw; /* Proporcional al ancho de la pantalla */
    max-width: 180px; /* Límite máximo para evitar que se agrande demasiado */
    height: 4vw;
    max-height: 60px;
    border: 0.15rem solid #00ffff; /* Tamaño del borde escalable */
    color: #00ffff;
    font-size: 1.25rem; /* Tamaño de fuente adaptable */
    font-family: 'VT323', monospace;
    text-decoration: none;
    border-radius: 2rem;
    transition: 0.3s;
}

.item:hover {
    background: #FF0099;
    color: #EAEAEA;
    border: 0.15rem solid #EAEAEA; /* Tamaño del borde escalable */

}



/* MEDIA QUERIES */
@media (max-width: 768px) {
    .galeria {
        gap: 5vw; /* Mayor separación entre elementos en pantallas pequeñas */
        max-width: 100vw; /* Evita que los elementos se desborden */
        overflow: hidden; /* Previene scroll innecesario */
    
    }

    .item {
        width: 35vw; /* Aumenta el ancho para que sean más fáciles de presionar */
        height: 10vw;
        font-size: 20px; /* Aumenta la legibilidad */
    }
}

@media (max-width: 480px) {
    .galeria {
        flex-direction: column; /* Apila los botones en pantallas muy pequeñas */
        align-items: center; /* Centra los botones */
        gap: 3vh;
        max-width: 100vw; /* Evita que los elementos se desborden */
        overflow: hidden; /* Previene scroll innecesario */
    }

    .item {
        width: 60vw; /* Más ancho en móviles */
        height: 12vw;
        font-size: 20px; /* Mayor tamaño de fuente */
    }
}