#navbar{
    width:100%;
    height: 40px;
    border: 0px solid red;
    display:flex;
    margin: auto;
    align-items: center;
    justify-content: space-around;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  }
  #navbar>div{
    width:5%;
    border: 0px solid;
  }
  #navbar>img{
    width: 100%;
    text-align: center;
  } 
  #navbar>input{
    border-radius: 20px;
    width:45%;
    font-size: 15px;
    background: transparent;
    padding: 10px 0px;
    padding-left: 10px;
   }
   #navbar>a{
    color: gray;
    text-decoration: none;
   } 
   #navbar>button>a{
    color: gray;
    text-decoration: none;
   }
   #navbar>a:hover{
    color: black;
   }
   #navbar>button{
    font-size: 15px;
    background: transparent;
    padding: 5px;
    border: 1px solid;
    text-decoration: none;
   }
   #navbar2{
    width:100%;
    height: 40px;
    border: 0px solid red;
    display:flex;
    margin: auto;
    align-items: center;
    justify-content: space-around;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
   }
   #navbar2>a{
    color: gray;
    text-decoration: none;
   }
   #navbar2>a:hover{
    color: black;
   }
   #gallery {
    width: 100%;
    height: 600px;
    margin: 0px;
    position: relative;
} 
 #gallery>img{
    width:100%; 
    height: 100%;
 } 
 #header{
    color: white;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    margin: 10px;
    transform: translate(-50%,-50%);
    position: absolute;
    top: 50%;
    left: 40%;
    line-height: 30px;
} 
#header>h1{
    font-size: 45px;
}
#header>p{
    font-size: 20px;
}
.shade {
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
position: absolute;
top: 0;
left: 0;
}
.imggallery{
    display: flex;
    flex-direction: row;
    justify-content: center;

    

}
.imggallery>div{
    display: flex;
    flex-direction: column;
    width:32.5%;
    gap: 10px;
    margin:10px;
    
}
.imggallery>div>img{
    width:100%;
    
}
/* popup window */
.img-window{
  width:100%;
  height:100%;
  background-color: rgba(0,0,0,0.9);  
  position: fixed;
  top: 0;
  left:0;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
z-index: 100;
}
.img-window img{
    max-height: 80vh;
    max-width: 80vw;
}
.img-btn-next{
   display: block; 
   padding:6px 10px;
   border-radius: 5px;
   background-color: white;
   position: fixed;
   top:45%;
   z-index: 500;
   font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
   color: black;
   cursor: pointer;
   text-transform: uppercase;
   font-size: 25px;
   font-weight: bolder;
}
.img-btn-next:hover{
    opacity: 0.8;
}
.img-btn-prev{
    display: block; 
    padding:6px 10px;
    border-radius: 5px;
    background-color: white;
    position: fixed;
    top:45%;
    z-index: 500;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    color: black;
    cursor: pointer;
    text-transform: uppercase;
    font-size: 25px;
   font-weight: bolder;
   text-align: center;
 }
 .img-btn-prev:hover{
     opacity: 0.8;
 }
 #more{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px;
}
 #more>button{
    font-size: 20px;
    border-radius: 10px;
    background-color: #D50000;
    color: white;
    border: 0px;
    padding: 10px;
    margin-bottom: 50px;
 }
 @media all and (max-width: 1100px) and (min-width:601px) {
    /* Medium Screen Styles  */
    #gallery {
        width: 100%;
        height: 600px;
        margin: 0px;
        position: relative;
    }
    #header>h1{
        font-size: 30px;
    }
    #header>p{
        font-size: 15px;
    } 
    .imggallery{
        display: grid;
        grid-template-columns: repeat(2,1fr);
        justify-content: center;
        width:100%;
        height: auto;
        gap:5px;
        
        
    }
    .imggallery>div{
        display: flex;
        flex-direction: column;
        width: 90%;
        gap: 10px;
        margin:10px;
        
    }
    #navbar{
        width:100%;
        height: auto;
        border: 0px solid red;
        display:grid;
        grid-template-columns:repeat(10,1fr);
        margin: auto;
        align-items: center;
        justify-content: space-around;
        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
      }
      #navbar2{
        width:100%;
        height: auto;
        border: 0px solid red;
        display:grid;
        grid-template-columns:repeat(6,1fr) ;
        margin: auto;
        align-items: center;
        /* justify-content: space-around; */
        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
       }
 }
 @media all and (max-width: 601px) and (min-width:200px) {
    /* Small Screen Styles  */
    #gallery {
        width: 100%;
        height: 600px;
        margin: 0px;
        position: relative;
    } 
    #header>h1{
        font-size: 20px;
    }
    #header>p{
        font-size: 15px;
    } 
    .imggallery{
        display: flex;
        flex-direction: column;
        justify-content: center;
    
        
    }
    .imggallery>div{
        display: flex;
        flex-direction: column;
        width:90%;
        gap: 10px;
        margin:10px;
        
    }
    #navbar{
        width:100%;
        height: auto;
        border: 0px solid red;
        display:grid;
        grid-template-columns:repeat(5,1fr);
        margin: auto;
        align-items: center;
        justify-content: space-around;
        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
      }
      #navbar2{
        width:100%;
        height: auto;
        border: 0px solid red;
        display:grid;
        grid-template-columns:repeat(4,1fr) ;
        margin: auto;
        align-items: center;
        justify-content: space-around;
        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
       }
 }