body, html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background-size: cover;
  background-color: black; 
  transition: transform 1s ease-out;
  transform-origin: center;
}

#background {
  position: absolute;
  top: -15%;
  left: -16%;
  width: 130%;
  height: 130%;

  z-index: 0; /* Ensures the background is below other elements inside the container */
  transition: transform 1s ease-out;
  transform-origin: center;
}

.container {
  position: relative;
  width: 50%; /* Adjust size as needed */
  padding-top: 50%; /* Same as width for square aspect ratio */
  overflow: hidden; 
}
#man {
  position: absolute;
  top: 5%;  /* Adjust as needed, use percentage for proportional scaling */
  left: 2%; /* Adjust as needed, use percentage for proportional scaling */
  width: 96%; /* Adjust as needed */
  height: auto; /* Maintain aspect ratio */
  object-fit: contain;
  z-index: 3;
}

#eye-container {
  position: absolute;
  top: 27.7%; /* Adjust this to align with the eye in the #man image */
  left: 52.3%; /* Adjust this to align with the eye in the #man image */
  width: 7%; /* Adjust this based on the size of the eye in the #man image */
  height: 7%; /* Adjust this based on the size of the eye in the #man image */
  transform: translate(-50%, -50%);
  overflow: hidden;
  z-index: 4;
  mask-image: url('eye-mask.png');
  mask-position: center;
  mask-size: cover; /* Try 'cover' if 'contain' doesn't work well */
  -webkit-mask-image: url('eye-mask.png');
  -webkit-mask-size: cover; /* Try 'cover' for WebKit browsers */
}

#eye {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-40%, -30%) scale(0.5); /* Adjust scale as needed */
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#color-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: black;
  mix-blend-mode: overlay; /* Blends the color with the image */
  transition: background-color 1.6s ease-out; /* Smooth transition for color change */
  pointer-events: none; /* Allows click events to pass through to elements below */
  z-index: 1; /* Above the background image but below other content */
}