* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


.dark{
    background-color: black;
}
#thumbnail-container{
    display: grid;
    /* grid-template-columns: repeat(3,240px); */
    /* margin-top: 30px; */
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); /* Auto-fills columns based on screen size */
    margin-top: 20px;
    gap: 10px;
}
.thumbnail-images{
    display: grid;
    /* margin-right: 2px; */
    /* margin-bottom: 2px; */
    overflow: hidden;
    border: 1px solid var(--border, #303846);
    border-radius: 10px;
    background: #141820;
}
#gallery-options {
    /* height: 10vh;
    display: inline-flex;
    width: 100%;
    flex-direction: row-reverse;
    font-size: 40px;
    position: relative;
    bottom: 10px;
    justify-content: flex-start;
    align-items: center;
    top: 0px;
    z-index: 1; */
    position: absolute;
    right: 0;
    /* display: inline; */
    /* top: 0; */
    /* height: 10vh; */
    width: 100%;
    /* background: #000000; */
    z-index: 2;
    /* flex-direction: row-reverse; */
    /* font-size: 20px; */
    color: white;
    /* z-index: 600; */
    /* justify-content: right; */
    /* float: right; */
}
#gallery-options-right{
    position: absolute;
    right: 0px;
    /* width: 70%; */
    /* margin-left: 41px; */
    display: inline-block;
 }
#gallery-close-btn{
    font-size: 40px;
    /* float: right; */
    /* margin-left: 10px; */
    right: 5px;
}
#gallery-play-btn{
    /* left: 70vw; */
    font-size: 45px;
    /* float: right; */
}
#gallery-dropdown{
    /* display: flex; */
    flex-direction: column;
    /* float: right; */
    position: relative;
    top: 10px;
    height: 0px;
}
#image-counter{
    display: inline-block;
    position: relative;
    /* right: 0; */
    top: 20px;
}
.button{
    display: inline-block;
    /* margin-right: 30px; */
    /* float: right; */
    /* left: 0; */
    position: relative;
    right: 0;
    margin-left: 20px;
}
#timer{
    color:white;
    background: red;
    /* width: 102px; */
    /* font-size: 50px; */
    /* width: 60px; */
}
#gallery-preview{
    background-color: red;
    height: 70px;
    position: relative;
    bottom: 0px;
    z-index: 900;
}
.gallery-container {
    position: fixed;
    width: 100%;
    height: 100%;
    display: none;
    top: 0;
    /* bottom: auto; */
    /* margin: auto 0; */
    background: fixed;
    z-index: 31;
    background: black;
}

.image-container {
    position: relative;
    width: 100%;
    height: 100%;
    /* top: 60px; */
    /* width: fit-content; */
    /* height: 80vh; */
    /* bottom: 50vh; */
    /* background: black; */
}

.thumbnail-images img  {
    width: 100%;
    height: auto;
    max-height: 440px;
    object-fit: cover;
    display: block;
    cursor: zoom-in;
}
#active-image{
    /* width: 100vw; */
    /* height: 100vh; */
    /* margin-bottom: 10vh; */
    /* position: absolute; */
    /* top: 50%; */
    /* left: 50%; */
    /* transform: translate(-50%, -50%); */
    /* overflow: scroll; */
}
.active-image{
    /* width: 100vw; */
    /* height: 100vh; */
    /* margin-bottom: 10vh; */
    /* position: absolute; */

    /* overflow: scroll; */
}
@media (orientation: landscape) and (min-height: 800px){
    #active-image{
        width: auto;
        margin: 0 auto;
        position: relative;
        height: 100vh
    }

}
@media (orientation: landscape) and (max-height: 500px){
    #active-image{
        height: 100vh;
        width: 100vw;
    }

}

#active-image img{
    width: 100vw;
    height: 100vh;
    object-fit:cover;

}
.overlay {
    position: fixed;
    /* top: 50vh; */
    bottom: 0;
    width: 20%;
    cursor: pointer;
    height: 85%;
    /* background: red; */
    /* justify-content: center; */
}
.show{
    display: block;
    flex-direction: column;
    /* align-content: space-between; */
}
.hide{
    display: none;
}
#hide{
    display: none;
}
.show-thumbnail{
    display: grid;
}
.left {
    left: 0;
}

.right {
    right: 0;
}
.gallery-container .portrait{
    width: 100vw;
    height: 90vh;
}
.gallery-container .landscape-styling{
    height: 100vh;
    width: 100vw;
    /* margin: auto 0; */
    display: block;
    position: absolute;
    /* top: 10vh; */
    /* left: 50%; */
     /* Half the height */
    margin-top: auto;
    margin-bottom: auto;
    /* object-fit: contain; */
}
.gallery-container .portrait-landscape{
        /* height: 100vh; */
        width: 100vw;
        /* margin: auto 0; */
        display: block;
        position: absolute;
        top: 20%;
}
.gallery-container .landscape{
    width:100vw;
    height:100vh;
}
@media (min-width: 720px) {
    #thumbnail-container {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
    .gallery-container{
        /* width: 100vw; */
        /* height: 400px; */
        /* position: relative; */
        }
    .image-container{
        /* width: fit-content; */
        /* height: 100vh; */
        /* position: relative; */
    }
}
@media (min-width: 990px) {
    #thumbnail-container {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    }
}
@media (min-width: 1200px) {
    #thumbnail-container {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    }
    .gallery-container{
        /* width: 100vw; */
        /* height: 400px; */
        /* position: relative; */
        }
    .image-container{
        position: relative;
        top: 0px;
        margin: 10px auto;
    }

}
@media (orientation: landscape) and (max-width: 720px){
    .landscape-images{
        width: 100vw;
        height: 100vh;
    }
}

/* Keep a one-photo gallery at a sensible card width rather than stretching it. */
#thumbnail-container {
    grid-template-columns: repeat(auto-fill, minmax(180px, 280px));
    justify-content: start;
}
.thumbnail-images:focus-visible {
    outline: 3px solid #ec3b83;
    outline-offset: 3px;
}
.gallery-modal-open { overflow: hidden; }
.gallery-modal[hidden] { display: none; }
.gallery-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: 24px;
}
.gallery-modal__backdrop { position: absolute; inset: 0; background: rgba(3, 5, 9, .9); }
.gallery-modal__panel {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: min(100%, 1100px);
    height: min(100%, 850px);
}
.gallery-modal__image {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 18px 56px rgba(0, 0, 0, .55);
}
.gallery-modal__close,
.gallery-modal__previous,
.gallery-modal__next {
    position: absolute;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 50%;
    background: rgba(20, 24, 32, .88);
    color: #fff;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
}
.gallery-modal__close { top: 0; right: 0; font-size: 28px; }
.gallery-modal__previous { left: 0; }
.gallery-modal__next { right: 0; }
.gallery-modal__count {
    position: absolute;
    bottom: 0;
    margin: 0;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(20, 24, 32, .88);
    color: #fff;
    font-size: 13px;
}
@media (max-width: 600px) {
    .gallery-modal { padding: 14px; }
    .gallery-modal__previous { left: 4px; }
    .gallery-modal__next { right: 4px; }
    .gallery-modal__close { top: 4px; right: 4px; }
}