html, body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  background-size: 200% auto;
  animation: gradient 10s ease infinite;
}
/* Set body font and background */
body {
  font-family: 'Helvetica Neue', sans-serif;
  background-color: #f4f4f4;
}

/* Adjust image size for different screen sizes */
img {
  max-width: 100%;
  height: auto;
  max-height: 800px;
}

nav {
  display: flex;
  align-items: center;
  background-color: #001b35;
  padding-inline-start: 0px;
  justify-content: space-between;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  padding: 15px 30px;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  padding-left: 40px;
  display: flex;
  align-items: center;
}

nav ul li {
  margin-right: 0px;
}
nav ul li:last-child {
  margin-right: 0;
}

nav ul li + li {
  margin-left: 10px;
}

nav ul li a {
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}

nav ul li a:hover {
  color: #ebcf01;
  text-decoration: underline;
}

.logo {
  height: 50px;
  margin-top: -10px;
}

.logo img {
 height: 100%;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.2));
}
/* Set body font and background */
body {
	font-family: 'Helvetica Neue', sans-serif;
	background-color: #f4f4f4;
}

/* Remove list styles from the image grid */
ul, li {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Adjust image size for different screen sizes */
img {
	max-width: 100%;
	height: auto;
}

/* Display images in a grid */
.image-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	grid-gap: 20px;
	margin: 40px;
}

/* Add a border and share tray to images */
.image-container {
	position: relative;
	overflow: hidden;
}

.share-tray {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: rgba(0,0,0,0.7);
	padding: 10px;
	font-size: 18px;
	display: flex;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.3s ease-in-out;
}

.image-container:hover .share-tray {
	opacity: 1;
}

.share-tray a {
	color: #fff;
	margin: 0 10px;
	transition: transform 0.3s ease-in-out;
}

.share-tray a:hover {
	transform: scale(1.2);
}

/* Add some futuristic effects */
.image-container:before,
.image-container:after {
	position: absolute;
	width: 0;
	height: 0;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	opacity: 0;
	transition: all 0.3s ease-in-out;
}

.image-container:before {
	border-top: 1px solid rgba(255,255,255,0.7);
	border-bottom: 1px solid rgba(255,255,255,0.7);
}

.image-container:after {
border-left: 1px solid rgba(255,255,255,0.7);
border-right: 1px solid rgba(255,255,255,0.7);
}

.image-container:hover:before,
.image-container:hover:after {
width: 100%;
height: 100%;
opacity: 1;
}

/* Add a hover effect to the share tray */
.share-tray:hover {
background-color: rgba(0,0,0,0.9);
}


/* Media queries for smaller screens */
@media screen and (max-width: 768px) {
.image-grid {
margin: 20px;
}