* {
      box-sizing: border-box;
    }

    @import url('https://fonts.googleapis.com/css2?family=Pacifico&family=Dancing+Script:wght@700&display=swap');

    body {
      margin: 0;
      font-family: Arial, Helvetica, sans-serif;
      min-height: 100vh;
      overflow-x: hidden;
      overflow-y: auto;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(to bottom, #0818a7, #b3b3e4a8, #e68f0e9a);
      position: relative;
    }

    body::before {
  content: '🌕';
  position: fixed;
  top: 10%;
  right: 15%;
  font-size: 4rem;
  filter: drop-shadow(0 0 30px rgba(255, 255, 200, 0.6));
  animation: float-moon 6s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

@keyframes float-moon {
  0%, 100% { transform: translateY(0px) rotate(-15deg); }
  50% { transform: translateY(-20px) rotate(-15deg); }
}

    body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    radial-gradient(2px 2px at 10% 10%, white, transparent);
  background-size: 200% 200%;
  background-position: 0 0;
  animation: twinkle-stars 4s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

@keyframes twinkle-stars {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

    .flower {
      position: fixed;
      z-index: 2;
      pointer-events: none;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .flower-bloom {
      animation: sway 3s ease-in-out infinite, gentle-bloom 2s ease-out;
    }

    @keyframes sway {
      0%, 100% { transform: rotate(0deg); }
      25% { transform: rotate(-2deg); }
      75% { transform: rotate(2deg); }
    }

    @keyframes gentle-bloom {
      0% { transform: scale(0) rotate(-45deg); opacity: 0; }
      50% { transform: scale(1.1) rotate(5deg); }
      100% { transform: scale(1) rotate(0deg); opacity: 1; }
    }

    .sunflower-head {
      font-size: 3rem;
      filter: drop-shadow(2px 3px 5px rgba(0,0,0,0.3));
      position: relative;
    }

    .sunflower-stem {
      width: 4px;
      height: 18px;
      background: linear-gradient(to bottom, #2d5016, #4a7c28);
      border-radius: 2px;
      position: relative;
      box-shadow: 1px 0 3px rgba(0,0,0,0.2);
    }

    .sunflower-leaf {
      position: absolute;
      font-size: 1.5rem;
      animation: leaf-sway 3s ease-in-out infinite;
    }

    .sunflower-leaf.left {
      left: -15px;
      top: 30%;
      transform-origin: right center;
    }

    .sunflower-leaf.right {
      right: -15px;
      top: 50%;
      transform-origin: left center;
    }

    @keyframes leaf-sway {
      0%, 100% { transform: rotate(0deg); }
      50% { transform: rotate(-5deg); }
    }

    .tulip-head {
      font-size: 2.8rem;
      filter: drop-shadow(2px 3px 5px rgba(0,0,0,0.3));
    } 

    .tulip-stem {
      width: 3px;
      height: 17px;
      background: linear-gradient(to bottom, #2d5016, #4a7c28);
      border-radius: 2px;
      box-shadow: 1px 0 3px rgba(0,0,0,0.2);
    }

    .tulip-leaf {
      position: absolute;
      font-size: 1.8rem;
      animation: leaf-sway 3.5s ease-in-out infinite;
    }

    .tulip-leaf.left {
      left: -18px;
      top: 40%;
      transform-origin: right center;
    }

    .tulip-leaf.right {
      right: -18px;
      top: 60%;
      transform-origin: left center;
      color: white;
      text-align: center;
      padding: 20px 10px;
    }

    /* Generate flowers dynamically */
    @keyframes float-up {
      0% { transform: translateY(100vh) rotate(0deg); }
      100% { transform: translateY(-20vh) rotate(360deg); }
    }

   .card {
      background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.25) 0%,
        rgba(255, 255, 255, 0.15) 50%,
        rgba(255, 255, 255, 0.2) 100%);
      backdrop-filter: blur(40px) saturate(180%);
      -webkit-backdrop-filter: blur(40px) saturate(180%);
      border: 1px solid rgba(255, 255, 255, 0.3);
      border-radius: 28px;
      padding: 25px 20px;
      width: 100%;
      max-width: 420px;
      box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.1),
        0 2px 8px rgba(0, 0, 0, 0.05),
        inset 0 1px 1px rgba(255, 255, 255, 0.5),
        inset 0 -1px 1px rgba(0, 0, 0, 0.05);
      animation: float 4s ease-in-out infinite;
      position: relative;
      z-index: 10;
      margin: 20px auto;
      color: #1d1d1f;
    }

    @keyframes float {
      0%,100% { transform: translateY(0); }
      50% { transform: translateY(-10px); }
    }

    h1 {
      font-size: 1.8rem;
      margin: 5px 0 10px 0;
      animation: pulse 2s infinite;
      line-height: 1.3;
    }

    @keyframes pulse {
      0% { transform: scale(1); }
      50% { transform: scale(1.05); }
      100% { transform: scale(1); }
    }

    p {
      font-size: 0.95rem;
      line-height: 1.5;
      margin: 8px 0;
    }

    button {
      padding: 11px 18px;
      border: none;
      border-radius: 25px;
      background: linear-gradient(135deg, #ff6b9d, #c44569);
      color: white;
      font-weight: bold;
      margin: 5px 3px;
      cursor: pointer;
      transition: transform 0.2s;
      font-size: 0.9rem;
      white-space: nowrap;
      box-shadow: 0 3px 10px rgba(255, 107, 157, 0.3);
    }

    button:hover {
      transform: scale(1.1);
      background: linear-gradient(135deg, #ff5582, #b33a5a);
      box-shadow: 0 5px 20px rgba(255, 107, 157, 0.4);
    }

    button:active {
      transform: scale(0.95);
    }

    .slideshow {
      margin: 15px 0;
      padding: 20px 10px;
      background: linear-gradient(135deg, #ff6b9d20, #ffd70020, #ff6b9d20);
      border-radius: 15px;
      border: 2px solid rgba(255, 200, 0, 0.4);
    }

    .birthday-message {
      font-family: 'Pacifico', cursive;
      font-size: 2.2rem;
      background: linear-gradient(135deg, #ff6b9d, #ffd700, #ff1493, #ff6b9d);
      background-size: 300% 300%;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      animation: gradient-shift 3s ease infinite, float-text 3s ease-in-out infinite;
      text-shadow: 2px 2px 4px rgba(255, 107, 157, 0.3);
      line-height: 1.4;
      margin: 0;
      filter: drop-shadow(0 2px 8px rgba(255, 215, 0, 0.4));
    }

    @keyframes gradient-shift {
      0%, 100% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
    }

    @keyframes float-text {
      0%, 100% { transform: translateY(0px); }
      50% { transform: translateY(-5px); }
    }

    .slideshow img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .secret {
      display: none;
      margin-top: 12px;
      padding: 15px 12px;
      background: rgba(255, 255, 255, 0.7);
      border-radius: 10px;
      border: 2px solid rgba(255, 200, 0, 0.4);
      color: #2c3e50;
      font-size: 0.9rem;
      line-height: 1.7;
      max-height: none;
      overflow: visible;
      text-align: left;
    }

    .secret-photo {
      width: 100%;
      max-width: 300px;
      height: auto;
      border-radius: 12px;
      margin: 15px auto 10px auto;
      display: block;
      border: 3px solid rgba(255, 200, 0, 0.5);
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    }

    footer {
      margin-top: 15px;
      font-size: 0.85rem;
      opacity: 0.9;
    }

    /* Fireworks Styles */
    .rocket {
      position: fixed;
      width: 4px;
      height: 15px;
      background: linear-gradient(to bottom, #fff, #ff6b35);
      border-radius: 2px;
      box-shadow: 0 0 10px #ff6b35;
      z-index: 5;
      pointer-events: none;
    }

    .trail {
      position: fixed;
      width: 3px;
      height: 3px;
      background: radial-gradient(circle, #ffaa00, transparent);
      border-radius: 50%;
      animation: fadeTrail 0.5s ease-out forwards;
      z-index: 5;
      pointer-events: none;
    }

    @keyframes fadeTrail {
      from { opacity: 1; transform: scale(1); }
      to { opacity: 0; transform: scale(0.3); }
    }

    .firework {
      position: fixed;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      pointer-events: none;
      z-index: 5;
    }

    .spark {
      position: fixed;
      width: 3px;
      height: 3px;
      background: white;
      border-radius: 50%;
      box-shadow: 0 0 6px currentColor;
      z-index: 5;
      pointer-events: none;
    }

    @keyframes explode {
      0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
      }
      50% {
        opacity: 1;
      }
      100% {
        transform: translate(
          calc(var(--dx) * 80px),
          calc(var(--dy) * 80px + 40px)
        ) scale(0.1);
        opacity: 0;
      }
    }

    @keyframes flash {
      0% {
        transform: scale(0);
        opacity: 1;
      }
      20% {
        transform: scale(1.5);
        opacity: 0.8;
      }
      100% {
        transform: scale(3);
        opacity: 0;
      }
    }

    .flash {
      position: fixed;
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(255,255,255,0.8), transparent);
      animation: flash 0.4s ease-out forwards;
      pointer-events: none;
      z-index: 5;
    }

    /* Mobile optimizations */
    @media (max-width: 480px) {
      .card {
        max-width: 98%;
        padding: 18px 12px;
      }

      h1 {
        font-size: 1.6rem;
      }

      p {
        font-size: 0.88rem;
      }

      button {
        padding: 10px 15px;
        font-size: 0.85rem;
        margin: 4px 2px;
      }

      .slideshow {
        padding: 15px 8px;
      }

      .birthday-message {
        font-size: 1.8rem;
      }

      .slideshow {
        height: 180px;
      }

      .secret {
        font-size: 0.85rem;
        padding: 10px;
      }
    }

    @media (max-width: 360px) {
      .card {
        padding: 15px 10px;
      }

      h1 {
        font-size: 1.4rem;
      }

      p {
        font-size: 0.82rem;
      }

      button {
        padding: 9px 12px;
        font-size: 0.8rem;
        margin: 4px 2px;
      }

      .slideshow {
        height: 160px;
      }

      .birthday-message {
        font-size: 1.5rem;
      }

      .secret {
        font-size: 0.8rem;
      }
    }

    @media (min-width: 481px) {
      .card {
        max-width: 420px;
      }
    }
    footer{
      text-align: center;
    }