body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow-x: hidden;
}

.gallery {
    padding: 1em;
    /* min-height: 120vh; */
    width: 100%;
    height: 600px;
}
button a {
    color:#fff;
    text-decoration: none;
}
.buttons {
    /* padding: 2em 0 6em 0; */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

/* .buttons {
    padding: 2em 0 6em 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
} */

.buttons button {
    margin: 1em;
    /* padding: 0.7em 1.5em; */
    font-size: 1.1em;
    border:none;
    /* background:blue; */
    color:#fff;
    border:2px solid #111;
    border-radius: 0.2em;
    cursor: pointer;
    transition: 0.3s;

    border-radius: 40px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, .5);
    padding-block: 5px;
    min-width:130px;
}
/* .buttons button {
    margin: 1em;
    padding: 0.7em 1.5em;
    font-size: 1.1em;
    border:none;
    background:blue;
    color:#fff;
    border:2px solid #111;
    border-radius: 0.2em;
    cursor: pointer;
    transition: 0.3s;
} */

.buttons button:hover,
.buttons .btn-clicked {
    background: #fff;
    color: #111;
}

.images {
    /* max-width: 1360px; */
    margin: 0 auto;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    /* flex-wrap: wrap; */
    gap: 2em;
}

.images img {
    width: 15em;
    /* margin: 1em; */
    border-radius: 0.2em;
    transition: 0.6s;
}

/* Classes for Javascript */
.images .img-expand {
    width: 15em;
    margin: 1em
}

.images .img-shrink {
    width: 0em;
    margin: -1em;
}

@media screen and (max-width: 1439px) {
    .images {
        max-width: 896px;
    }
}

@media screen and (max-width: 986px) {
    .image {
        align-items: center;
        flex-direction: column;
    }
    .images img {
        margin-right: 0 !important;
    }
}

@media screen and (max-width: 600px) {
    .buttons {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1em;
        margin-bottom:1em;
    }
    .buttons button {
        width: 100%;
        display: block;
        margin:0;
    }

    .images .img-expand,
    .images img {
    width:100%;
    }
}

@media screen and (max-width:450px) {
    .images {
        height: 550px;
        width: 100vw;
        overflow-y: scroll !important;
        display: flex !important;
        flex-direction: column !important;
    }
}