body, ul, li, h1, h2, a{
 	width: 100%;
 	height: auto;
 	background-color: white;
  	font-family: tahoma;
}

.img{
	max-width: 100%;
	height: 100%;
	}

.pic-container{
		display: flex;
		/*flex-direction: row;*/
		/*border: 3px solid blue;*/ 	/* border around each container*/
		margin: 0 10px;
		width: 95%;
		/*list-style-type: none;		
		grid-template-columns: 1fr 1fr 1fr 1fr;
		grid-template-rows: auto;
		grid-template-areas: 
			"img1 img2 img3 img4"
			"img5 img6 img7 img8";*/
		gap: 20px; /* Optional: space between grid items*/ 
		}  

.img-gallery{
	display: flex; 
	flex-direction: row;
	max-width: 100%; /* Image fits inside */
  	height: auto;	
	object-fit: cover;
	/*background-color: red; /* testing if pgm reads this*/*/
}
	
.test-container{
	display: inline-flex; /* Shrink-wraps the image */
	flex-direction: row;
	max-width: 100%; /* Image fits inside */
	margin: 10px;
	}

.anchor-square-link {
  display: inline-block;      /* Allows for width and height */
  text-align: left;			  /* Centers text horizontally */
  width: 150px;               /* Fixed width */
  height: 50px;              /* Same height for a square */
  border: 5px solid #000;     /* The visible square border */
  text-decoration: none;      /* Removes default underline */  
  line-height: 50px;         /* Centers text vertically */
  color: #000;
}

.fig-font{
font-size: .75em;
font-weight: 700;
}
		
.category{
	text-align: center
	}

.img1{
	overflow: hidden;
	}

.img2{
	overflow: hidden;
}
.img3{
	overflow: hidden;
		}

.img4{
	overflow: hidden;
		}
.img5{
	overflow: hidden;
		}

.img6{
	overflow: hidden;
	}
	
.img7{
	overflow: hidden;
	}

.img8{
	overflow: hidden;
	}

.img9{
	overflow: hidden;
	}
	
.img10{
	overflow: hidden;
	}
	
.img11{
	overflow: hidden;
	}
	
.img12{
	overflow: hidden;
	}
.img-justify{
	justify-content: center;
	}


.pg-border{				/*blue border around entire page*/
	border: 3px solid blue;
	margin-left: 10px;
	padding: 10px;
}

.img-container{
	width:100%; /* Image width of container */
  height: auto; /* Image height of container */
  object-fit: cover; /* Ensures the image covers the area nicely */
  transition: transform 0.3s ease; /* Smooth transition for the zoom effect */

	
}
.img-container:hover{
	
	transform: scale(1.2); /* Zooms in the image by 50% (1.5 times original size) */ 
}


@media screen and (max-width: 768px) {	/* this @media makes the page responsive for small screens like ipads)*/
  .pic-container{
  	display: flex;
  	flex: 100%;
  	flex-wrap: wrap;
  	flex-grow: 0;
  	}
}

@media screen and (max-width: 360px) {	/* this @media makes the page responsive for small screens like iphones)*/
  .pic-container{
  	display: flex;
  	flex: 100%;
  	flex-wrap: wrap;
  	flex-grow: 0;
  	}
}