body {
     font-family: Arial, sans-serif;
     display: flex;
     justify-content: center;
     align-items: center;
     height: 100vh;
     margin: 0;
     background-color: #f4f4f4;
}

.container {
     text-align: center;
     max-width: 1200px; /* Mantener el ancho máximo del contenedor */
     width: 100%;
}

.small-card {
    width: 5%; /* Cambiar el tamaño al 25% del contenedor */
    height: auto;
    margin: 5px;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-sizing: border-box;
}

#main-image-container {
     margin-bottom: 20px;
}

#main-image {
     max-width: 400%;
     max-height: 1200px; /* Hacer la imagen principal el doble de grande */
     width: auto;
     height: auto;
     border: 2px solid #333;
     border-radius: 8px;
}



#all-cards-container {
    display: flex;
    flex-wrap: wrap; /* Permitir que las cartas se acomoden en varias filas */
    gap: 10px; /* Espaciado entre las cartas */
    justify-content: center; /* Centrar las cartas en el contenedor */
}

#thumbnail-container {
     display: flex;
     justify-content: center;
     gap: 10px;
     margin-bottom: 20px;
}

.thumbnail {
     width: 120px; /* Mantener el tamaño de las miniaturas */
     height: auto; /* Mantener la proporción de las miniaturas */
     max-height: 120px;
     object-fit: contain; /* Mostrar la imagen completa dentro del contenedor */
     border: 2px solid #333;
     border-radius: 8px;
}

button {
     padding: 10px 20px;
     font-size: 16px;
     background-color: #007bff;
     color: white;
     border: none;
     border-radius: 5px;
     cursor: pointer;
     margin: 10px;
}

button:disabled {
     background-color: #ccc;
}

button:hover:enabled {
     background-color: #0056b3;
}