body, ul, li, h1, h2, a{
  margin: 0;
  padding: 0;
  font-family: tahoma;
}


.imgcenter{
	Justify-content: center;
	text-decoration: underline;
}
.photogrp-center-1{
	grid-column-start: 1; 
	 }

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


.txtunderline{
	text-align: left;
	text-decoration: underline; 
	margin: 20px;
	}


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



.imgsize{
	width:75%;
	height:75%;   
}
.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 by 50% (1.5 times original size) */ 
}

.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;
					
	}

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