body {
  margin: 0;
  font-family: 'Josefin Sans', sans-serif;
  background-color: #fff0f6; /* pale pink */
  color: #333;
}

/* Header + Hamburger */
header {
  background-color: #d36fa0;
  padding: 1rem 1.5rem;
  color: white;
  display: flex;
  align-items: center;
  position: relative;
}

#hamburger {
  font-size: 1.8rem;
  cursor: pointer;
  user-select: none;
  color: white;
}

/* Menu - hidden by default */
#menu {
  display: none;
  background-color: white;
  padding: 15px 20px;
  position: fixed;
  top: 60px;
  right: 20px;
  width: 200px;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  z-index: 1200;
  flex-direction: column;
}

/* Show menu when active */
#menu:not(.hidden) {
  display: flex;
  flex-direction: column;
}

/* Links inside menu */
#menu a {
  padding: 0.5rem 0;
  color: #d36fa0;
  text-decoration: none;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
}

#menu a:hover {
  background-color: #d36fa0;
  color: white;
  border-radius: 4px;
}

/* About page main content */
.about-page {
  padding: 0; /* remove padding */
  max-width: none; /* remove width limit */
  margin: 0; /* remove center alignment */
  background-color: #fff0f6; /* keep background */
  border-radius: 0; /* remove rounded edges */
  box-shadow: none; /* remove box shadow */
}

.about-section h1 {
  color: black;
  margin-bottom: 1rem;
  text-align: center;
}

.about-section p {
  font-size: 1.1rem;
  line-height: 1.6;
  text-align: center;
  max-width: 700px;
  margin: 0 auto 2rem;
}

.about-photos {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-bottom: 2rem;
}

.about-photos img {
  width: 48%;
  border-radius: 8px;
  object-fit: cover;
  border: 3px solid #d36fa0;
  box-shadow: 0 2px 8px rgba(211, 111, 160, 0.3);
}

.timeline {
  border-left: 3px solid #d36fa0;
  padding-left: 1rem;
  max-width: 700px;
  margin: 0 auto;
}

.timeline-item {
  margin-bottom: 1rem;
}

.timeline-item .year {
  font-weight: 700;
  color: #d36fa0;
  font-size: 1.1rem;
}

.timeline-item p {
  margin: 0.25rem 0 0 0;
}

.about-image {
  display: flex;
  justify-content: center;
  margin: 2rem 0;
}

.about-image img {
  max-width: 80%;
  height: auto;
  border-radius: 8px;
  border: 3px solid #d36fa0;
  box-shadow: 0 2px 8px rgba(211, 111, 160, 0.3);
}

.about-image.bottom img {
  max-width: 60%;
}

/* Fade-in animation base state */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s ease, transform 1s ease;
}

/* When visible */
.fade-in.show {
  opacity: 1;
  transform: translateY(0);
}

.timeline-video iframe {
  width: 100%;
  max-width: 300px;
  height: 170px; /* keeps aspect ratio */
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(211, 111, 160, 0.3);
}
/* Shared pale pink background + pale pink elements */
.pink-page {
  background-color: #fff0f6; /* pale pink */
  color: #000; /* black text */
}

.pink-page header,
.pink-page footer {
  background-color: transparent; /* keeps pale pink bg visible */
  color: #d36fa0; /* pale pink accent color for text */
}

/* Make sure hamburger icon matches pale pink accent */
.pink-page #hamburger {
  color: #d36fa0;
}

/* Ensure links in header/footer keep pale pink accent */
.pink-page header a,
.pink-page footer a {
  color: #d36fa0;
}

.pink-page header a:hover,
.pink-page footer a:hover {
  color: #b85586; /* slightly darker on hover */
}
/* Make footer stick to bottom */
html, body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
}

main {
  flex: 1; /* pushes footer to bottom */
}

/* Footer styling */
footer {
  background-color: #fff0f6; /* pale pink background */
  text-align: center;
  padding: 1rem 0;
  color: #f8b6d8; /* light pink text */
  font-weight: 600;
  font-family: 'Josefin Sans', sans-serif;
}
/* Footer heart styling and animation */
#footer-heart {
  animation: heartPulse 2s infinite ease-in-out;
  transform-origin: center center;
  cursor: default;
  margin-left: 10px; /* spacing if inline with text */
  vertical-align: middle; /* align with text baseline */
}

/* Heart pulse animation */
@keyframes heartPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.3);
    opacity: 0.8;
  }
}

/* Copyright text */
footer p {
  margin: 0.5rem 0 0 0;
}

/* Footer hover effect */
footer a,
footer p {
  color: #f8b6d8; /* light pink default */
  text-decoration: none;
  transition: color 0.3s ease;
}

footer a:hover,
footer p:hover {
  color: #d36fa0; /* darker pink on hover */
}