body {
    font-family: 'Bitter', Georgia, Times, sans-serif;
}

h1 {
    margin: 2em;
}

.pswp__caption__center {
    text-align: center;
}

.gallery {

    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

figure {
    display: inline-block;
    width: 94vw;
    margin: .2vw;
    padding: 0;
    margin-bottom: 70px;
    /* box-shadow: 0px 10px 13px -7px #000000, 5px 5px 15px 5px rgba(0, 0, 0, 0); */
    border-radius: 2px;
    box-shadow: 0px 0px 0px 3px #4B4C4B, 0px 0px 4px 5px #000000;
}

img {
    width: 100%;
    /*height: 100%;*/
}

.spacer {
    /* height: 5em; */
}

.gallery {
    width: 96vw;
}

a {
    margin: 0;
    padding: 0;
}

/* ___________________________ */
nav.pagination {
    display: flex;
    /* Make the navigation container a flexbox */
    justify-content: center;
    /* Center the pagination links horizontally */
    margin: 0 auto;
    /* Center the pagination horizontally within the webpage */
    list-style: none;
    /* Remove default list styling */
    padding: 0;
    /* Remove default padding */
}

.pagination li {
    display: inline-block;
    /* Display list items inline for one-line layout */
    margin: 10px 5px;
    /* Add spacing between pagination links */
}

.pagination a.page-link,
.pagination span.current-page {
    padding: 5px 10px;
    /* Adjust padding for link/span content */
    border: 1px solid #ddd;
    /* Add a subtle border */
    border-radius: 4px;
    /* Rounded corners for visual appeal */
    text-decoration: none;
    /* Remove underline from links */
    color: white;
    /* Text color */
}

.pagination a.page-link:hover {
    background-color: gray;
    /* Hover effect for links */
}

.pagination .active span.current-page {
    background-color: green;
    /* Highlight the current page */
    font-weight: bold;
    /* Make the current page number bolder */
}

/* _______________________________________ */
.current-page {
    font-weight: bold;
}

.container-max {
    width: 98vw;
}

.shuffle {
    font-size: 1.2rem !important;
    color: #c6c6c6;
    margin: 0 !important;
    transition: color 0.5s ease-in-out;
}

.shuffle:hover {
    color: white;

}
        .BtnClass1 {
    font-size: 1.2rem !important;
    color: #ff0066;
    margin: 0 !important;
    transition: color 0.5s ease-in-out;
}

.BtnClass1:hover {
    color: white;

}
.BtnClass2 {
    font-size: 1.2rem !important;
    color: #ffaeae;
    margin: 0 !important;
    transition: color 0.5s ease-in-out;
}

.BtnClass2:hover {
    color: white;

}
.BtnClass3 {
    font-size: 1.2rem !important;
    color: #98ffa6;
    margin: 0 !important;
    transition: color 0.5s ease-in-out;
}

.BtnClass3:hover {
    color: white;

}
.BtnClass4 {
    font-size: 1.2rem !important;
    color: #ff3333;
    margin: 0 !important;
    transition: color 0.5s ease-in-out;
}

.BtnClass4:hover {
    color: white;

}
.BtnClass5 {
    font-size: 1.2rem !important;
    font-family: "Open Sans", "Helvetica Neue", sans-serif !important;
    color: #fff6c5;
    margin: 0 !important;
    transition: color 0.5s ease-in-out;
}

.BtnClass5:hover {
    color: white;

}

.BtnClass6 {
    font-size: 1.2rem !important;
    font-family: "Open Sans", "Helvetica Neue", sans-serif !important;
    color: #ffff00;
    margin: 0 !important;
    transition: color 0.5s ease-in-out;
}

.BtnClass6:hover {
    color: white;

}
.BtnClass7 {
    font-size: 1.2rem !important;
    color: #00b6ff;
    margin: 0 !important;
    transition: color 0.5s ease-in-out;
}

.BtnClass7:hover {
    color: white;

}

@media screen and (min-width: 320px) {
    figure {
        width: 42vw;
    }
}

@media screen and (min-width: 480px) {
    figure {
        width: 28vw;
    }
}



@media screen and (min-width: 768px) {
    figure {
        width: 21vw;
    }
}



@media screen and (min-width: 992px) {
    figure {
        width: 16vw;
    }
}

@media screen and (min-width: 1200px) {
    figure {
        width: 12vw;
    }
}