<style>
	body {
		margin: 0;
		padding: 0;
		/*font-family: Arial, sans-serif;*/
		display: flex;
		flex-direction: column;
		min-height: 100vh; /* Ensures the layout fills the viewport */
		background-color: black;
	}
	
	table {
		border-collapse: collapse;
		margin: 0 auto; /* Center the table horizontally */
		background-color: black; /* Set the background color of the table to black */
		border: none; /* Remove the table border */
	}
	
	td {
		color: white;
		text-align: center;
	}

	a {
		color: white;
		text-decoration: none;
		background-color: black;
	}
	
	/* Define styles for the clickable image */
	img.clickable {
		cursor: pointer; /* Set the cursor to a hand */
	}
	
	.header {
		background-color: black;
		color: white;
		padding: 20px;
		text-align: center;
		font-family: Arial, sans-serif;
	}

	/* Header styles */
	.header h1 {
		margin: 0; /* Remove default margin for h1 */
	}

	.navigation {
		list-style-type: none;
		color: white;
		margin: 0;
		padding: 0;
		text-align: center; /* Center-align navigation items */
	}

	.navigation li {
		display: inline;
		margin-right: 20px;
		color: white;
	}

	.navigation li:last-child {
		margin-right: 0;
	}

	.navigation a {
		color: white;
		text-decoration: none;
	}

	/* Portfolio gallery styles */
	.portfolio-gallery {
		padding: 20px; /* Add padding for better spacing */
		background-color: black;
	}

	.image-cell {
		vertical-align: top; /* Align images to the top of the cell */
		padding: 10px; /* Add padding around images */
	}

	.image-cell {
		vertical-align: top; /* Align images to the top of the cell */
		padding: 10px; /* Add padding around images */
	}

	.dark-gray-section {
		background-color: #333;
		color: white;
		padding: 50px;
		flex: 2;
	}

	.dark-gray-section img {
		max-width: 100%;
		height: auto;
		display: block;
		margin: 0 auto;
	}

	.light-gray-section {
		background-color: #ccc;
		padding: 15px;
		flex: 1;
		/*font-family: Arial, sans-serif;*/
	}

	.light-gray-section a {
		color: black; /* Set hyperlink text color to white */
		background-color: #ccc;
		text-decoration: none; /* Remove underline */
	}

	.light-gray-section p {
		color: black; /* Set hyperlink text color to black */
		text-decoration: none; /* Remove underline */
		font-size: 15px;
		text-align: left;
	}

	.container {
		width: 400px; /* Set width of the container */
		height: 400px; /* Set height of the container */
		overflow: hidden; /* Hide any overflow */
		margin: 0 auto; /* Center the container horizontally */
		background-color: black; /* Set background color */
		display: flex; /* Use flexbox to center the image vertically */
		justify-content: center; /* Center the image horizontally */
		align-items: center; /* Center the image vertically */
	}

	.container img {
		width: 100%; /* Make the image span the width of its container */
		height: 100%;
		display: block;
		object-fit: cover;
	}

	.container-index {
		width: 100%;
		height: auto;
		overflow: hidden;
		position: relative;
		display: block;
	}

	.container-index img {		 
		width: 100%;
		height: auto;
		display: block;
	}

	.video-container {
		border: 1px white; /* Add border around the video */
		border-radius: 5px; /* Optional: Add rounded corners */
		overflow: hidden; /* Hide overflowing content */
	}

	/* CSS to center-align the paragraph */
    .center-text {
		background-color: black;
		color: white;
           text-align: center; /* Center-align text */
    }

	/* CSS to center-align the paragraph */
	.center {
		display: inline-block;
		position: relative;
		background-color: black;
		color: white;
		text-align: center; /* Center-align text */
	}

	.restricted-width {
        max-width: 800px; /* Set maximum width */
        margin: 0 auto; /* Center the paragraph horizontally */
		line-height: 1.5;
		text-align: left;
    }

	.footer {
		background-color: black;
		color: white;
		text-align: center;
  		width: auto;
		padding: 20px; /* Add padding for better appearance */
	}
	
	.footer a {
		font-size: 15px;
		color: white;
		text-decoration: none;
	}
	
	.footer p {
		font-size: 20px;
		background-color: black;
		color: white; /* Set text color to white */
		margin: 0; /* Remove default margin for paragraphs */
	}

	/* Define styles for the td */
	.style-image-td {
		width: 400px; /* Set the width of the td */
		height: 400px; /* Set the height of the td */
		padding: 5px; /* Add some padding for better appearance */
		overflow: hidden; /* Hide any overflow beyond the specified dimensions */
		text-align: center; /* Center-align content */
	}

	/* Define styles for the hyperlink td */
	.link-td {
		height: 50px; /* Set height of the hyperlink td */
		text-align: center; /* Center-align content */
	}

	.last-div {
		background-color: black; /* Set the background color of the last div to black */
		height: 20px; /* Adjust the height as needed */
	}
	
	.caption {
		background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent black background */
		color: white; /* White text color */
		padding: 10px; /* Add padding for better appearance */
		position: absolute; /* Position the caption absolutely */
		bottom: 0; /* Align the caption to the bottom of the container */
		left: 0; /* Align the caption to the left of the container */
		width: 100%; /* Make the caption span the entire width of the container */
		text-align: center; /* Center-align the text */
	}
	
	body, .header, .light-gray-section, .footer {
    font-family: Arial, sans-serif;
	}
	
	/* Media query for small screens (phones) */
	@media only screen and (max-width: 600px) {
		.header {
			padding: 10px; /* Adjust padding for smaller screens */
		}
		
		.container-index img {
			max-width: 100%; /* Make the image responsive */
			height: auto; /* Allow the image to scale proportionally */
		}
		
		.light-gray-section p {
			font-size: 14px; /* Decrease font size for smaller screens */
		}
		
		.footer {
			padding: 10px; /* Adjust padding for smaller screens */
		}
		
		.footer a {
			font-size: 14px; /* Decrease font size for smaller screens */
		}
		
		
		.footer p {
			font-size: 14px; /* Decrease font size for smaller screens */
		}
		
		/* Adjust header */
		.header h1 {
			font-size: 24px; /* Decrease font size for smaller screens */
			padding: 10px; /* Adjust padding for better spacing */
		}

		/* Adjust navigation */
		.navigation {
			display: block; /* Change navigation to block layout */
			text-align: center; /* Center-align navigation items */
		}

		.navigation li {
			display: block; /* Change list items to block layout */
			margin-right: 0; /* Remove right margin */
			margin-bottom: 10px; /* Add bottom margin for spacing */
		}

		/* Adjust portfolio gallery */
		.portfolio-gallery {
			padding: 10px; /* Adjust padding for better spacing */
		}

		.image-cell {
			padding: 5px; /* Adjust padding around images */
		}

		/* Adjust light gray section */
		.light-gray-section {
			padding: 10px; /* Adjust padding for better spacing */
		}
	}
}
</style>