body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.container {
	display: flex;
	flex-direction: row;
	flex-grow: 1;
	flex-shrink: 1;
}
.container.print, .container.print.before, .container.email {
	 flex-grow: 0; 
}

.left-column, .right-column {
  flex: 1;
  position: relative;
}

.left-column {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.right-column {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	height: auto;
}
.container.print, .container.swag {
   align-items: center; /* Align left and right columns vertically */
	gap: 5rem;
}
.container.swag {
   align-items: center; /* Align left and right columns vertically */
	gap: 1rem;
}

.container.print .left-column, .container.print .right-column, .container.swag .left-column, .container.swag .right-column {
  display: flex;
  flex-direction: column;
  justify-content: center; /* Center content vertically within each column */
  height: 100%; /* Ensure both columns occupy the same height */
}
.container.print .left-column {
  align-items: flex-end;
}
.container.print.narrow .left-column, .container.swag .right-column {
  flex: 1; /* Set the left column to take up less space */
}

.container.print.narrow .right-column, .container.swag .left-column {
  flex: 2; /* Set the right column to take up more space */
}
.container.print.before {
	align-items: flex-end;
}
.border {
  border: 1px #b5b0b0 solid;
}
.large-image {
	position: relative;
	width: calc(68% - 1rem);
	margin: 20px 10px 0;
	height: auto;
}
.container.print .large-image {
	width: calc(60% - 1rem);
}
.container.print.narrow .large-image {
	width: calc(90% - 1rem);
}
.container.print.email .large-image {
	width: calc(52% - 1rem);
}
.container.print.email.rescue .large-image {
	width: calc(61% - 1rem);
}
.container.print.email .right-column .large-image, .container.print.before .large-image {
	width: calc(57% - 1rem);
}
.container.print.email2 .large-image {
	width: calc(75% - 1rem);
}
.container.print.before .large-image, .container.print.before2 .large-image {
	margin: 0;
}
.container.print.before .left-column .large-image {
	width: calc(56% - 1rem);
}
.container.print.before2 .large-image, .container.print.dance .large-image {
	width: calc(85% - 1rem);
}
.container.print.dance .right-column .large-image {
	width: calc(90% - 1rem);
	margin-left: 0;
}
.container.print.before2, .container.print.dance {
	margin-top: 1rem
}

.small-image {
	position: absolute;
	margin: 10px;
	right: 0; 
	top: 5%;  
	width: 44%;
}

.overlap1 {
	position: absolute;
	left: 18%; 
	top: 26%;  
	width: 45%;
	border: 8px solid #d2d3ce;

}
.overlap2 {
	position: absolute;
	right: 9%; 
	top: 53%;
	width: 42%;
	border: 7px solid #e0dfda;
}
.container.swag .large-image {
	width: calc(82% - 1rem);
	margin: 0;
}
.container.swag .small-image {
	width: calc(80% - 1rem);
	position: relative;
	margin: 0;
}
.image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 4rem; /* Adjust for spacing between images */
    max-width: 90%;
    margin: auto;
}
.image-grid img {
    width: 100%;
    height: auto;
}
.image-grid.email {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0rem; /* Spacing between images */
    max-width: 90%;
    margin: 0 0 0 10rem;
    align-items: center; /* Centers all items vertically */
}
.image-grid.email img {
    width: 75%;
    height: auto;
    display: block; /* Ensures proper alignment inside the grid */
    object-fit: contain; /* Adjusts the image fit while maintaining aspect ratio */
	 justify-self: end; 
}
.image-grid.email img:nth-child(2) {
    width: 84%; /* Ensure it scales properly */
}
.image-grid.email img:nth-child(3) {
    grid-column: span 2; /* Makes the third image span two columns */
    width: 65%; /* Ensure it scales properly */
    height: auto; /* Maintain aspect ratio */
	 justify-self: start;
	 margin-left: 4.5rem;
}
.image-grid.square {
    display: inline-grid; /* Makes the grid size itself to its content */
    grid-template-columns: repeat(3, 1fr); /* Ensures 3 equal columns */
    gap: 0.5rem; /* Small gap for a neat fit */
    margin: auto; /* Centers the grid container */
    padding: 0; /* Removes extra padding */ 
	 place-items: center; 
}
.image-grid.square.bottom3 {
    margin-top: 2rem;
	 align-items: end;
}
.image-grid.square img {
    width: auto; /* Ensures the images retain their natural width */
    height: auto; /* Maintains aspect ratio */
	 object-fit: cover;
    display: block; /* Avoids unwanted inline spacing between images */
}
.image-grid.square img:last-child {
    width: 75%; /* Adjust this percentage to control the size */
    height: auto; /* Maintain the aspect ratio */
}
.image-grid.square.bottom3 img:last-child {
    width: 250px; 
	 justify-self: start;
    padding-left: 13%;
}
.image-grid.top3 {
    display: grid; /* Enable grid layout */
    grid-template-columns: 2fr 1fr; /* Two columns: one for the left and one for the right */
    grid-template-rows: auto auto; /* Two rows in the grid */
    width: 63%; /* Adjust grid container width */
    margin: auto; /* Center the grid container */
    align-items: start; /* Ensure items are aligned at the top of the grid */
	 justify-items: start;
    margin-bottom: 0;
	 column-gap: 0rem;
}

