html { 
    height: 100vh; 
    overflow:hidden;
    
}
body{
    background-color: rgb(7, 22, 34);
    margin: 0;
    height: 100%;
    overflow: hidden;
}

img{
    object-fit: scale-down;
    width: 95vw;
    height: 95vh;
    margin: auto;
    margin-top: 2.5vh;
    margin-bottom: 2.5vh;
    align-self: center;
}

#photos{
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
    overflow-x: hidden;
    scroll-behavior: smooth;
    scrollbar-track-color: black;
    scrollbar-color: rgb(7, 22, 34);
    scrollbar-base-color: rgb(7, 22, 34);
    scroll-snap-type: y mandatory;
}


.photo-div{
    width: 100%;
    height: 100vh;
    margin: auto;
    scroll-snap-align: center;
    display: flex;
}

@media (pointer:none), (pointer:coarse) {
    body{
        overflow-y: scroll;
    }
    #photos{
        flex-direction: row;
        scroll-snap-type: x mandatory;
        overflow-x: scroll;
        overflow-y: hidden;
    }
    img{
        object-fit: scale-down;
        width: 95vw;
        height: 95vh;
        margin: auto;
        margin-left: 2.5vw;
        margin-right: 2.5vw;
        align-self: center;
    }
    html { 
        height: 100vh; 
        overflow-y: scroll;
        
    }
}