.pagination {
    text-align: center;
    margin: 30px 0 10px 0;
}
.pagination ul {
    display: inline-block;
    padding: 0;
    margin: 0;
    list-style: none;
}
.pagination li {
    display: inline;
    margin: 0 4px;
    padding: 6px 12px;
    background: rgba(0,0,0,0.15);
    border-radius: 5px;
    color: #fff;
    font-weight: 500;
}
.pagination li.active {
    background: #007bff;
    color: #fff;
}
.pagination li.disabled {
    color: #aaa;
    background: #222;
}
.pagination a.page-link {
    color: #fff;
    text-decoration: none;
    transition: background 0.2s;
}
.pagination a.page-link:hover {
    background: #0056b3;
}
main {
    padding: 20px;
    margin: auto;
    max-width: none;
}


#title {
    text-align: center;
    color: white;
    margin: 20px auto;
    padding: 20px;
    width: fit-content;
    background: rgba(0, 0, 0, 0.291);
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}


.gallery {
    /* Replaced grid with CSS columns for a cross-browser masonry effect */
    column-width: 250px;
    column-gap: 15px;
    padding: 20px;
    margin: 0 auto 40px auto; /* Add bottom margin between blocks */
    opacity: 0;
    animation: fadeInGallery 0.7s ease forwards;
    box-shadow: 0 2px 16px 0 rgba(0,0,0,0.08);
    border-radius: 12px;
    background: rgba(0,0,0,0.04);
}

@keyframes fadeInGallery {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Target direct children of the gallery (<a> or <img>) for layout */
.gallery > * {
    break-inside: avoid; /* Prevents items from splitting across columns */
    margin-bottom: 15px; /* This acts as the vertical gap */
    display: block;      /* Ensures <a> tags behave correctly for layout */
}

.gallery img {
    width: 100%;
    display: block; /* Removes bottom space under the image */
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
}

.gallery img:hover {
    transform: scale(1.05);

}

.center-link {
    text-align: center;
    margin-bottom: 20px; /* Optional: Adds spacing below the link */
}