.image-grid.top3 img:first-child {
    grid-row: 1; /* Place the first image in the first row */
    grid-column: 1; /* Keep it in the first column */
}

.image-grid.top3 img:nth-child(2) {
    grid-row: 2; /* Place the second image in the same row as the first image */
    grid-column: 1; /* Keep it in the first column */
}

.image-grid.top3 img:nth-child(3) {
    grid-row: 1 / span 2; /* Make the third image span both rows */
    grid-column: 2; /* Place it in the second column */
    width: auto; 
    height: auto; /* Maintain aspect ratio */
    object-fit: cover; /* Ensure consistent scaling */
    display: block; /* Remove inline spacing */
	justify-self: start;
}

.video-container {
    display: flex; 
    justify-content: center; /* Horizontally centers the video */
    align-items: center; /* Vertically centers the video */
    padding: 4rem; 
}

video {
    max-width: 100%; 
    height: auto; 
}

footer {
	position: relative;
	margin: 3rem 2rem ;
	display: flex;
	flex-direction: column; /* Arrange items in a column */
	align-items: center; 
}
footer.close-swag {
	margin: 1rem;
}
footer a, footer button {
  margin: 0 10px; 
}
footer a, footer.close-swag button {
  margin: auto; 
}
footer .links {
  display: flex;
  justify-content: space-between;
  width: 40%; /* Make sure the links stretch across the footer */
}
footer .links.email {
  width: 80%; 
}
footer .links a.prev, footer .links a.next {
	 color: gray;
    text-decoration: none;
    padding: 10px;
    font-weight: bold;
    font-size: 18px;
}
footer .links a.prev:hover, footer .links a.next:hover {
	background-color: rgba(86, 86, 86, 0.90); 
}
footer p {
	text-align:center;
	color: rgb(52, 55, 65);
	margin-top: 1rem;
}
button {
	font-size: 1.25rem;
	margin: 3% calc(47% - 1rem) 2rem;
	padding: .5rem 2rem;
	border-radius: 3.5rem;
	border: 1px black solid;
	background-color: #3c3b3b;
	color: #c5c3c3;
}
button:hover {
	background-color: #595858;
	cursor: pointer;
}
.button:hover {
	background-color: #f44336;
}

@media (max-width: 1300px) {
    .image-grid.square, .image-grid.email {
        grid-template-columns: 1fr; /* Stacks images vertically on small screens */
        gap: 2rem; /* Adjusts spacing for smaller screens */
		  margin: 0 auto;
    }
	 .image-grid.email img, .image-grid.email img:nth-child(2), .image-grid.email img:nth-child(3) {
        width: 100%; /* Reset width to adjust naturally in a single column */
        justify-self: center; /* Centers each image horizontally */
    }

    .image-grid.email img:nth-child(3) {
        grid-column: span 1; /* Resets column span for the third image */
        margin-left: 0; /* Resets left margin for proper alignment */
    }
	.image-grid.square img:last-child {
        width: auto; /* Slightly increase the size of the last image for better fit */
    }
    .image-grid.square.bottom3 img:last-child {
        width: auto; 
		  justify-self: center;
		  padding-left: 0;
    }
	.image-grid.top3 {
        display: flex;
        flex-direction: column; /* Stack items vertically */
		  justify-content: center; /* Centers items vertically */
        align-items: center; /* Centers items horizontally */
        width: 90%; /* Adjust the container's width */
        margin: auto; /* Center the container */
    }

    .image-grid.top3 img {
        width: auto;
        height: auto;
    }
}

