body, ul, li, h1, h2, a{
  margin: 0;
  padding: 0;
  font-family: tahoma;
  }
.pg-color{	
		width: 95%;
		margin: auto;
		background-color: white; /*sets entire page background white*/
		}
		
.gallery-border{				/*blue border around entire page*/
	border: 3px solid blue;
	
	padding: 10px;

	}

.photogp-container{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-template-rows: auto;
	place-items: center;
	/*object-fit: cover; *//* Fill cell without distortion */
  	/*max-width: 100%; */  /* Image fits inside */
	justify-content: center; /* Centers all rows horizontally */
  	gap: 10px;
  	margin: 0 0 0 50px;
  	
	}
	
	.photogp5-container{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	grid-template-rows: auto;
	place-items: center;
	/*object-fit: cover; *//* Fill cell without distortion */
  	/*max-width: 100%; */  /* Image fits inside */
	justify-content: center; /* Centers all rows horizontally */
  	gap: 10px;
  	margin: 0 0 0 50px;
  		}

.photogp-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*/
}

.fig-font{
font-size: .75em;
font-weight: 700;
}

.caption-align{
    place-items: center;
 	/*text-align: center;/* */spacing */
	margin-right: 20%;
	 }
	
.txtunderline{
	text-align: left;
	text-decoration: underline; 
	margin: 20px;
	}

.photocenter{
	display: flex;
	justify-content: center;
	text-decoration: underline;
}
.photocolumn-center-1{
	grid-column-start: 1; 
	 }

.photocolumn-center-2{
	grid-column-start: 2; 
	 }
.photocolumn-center-3{
	grid-column-start: 3; 
	 }

.swell-container{
	display: flex;	
	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*/
  	}
 
.swell-container:hover{
	transform: scale(1.4); 	/* Zooms in the image*/
	
}

.img1{
 	overflow: hidden;
	}

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

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

.img6{
	object-fit: cover; /* Fills container, preserves ratio, crops edges */
	overflow: hidden;
}
	
	
.img7{
	overflow: hidden;
	}

.img8{
	overflow: hidden;
	}

.img9{
	overflow: hidden;
	}
	
.img10{
	overflow: hidden;
	}
	
.img11{
	overflow: hidden;
	}
	
.img12{
	overflow: hidden;
	}
.img13{
	overflow: hidden;
	}
.img14{
	overflow: hidden;
	}

.img15{
	overflow: hidden;
	}

.img16{
	overflow: hidden;
	}
.img17{
	overflow: hidden;
	}
.img18{
	overflow: hidden;
	}

.img-justify{
	justify-content: center;
	}


.inline-links a {
  display: block;
  margin-right: 2%; /* Adds space between links */
    
}

.photogrp-center-1{
	grid-column-start: 1; 
	 }

.photogrp-center-2{
	grid-column-start: 2; 
	 }
.photogrp-center-3{
	grid-column-start: 3; 
	 }



.row-container {
  	display: grid; /* Activates the grid layout */
  	grid-template-columns: repeat(3, 1fr);
 	grid-template-rows: auto;
 	grid-template-areas:
 	 "content4 content5 content6"
 	 "content7 content8 content9";  	 
 	max-width: 100%; /* Ensures images are responsive and don't overflow */
  	height: auto;   /* Maintains the image's aspect ratio */
	align-content: start;
    gap: 10px; /* Adds space between images */ 
}

.row-container img {
  flex: 1; /* Allows images to grow and share available space equally */
  max-width: 100%; /* Ensures images are responsive and don't overflow */
  height: auto;   /* Maintains the image's aspect ratio */
}


/* 1. The container for the image */
.zoom-container {
  width:100%; /* Set a fixed width */
  height: 100%; /* Set a fixed height */
  /*overflow: hidden; /* Hide the parts of the image that go outside the container */
}


/* 2. The image itself */
.zoom-container img {
  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 */
}
 
/*3. The zoom effect on hover */
.zoom-container img:hover {
  transform: scale(1.2); /* Zooms in the image*/ 
}




.button-1 {    							/*the buttons are the year groups at top of page and displays the individual years within each year group*/
			display: inline-block;
			font-size:1.5em;
			background-color:#FFFFE0;
			border: 5px solid brown;								
			text-align:center;
	}
.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;
}


.photogp-container {
  	display: grid; /* Activates the grid layout */
  	grid-template-columns: repeat(4, 1fr);
 	grid-template-rows: auto;
 	grid-template-areas:
 	 "content4 content5 content6"
 	 "content7 content8 content9";  	 
 	max-width: 100%; /* Ensures images are responsive and don't overflow */
  	height: auto;   /* Maintains the image's aspect ratio */
	align-content: start;
    gap: 10px; /* Adds space between images */ 
}

.photogp-container img {
  flex: 1; /* Allows images to grow and share available space equally */
  max-width: 100%; /* Ensures images are responsive and don't overflow */
  height: auto;   /* Maintains the image's aspect ratio */
}



@media screen and (max-width: 800px) {
  .photogp-container{
  	display: flex;
  	flex: 100%;
  	flex-wrap: wrap;
  	flex-grow: 0;
  	}
}

@media screen and (max-width: 675px) {
  .photogp-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)*/
  .photogp-container{
  	display: flex;
  	flex: 100%;
  	flex-wrap: wrap;
  	flex-grow: 0;
  	}
}

@media screen and (max-width: 800px) {
  .photogp5-container{
  	display: flex;
  	flex: 100%;
  	flex-wrap: wrap;
  	flex-grow: 0;
  	}
}

@media screen and (max-width: 675px) {
  .photogp5-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)*/
  .photogp5-container{
  	display: flex;
  	flex: 100%;
  	flex-wrap: wrap;
  	flex-grow: 0;
  	}
}