/* --- Basic Reset and Body Styling --- */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  /* Removed overflow: hidden; to prevent potential clipping issues with footer */
  background-color: #5000aa;; /* Moved background here for full page */
  color: #ffe4e1; /* Default text color, can be overridden */
  font-family: 'Lora', serif; /* Apply base font */
}


/* --- Centering Container --- */
/* Apply flex centering to this container instead of body */
.content-container {
  height: 100%; /* Take full height */
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center; /* Ensures text inside aligns center if needed */
}

/* --- Main Link Styling --- */
.centered-text {
  color: #ffb4a5;             /* Base text color */ /* */
  text-decoration: none;
  font-size: 3.5rem;
  transition: color 0.5s ease; /* */
}

.centered-text:hover {
  color: #ffafdc; /* Slightly lighter on hover */ /* */
}

.centered-text:active {
  color: #ff3ba0; /* Third color on click */ /* */
}


/* --- Footer Styling --- */
.site-footer {
  position: fixed; /* Position relative to the viewport */
  bottom: 0;       /* Stick to the bottom */
  left: 0;         /* Align to the left */
  width: 100%;     /* Take full width */
  text-align: center; /* Center the text inside the footer */
  padding-bottom: 15px; /* Add some space below the link */
  box-sizing: border-box; /* Include padding in width calculation */
}

/* --- Imprint Link Styling --- */
.imprint-link {
  font-size: 0.8rem; /* Much smaller font size */
  /* Slightly darker color than base #ffe4e1 - adjust as needed */
  color: #d3b8b8;
  text-decoration: none; /* Remove underline */
  transition: color 0.3s ease; /* Optional: Add a subtle fade */
}

.imprint-link:hover {
  color: #ffafdc; /* Slightly lighter version of the imprint color for hover */
  /* text-decoration: underline; */ /* Optional: add underline on hover */
}

/* --- OVERLAY --- */

.overlay {
  position: fixed; /* Stay in place */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8); /* Semi-transparent black background */
  display: flex; /* Use flexbox for centering content */
  justify-content: center;
  align-items: center;
  z-index: 1000; /* Ensure it's on top of other content */
  cursor: pointer; /* Add pointer cursor to indicate clickability */

  /* Start hidden */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0s linear 0.4s; /* Fade effect */
}

.overlay.visible {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.4s ease; /* Fade-in transition */
}

/* --- UPDATED --- */
.overlay-content {
  /* Remove background, padding, border, shadow to eliminate the "border" */
  /* background-color: #1a1a1a; */ /* REMOVED */
  /* padding: 30px; */             /* REMOVED or set to 0 */
  padding: 0;                     /* Explicitly set padding to 0 */
  /* border-radius: 5px; */        /* Optional: Remove or keep */
  /* box-shadow: 0 5px 15px rgba(0,0,0,0.3); */ /* REMOVED */

  position: relative; /* Keep for potential future use, though not strictly needed now */
  max-width: 90%;   /* Max width relative to viewport */
  max-height: 85%;  /* Max height relative to viewport */
  overflow-y: auto; /* Keep scrollbar for tall images */
}

.overlay-content img {
  display: block; /* Remove extra space below image */
  max-width: 100%; /* Ensure image is responsive */
  height: auto;    /* Maintain aspect ratio */
  max-height: 85vh; /* Limit image height slightly more if padding removed */
}

/* --- REMOVE THESE RULES --- */
/*
.close-button {
  ...styles...
}

.close-button:hover {
  ...styles...
}
*/

/* (Ensure .site-footer still has z-index: 10 or similar) */
.site-footer {
  /* ... other styles ... */
  z-index: 10;
}