body {
  background-color: #ffecd1;
  color: black;
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh; /* Centers content vertically */
}

svg {
  width: 500px; /* Scale the SVG size */
  height: auto; /* Maintain the aspect ratio */
}
/* Style the paths inside the SVG */
svg path {
  fill: #000276; /* Change the fill color */
  stroke-width: 2px; /* Adjust stroke thickness */
}
h1 {
  font-size: 2em;
  margin-top: 20px;
}

p {
  font-size: 1.2em;
  margin: 20px;
}

a {
  color: blue;
  text-decoration: none;
  font-weight: bold;
}

a:hover {
  text-decoration: underline;
}

/* img {

} */

.container {
  width: 70%;
  min-width: 600px; /* Ensures it doesn't get too narrow */
  max-width: 1200px; /* Prevents it from stretching too much */
  margin: 40px auto; /* Centers horizontally */
  padding: 20px;
}

.banner {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  height: 200px; /* Sets a fixed height for the banner */
  border-radius: 8px 8px 0 0;
  overflow: hidden;
  padding: 10px;
}

.banner img {
  max-height: 100%; /* Ensures images fit within the height of the banner */
  max-width: 45%; /* Each image will not exceed 45% of the banner width */
  object-fit: contain; /* Maintains the aspect ratio */
  margin: 0 10px; /* Adds some spacing between the images */
}

.banner img:first-child {
  /* Targets the first image in the banner */
  border: 3px solid #333; /* Adds a solid border (color: #333) */
  border-radius: 10px; /* Adds rounded corners */
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); /* Adds a subtle shadow */
}

.contact {
  display: flex; /* Arrange images in a row */
  gap: 20px; /* Add spacing between images */
  justify-content: center; /* Center the images */
  align-items: center; /* Vertically align if needed */
}

.contact a img {
  width: 200px; /* Adjust the size of the images */
  height: auto; /* Maintain aspect ratio */
  border-radius: 10px; /* Optional: Add rounded corners */
  transition: transform 0.3s, box-shadow 0.3s; /* Smooth hover animation */
}

.contact a img:hover {
  transform: translateY(-10px); /* Add floating effect */
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.3); /* Add shadow effect */
}

.contact a {
  text-decoration: none; /* Remove link underline */
}

.intro {
  position: relative; /* Create a positioning context for the link */
  display: inline-block; /* Ensure the image's size is respected */
  padding-bottom: 30px;
}
.intro img {
  max-height: 100%; /* Ensures images fit within the height of the banner */
  max-width: 100%; /* Each image will not exceed 45% of the banner width */
  object-fit: contain;
}

.link-overlay {
  position: absolute;
  top: 23%; /* Adjust to match "Prof. Julian McAuley's" position */
  left: 62%; /* Adjust to match "Prof. Julian McAuley's" position */
  width: 34%; /* Cover the text width */
  height: 16%; /* Cover the text height */
  cursor: pointer;
  z-index: 10; /* Ensure the clickable link stays on top */
  background-color: rgba(255, 255, 255, 0); /* Transparent background */
  text-decoration: none;
  border-radius: 10px;
  transition: box-shadow 0.3s ease, transform 0.3s ease; /* Smooth hover animations */
}

.link-overlay:hover {
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3); /* Add a soft shadow on hover */
  transform: scale(1.05); /* Slightly enlarge for emphasis */
  cursor: pointer; /* Ensure it looks clickable */
}

.publication {
  display: flex;
  justify-content: space-evenly;
  flex-direction: column;

  align-items: center;
  /* height: 200px; Sets a fixed height for the banner */
  overflow: hidden;
  padding-bottom: 20px;
}

.publication img {
  max-height: 100%; /* Ensures images fit within the height of the banner */
  max-width: 100%; /* Each image will not exceed 45% of the banner width */
  object-fit: contain; /* Maintains the aspect ratio */
  /* margin: 0 10px; Adds some spacing between the images */
  border-radius: 8px; /* Optional: Add rounded corners */
  transition: box-shadow 0.3s ease, transform 0.3s ease; /* Smooth hover animations */
}

.publication img:first-child {
  max-width: 100%;
}

.publication .publication_child {
  max-width: 90%;
}

.publication .publication_child:hover {
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.3); /* Shadow on hover */
  transform: scale(1.05); /* Slightly enlarge the image on hover */
  cursor: pointer; /* Change cursor to indicate interactivity */
}

.experience {
  display: flex;
  justify-content: space-evenly;
  flex-direction: column;

  align-items: center;
  /* height: 200px; Sets a fixed height for the banner */
  overflow: hidden;
  padding-bottom: 20px;
}

.experience img:first-child {
  max-width: 100%;
}

.experience img {
  max-height: 100%; /* Ensures images fit within the height of the banner */
  max-width: 90%; /* Each image will not exceed 45% of the banner width */
  object-fit: contain; /* Maintains the aspect ratio */
  /* margin: 0 10px; Adds some spacing between the images */
  border-radius: 8px; /* Optional: Add rounded corners */
  transition: box-shadow 0.3s ease, transform 0.3s ease; /* Smooth hover animations */
}

.experience .experience_child:hover {
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.3); /* Shadow on hover */
  transform: scale(1.05); /* Slightly enlarge the image on hover */
  cursor: pointer; /* Change cursor to indicate interactivity */
}

.education {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* height: 200px; Sets a fixed height for the banner */
  overflow: hidden;
  padding-bottom: 20px;
}

.education img:first-child {
  max-width: 100%;
}

.education img {
  max-height: 100%; /* Ensures images fit within the height of the banner */
  max-width: 90%; /* Each image will not exceed 45% of the banner width */
  object-fit: contain; /* Maintains the aspect ratio */
  border-radius: 8px; /* Optional: Add rounded corners */
  transition: box-shadow 0.3s ease, transform 0.3s ease; /* Smooth hover animations */
  /* margin: 0 10px; Adds some spacing between the images */
}

.education .education_child:hover {
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.3); /* Shadow on hover */
  transform: scale(1.05); /* Slightly enlarge the image on hover */
  cursor: pointer; /* Change cursor to indicate interactivity */
}

.awards {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-direction: column;
  /* height: 200px; Sets a fixed height for the banner */
  overflow: hidden;
}

.awards img {
  max-height: 100%; /* Ensures images fit within the height of the banner */
  max-width: 100%; /* Each image will not exceed 45% of the banner width */
  object-fit: contain; /* Maintains the aspect ratio */
  /* margin: 0 10px; Adds some spacing between the images */
}