body {
  background: #fff0f5;
  font-family: 'Comic Sans MS', cursive, sans-serif;
  color: #c71585;
  text-align: center;
  margin: 0;
  padding: 0;
}
header {
  background: #ffc0cb;
  padding: 20px;
  font-size: 24px;
  font-weight: bold;
}
section {
  padding: 40px;
}
nav {
  margin: 20px;
}
a {
  text-decoration: none;
  margin: 10px;
  padding: 10px 20px;
  background: #ff69b4;
  color: white;
  border-radius: 10px;
}
a:hover {
  background: #ff1493;
}
    body {
      margin: 0;
      font-family: 'Comic Sans MS', cursive, sans-serif;
      background: linear-gradient(to right, #ffe6f0, #ffe6ff);
      text-align: center;
      overflow-x: hidden;
      animation: fadeIn 2s ease-in-out;
    }

    h1 {
      color: #d63384;
      font-size: 2.5em;
      margin-top: 1.5em;
      animation: popIn 1.2s ease forwards;
    }

    img.heart {
      width: 200px;
      margin: 20px auto;
      display: block;
      animation: float 4s ease-in-out infinite;
    }

    section {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 20px;
      margin: 3em auto;
      padding: 0 1em;
    }

    .card {
      background: #fff;
      border-radius: 20px;
      box-shadow: 0 8px 20px rgba(0,0,0,0.1);
      padding: 1.5em;
      max-width: 400px;
      width: 100%;
      animation: slideIn 1s ease;
    }

    ul {
      text-align: left;
      padding-left: 1.2em;
      font-size: 1.2em;
    }

    .memories img, .memories video {
      width: 100%;
      border-radius: 15px;
      margin-bottom: 1em;
    }

    .surprise-button {
      background-color: #ff69b4;
      border: none;
      padding: 1em 2em;
      font-size: 1.2em;
      border-radius: 50px;
      color: white;
      cursor: pointer;
      animation: pulse 2s infinite;
    }

    .surprise-button:hover {
      background-color: #ff1493;
    }

    @keyframes fadeIn {
      from { opacity: 0; } to { opacity: 1; }
    }

    @keyframes popIn {
      0% { transform: scale(0); opacity: 0; }
      100% { transform: scale(1); opacity: 1; }
    }

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

    @keyframes slideIn {
      from { transform: translateY(50px); opacity: 0; }
      to { transform: translateY(0); opacity: 1; }
    }

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