body {
  margin: 0;
  padding: 0;
  background: linear-gradient(135deg, #6a1b9a 0%, #8e24aa 30%, #ab47bc 60%, #ba68c8 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Hearts Animation Background */
.hearts-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.heart {
  position: absolute;
  font-size: 20px;
  color: white;
  animation: floatUp 10s infinite linear;
  opacity: 0;
  text-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
  z-index: 1;
  animation-delay: 5s;
}

@keyframes floatUp {
  0% {
    transform: translateY(100vh) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 0.6;
  }
  90% {
    opacity: 0.6;
  }
  100% {
    transform: translateY(-100px) rotate(360deg);
    opacity: 0;
  }
}

/* Individual heart variations */
.heart-1 { left: 5%; animation-duration: 12s; animation-delay: 5s; font-size: 32px; color: white; }
.heart-2 { left: 15%; animation-duration: 9s; animation-delay: 6s; font-size: 40px; color: white; filter: blur(0.5px); }
.heart-3 { left: 25%; animation-duration: 11s; animation-delay: 7s; font-size: 30px; color: white; }
.heart-4 { left: 35%; animation-duration: 8s; animation-delay: 8s; font-size: 38px; color: white; }
.heart-5 { left: 45%; animation-duration: 10s; animation-delay: 9s; font-size: 36px; color: white; filter: blur(1px); }
.heart-6 { left: 55%; animation-duration: 12s; animation-delay: 5.5s; font-size: 34px; color: white; }
.heart-7 { left: 65%; animation-duration: 9s; animation-delay: 6.5s; font-size: 42px; color: white; }
.heart-8 { left: 75%; animation-duration: 11s; animation-delay: 7.5s; font-size: 28px; color: white; filter: blur(0.8px); }
.heart-9 { left: 85%; animation-duration: 8s; animation-delay: 8.5s; font-size: 36px; color: white; }
.heart-10 { left: 95%; animation-duration: 10s; animation-delay: 9.5s; font-size: 38px; color: white; }
.heart-11 { left: 10%; animation-duration: 11s; animation-delay: 10s; font-size: 30px; color: white; filter: blur(1.2px); }
.heart-12 { left: 20%; animation-duration: 9s; animation-delay: 11s; font-size: 40px; color: white; }
.heart-13 { left: 30%; animation-duration: 12s; animation-delay: 5.8s; font-size: 34px; color: white; }
.heart-14 { left: 40%; animation-duration: 8s; animation-delay: 6.8s; font-size: 36px; color: white; filter: blur(0.3px); }
.heart-15 { left: 50%; animation-duration: 10s; animation-delay: 7.8s; font-size: 29px; color: white; }
.heart-16 { left: 60%; animation-duration: 11s; animation-delay: 8.8s; font-size: 39px; color: white; }
.heart-17 { left: 70%; animation-duration: 9s; animation-delay: 9.8s; font-size: 35px; color: white; filter: blur(0.7px); }
.heart-18 { left: 80%; animation-duration: 12s; animation-delay: 10.8s; font-size: 33px; color: white; }
.heart-19 { left: 90%; animation-duration: 8s; animation-delay: 11.8s; font-size: 37px; color: white; }
.heart-20 { left: 12%; animation-duration: 10s; animation-delay: 12s; font-size: 41px; color: white; filter: blur(1px); }
.heart-21 { left: 78%; animation-duration: 11s; animation-delay: 12.5s; font-size: 31px; color: white; }
.heart-22 { left: 42%; animation-duration: 9s; animation-delay: 13s; font-size: 38px; color: white; filter: blur(0.4px); }

.container {
  text-align: center;
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  padding: 45px 30px;
  margin: 1.5rem;
  width: 43rem;
  border-radius: 14px;
  box-shadow: 0 0 30px rgba(255, 105, 180, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  position: relative;
  z-index: 100;
}

.links p {
  font-size: 13px;
  color: rgba(0, 0, 0, 0.74);
  margin-bottom: 14px;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  transition: transform 0.3s ease;
}

.links p:active {
  transform: scale(1.1);
}

.links a {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  color: #d6336c; 
  font-size: 13px;
  text-decoration: none;
}

.links a:active {
  color: #0077cc;   
}

.title {
  font-size: 1.6rem;
  font-family: "Pacifico", cursive;
  margin-bottom: 1.9rem;
  color: #333;
  font-weight: light;
}

/* Countdown Styles */
.countdown-wrapper {
  text-align: center;
  margin-top: 2rem;
  margin-bottom: 1rem;
  font-family: 'Raleway', sans-serif;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  padding: 35px 30px;
  margin: 1.5rem;
  width: 43rem;
  border-radius: 14px;
  box-shadow: 0 0 30px rgba(255, 105, 180, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  position: relative;
  z-index: 100;
}

#countdown {
  font-size: 1.5rem;
  font-weight: bold;
  color: #c2185b;
  font-family: 'Major Mono Display', monospace;
  letter-spacing: 1.5px;
  margin-bottom: 0.3rem;
}

.timer-subtext {
  font-size: 1.1rem;
  color: #6e6e6e ;
  font-weight: bold;
  font-family: 'Playfair Display', serif;
}

/* Clean state when unlocked */
#gift-section {
  transition: filter 1s ease, opacity 1s ease;
}
#magic-btn {
  display: block;
  background: linear-gradient(135deg, #ff69b4, #ff1493);
  color: white;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 600;
  font-style: normal;
  font-family: 'Playfair Display', serif;
  border: none;
  border-radius: 30px;
  cursor: pointer;
  z-index: 999;
  opacity: 1;
  visibility: visible;
  transition: opacity 1s ease, visibility 1s ease;
  margin: 20px auto;
  box-shadow: 0 8px 20px rgba(255, 105, 180, 0.3);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  letter-spacing: 0.5px;
}

#magic-btn.fade-out {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@media (max-width: 600px) {
  .countdown-wrapper {
    font-size: 1.4rem;
    padding:  45px 15px;
  }

  #countdown {
    font-size: 1.2rem;
  }

  #magic-btn {
    font-size: 12px;
    padding: 12px 20px;
    bottom: 120px;
  }

  .timer-subtext {
    font-size: 0.9rem;
  }

  #typewriter {
    font-size: 1.2rem;
    padding: 10px 15px;
    color: #ff69b4; 
  }
}