@media (max-width: 1200px) {
	.large-image {
		width: calc(77% - 1rem);
	}
  .container.swag .large-image, .container.swag .small-image {
		width: 100%; 
		margin: 0 0 20px;
  }
	.container.swag .left-column {
		 order: 0; /* Ensure the left column remains in its original order */
	}

	.container.swag .right-column {
		 order: 0; /* Ensure the right column remains in its original order */
	}
	.container.swag .left-column {
		justify-content: flex-end;
	}
	.container.swag .right-column {
		justify-content: flex-start;
	}

}
	
/* Responsive styling for screens 800px or smaller */
@media (max-width: 800px) {
  .container {
		flex-direction: column;
  }
  .right-column, .container.print.narrow .right-column {
    order: -1; /* Move the right column to the top */
  }

  .left-column, .container.print.narrow .left-column {
    order: 0; /* Keep the left column below */
  }

  .large-image, .container.print .large-image, .container.print.narrow .large-image, .container.print.email .large-image, .container.print.email .right-column .large-image, .container.print.before .large-image, .container.print.before2 .large-image, .container.print.email2 .large-image, .container.print.dance .large-image, .container.print.dance .right-column .large-image {
		width: 100%; 
		margin: 0 0 20px;
  }
  .container.print.before .left-column .large-image, .container.print.before p, .container.print.before2 .left-column .large-image, .container.print.before2 p {
		display: none;
  }

  .small-image, .overlap1, .overlap2 {
		width: 100%; 
		position: relative; 
		left: 0; 
		top: 0; 
		margin-bottom: 30px;
  }

	.container.print .left-column {
		 order: 0; /* Ensure the left column remains in its original order */
	}

	.container.print .right-column {
		 order: 0; /* Ensure the right column remains in its original order */
	}
}
@media only screen and (min-width: 1600px) {
	.image-grid.square img:last-child {
		 width: 58%; 
	}
	.image-grid.bottom3 img:last-child, .image-grid.top3 img:last-child {
		 width: auto; 
	}
}
@media only screen and (max-width: 1800px) and (min-width: 1601px) {
	.image-grid.top3 {
		 width: calc(74% - 2rem);
	}
}
@media only screen and (max-width: 1600px) and (min-width: 1451px) {
	.image-grid.top3 {
		 width: calc(81% - 2rem);
	}
}
@media only screen and (max-width: 1450px) and (min-width: 1400px) {
	.image-grid.top3 {
		 width: calc(85% - 2rem);
	}
}
@media only screen and (max-width: 1399px) and (min-width: 1300px) {
	.image-grid.top3 {
		 width: calc(90% - 2rem);
	}
}
@media only screen and (max-width: 1400px) and (min-width: 1072px) {
	button {
		margin: 3% calc(46% - 1rem) 2rem;
	}
	.image-grid.top3 {
		 width: calc(85% - 2rem);
	}
}
@media only screen and (max-width: 1071px) and (min-width: 720px) {
	button {
		margin: 3% calc(44% - 1rem) 2rem;
	}
}
@media only screen and (max-width: 719px) and (min-width: 620px) {
	button {
		margin: 5% calc(36% - 1rem) 2rem;
		font-size: 2.25rem;  
		padding: .5rem 3rem;
	}
	footer .links {
		width: 100%; 
	}
	footer .links a.prev, footer .links a.next {
		font-size: 2rem;
	}
}
@media (max-width: 699px) {
	footer .links, footer .links.email {
		width: 100%; 
	}
	footer .links a.prev, footer .links a.next, footer .links.email a.prev, footer.email .links a.next {
		font-size: 2rem;
	}
	.video-container {
		 padding: 0 0 4rem; 
	}
}	
@media (max-width: 600px) {
    /*.image-grid.square img:nth-child(2)*/
	.image-grid.square img {
        width: 100%;
		height: auto;
    }
}
@media (max-width: 400px) {
    .image-grid.square img {
        width: 100%; 
        height: auto;
    }
    .image-grid.square img:last-child, .image-grid.square.bottom3 img:last-child {
        width: 100%; 
    }
}
@media only screen and (max-width: 619px) and (min-width: 480px) {
	button {
		margin: 9% calc(33% - 1rem) 2rem;
		font-size: 2.25rem;  
		padding: .5rem 3rem;
	}
}
@media (max-width: 480px) {
	button {
		font-size: 2.25rem;  
		padding: .5rem 2rem;
	}
	footer button {
		margin: 0% calc(2% - 1rem);
	}
	footer {
		margin: 2rem .5rem;
	}
}
@media (max-width: 350px) {
	footer .links a.prev {
		margin-right: 4%;
	}
}