body {
    background-color: #901d1d;  /* Establece el color de fondo */
}

/* Estilo para el título h1 */
h1 {
    font-family: 'Comic Neue', cursive, sans-serif;
    font-size: 3em;
    font-weight: bold;
    color: white;
    text-align: center;
    margin-top: 50px;
    transition: color 0.3s ease;
    
}

h1:hover {
    color: #FFC300;
}

@media (max-width: 768px) {
    h1 {
        font-size: 2em;
    }
}

@media (max-width: 480px) {
    h1 {
        font-size: 1.5em;
    }
}


/* Estilo para todas las imágenes (GIFs) */
img {
    width: 300; /* Reducción de tamaño de la imagen */
    height: 300px; /* Ajuste de la altura */
    margin: 10px; /* Espacio alrededor de cada imagen */
    object-fit: cover; /* Hace que la imagen se ajuste sin distorsionarse */
}


img {
    margin: 10px; /* Espacio de 10px alrededor de cada imagen (GIF) */
}


/* Estilo general para las imágenes */
img {
    width: 300px; /* Ajusta el tamaño de las imágenes */
    height: 300px;
    margin: 10px; /* Espacio entre las imágenes */
    object-fit: cover; /* Asegura que la imagen se recorte bien */
    transition: transform 0.3s ease; /* Efecto de transición para el hover */
}



/* Media query para pantallas más pequeñas */
@media (max-width: 768px) {
    img {
        width: 100%; /* Hace que las imágenes ocupen el 100% del ancho en pantallas pequeñas */
        height: auto; /* Mantiene la proporción de la imagen */
    }
}