* {
    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;
}
.thumbnail-images{
    display: grid;
    /* margin-right: 2px; */
    /* margin-bottom: 2px; */
    border: solid 2px #e4e4e4;
}
#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: 100%;
    display: block;
}
#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;
}
.portrait{
    width: 100vw;
    height: 90vh;
}
.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; */
}
.portrait-landscape{
        /* height: 100vh; */
        width: 100vw;
        /* margin: auto 0; */
        display: block;
        position: absolute;
        top: 20%;
}
.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;
    }
}