ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  position: fixed; /* Fix the nav bar at the top of the page */
  top: 0; /* Ensure it stays at the top */
  width: 100%; /* Make it span the entire width */
  z-index: 1000; /* Ensure it stays on top of other content */
  font-family: Arial, sans-serif; /* Set font to sans-serif globally for the nav bar */
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 16px; /* Default font size for desktop */
}

/* Change the link color to #111 (black) on hover */
li a:hover {
  background-color: #111;
}

/* Adjust font size for mobile screens */
@media (max-width: 800px) {
  li a {
    font-size: 20px; /* Larger text for smaller screens */
  }
}


body {
  margin: 0; /* Remove default margins to prevent layout issues */
  padding-top: 50px; /* Add padding equal to the nav bar's height to avoid content overlap */
}


#gallery {
	line-height:0;
	-webkit-column-count:5; 
	-webkit-column-gap:5px;
	-moz-column-count:5;
	-moz-column-gap:5px;
	column-count:5;
	column-gap:5px;

 }

 #gallery img {
	width: 100% !important;
	height: auto !important;
	margin-bottom:5px;
	transition: box-shadow 0.3s ease; /* Smooth transition for the shadow effect */
 }

/* Hover effect: subtle shadow */
#gallery img:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.8); /* Adds a soft shadow on hover */
}

 @media (max-width: 1200px) {
	#gallery {
	 -moz-column-count:    4;
	 -webkit-column-count: 4;
	 column-count:         4;
	}
 }

 @media (max-width: 1000px) {
	#gallery {
	 -moz-column-count:    3;
	 -webkit-column-count: 3;
	 column-count:         3;
	}
 }

 @media (max-width: 800px) {
	#gallery {
	 -moz-column-count:    2;
	 -webkit-column-count: 2;
	 column-count:         2;
	}
 }

 @media (max-width: 400px) {
	#gallery {
	 -moz-column-count:    1;
	 -webkit-column-count: 1;
	 column-count:         1;
	}
 }