body{
    display:flex;
    flex-direction:row;


    justify-content: space-between;
    align-items: start;
    
    margin-top: 0px;
    margin-left:0px;
    margin-right:10px;

    overflow: hidden;

    width:100%;
    height: 100vh;

    
    background-color:rgb(20, 22, 47);
    
}

.left-content{
    display: flex;
    flex-direction: column;

    align-items: center;

    width: 32%;

    height:100%;

    padding: 2px;
    margin-right: 5px;

    overflow-y: auto;

    
    background-color:rgb(52, 57, 102); 

    border:#20278e 4px;
    border-style:inset;
    
}



.title-frame{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    width:420px;
    max-width: 85%;

    margin:10%;
    margin-left:0%;
    margin-right:0%;


}

.title-frame img{

    object-fit: fill;
    width:100%;
    max-width:300px;
    max-height: 160px;
    
}

.nav-frame{
    display: flex;
    flex-direction: column;

    padding: 2px;

    background-color:rgba(45, 54, 148, 0.489);

    width:80%;


    border:#3842ce92 10px ridge;
    border-radius: 4px;

}

.main-options{
    display:flex;
    flex-direction: row;

    padding:2px;

}

.main-options img{
    object-fit: cover;
    width:100%;
}

button {

    object-fit: cover;
    min-height: 40px;
    height:50px;
    width:100%;
    max-width: 200px;

    opacity: 0.9;

}

.secondary-options-list{
    display: flex;
    flex-direction: column;

    overflow-y: auto;


    padding:2px;

}

.secondary-options-list img {
    margin:10px;
    margin-left:30px;
    width:50%;
}

.secondary-options-list button {
    margin:10px;
    margin-left:30px;
    width:50%;
}

.right-content{
    display: flex;
    flex-direction: column;
    align-items: center;

    width: 65%;

    max-height: 97.5%;

    min-height: 0;

    overflow:hidden ;

    padding: 2px;
    


}


.info-frame{


    display: flex;
    justify-content: center;
    align-items: center;

    margin: 8%;
    margin-bottom: 20px;
    margin-top: 10px;

    padding:2%;
    padding-top: 4%;
    padding-bottom: 4%;
    
    min-width: 56%;
    max-height: 200px;
    flex-shrink: 0;

    border: rgba(184, 89, 7, 0.671) 10px ridge;
    border-radius: 8px;

    background-color:rgba(244, 242, 229, 0.84);
}

.photos-frame{
    flex: 1;          
    min-height: 0; 

    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;

    overflow-y:auto;
    overflow-x: hidden;
 

    max-height:100%;
    min-height: 300px;


    display: none;



    border:#20278e 5px ridge;
    border-radius: 4px;

    background-color:black;
}

.photos-frame .photos-frame-top-bg{
    width:100%;
}

.photos-frame-bottom-bg {
    width:100%;
    position: relative;
    align-self: end;
    flex-shrink: 0;
}


.photos-list{
    margin:5px;
    margin-left:10%;
    margin-right:10%;



    display: flex;
    flex-direction: column;
    align-items: center;
}



.photos-list img{
    object-fit: fill;

    margin: 10px;

    min-width: 500px;
    width:100%;

}

/* Tooltip container */
.img-wrapper {
  position: relative;
  display: inline-block;
  
}

/* The tooltip itself */
.img-wrapper .tooltip {
  visibility: hidden;
  
  position: absolute;
  bottom: 14px;
  left: 50%;  
  transform: translateX(-50%);

  
  width:60%;
  min-width: fit-content;
  
  text-align: center;
  
  background:rgba(0,0,0,0.6);
  opacity: 0;
  transition: opacity 0.4s;
  color:azure;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 1rem;
  z-index: 10;
}

/* Show instantly on hover */
.img-wrapper:hover .tooltip {
  visibility: visible;
  opacity: 1;
}

.vert-mode-scroll-button{
  display:none;
      
}

    

@media (max-width:1000px){


    body{
    display:flex;
    flex-direction:column;
    align-items: center;


   width:100%;
   height:100%;
   padding: 5px;

    overflow-y: auto;
    overflow-x: hidden;
    }

    .left-content {
        width:95%;
        margin-bottom: 20px;
        margin-right: 0;

        align-items: center;

        background-color: transparent;
        border: 0;
        height: fit-content;
    }

    .right-content {
        width:95%;
        max-height: 100%;
    }

    .nav-frame{
        max-width: 400px;

    }




    .photos-list{
        height:fit-content;
        overflow: hidden;
    }

    .photos-frame-top-bg{
        display: none;
    }

    .photos-frame-bottom-bg{
        display: none;
    }
    
    .vert-mode-scroll-button{
        min-width: 100%;
        margin-top: 10px;
      display:inline;
      background-color:rgb(85, 83, 104);
      color:aliceblue;
    }
}



@keyframes bg-move {
        0% {
            background-position-y: 100%;
        } 100% {
            background-position-y: 2%;
        }
    }