body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-family: 'Comic Sans MS', cursive;
    background: radial-gradient(circle, #ffe1f0, #ffc9de);
    animation: glowBG 8s ease-in-out infinite;
}

@keyframes glowBG {
  0% { filter: brightness(1); }
  50% { filter: brightness(1.1); }
  100% { filter: brightness(1); }
}

.background-blur {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url("birthday-person.jpg");
    background-size: cover;
    background-position: center;
    filter: blur(8px) brightness(0.8);
    opacity: 0.3;
    z-index: 0;
}

.birthday-container {
    position: relative;
    z-index: 2;
    text-align: center;
    padding-top: 5%;
}

.heart-frame {
    width: 160px;
    height: 160px;
    margin: 0 auto 20px;
    background: rgb(255, 131, 172);
    clip-path: path('M80 30 C 75 15, 55 15, 50 30 C 45 15, 25 15, 20 30 C 10 55, 40 80, 80 110 C 120 80, 150 55, 140 30 C 135 15, 115 15, 110 30 C 105 15, 85 15, 80 30 Z');
 overflow: hidden;
            box-shadow: 0 0 15px #ff9edb;
    }

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

    .glow-text {
        font-size: 2.8rem;
        color: #ff69b4;
        animation: glow 1.5s ease-in-out infinite alternate;
    }

    .sweet-msg {
        color: #7b2869;
        font-size: 1.2rem;
        margin: 15px 0 25px;
    }

    button {
        padding: 14px 30px;
        font-size: 1.1rem;
        border: none;
        border-radius: 30px;
        background-color: #ff7eb9;
        color: white;
        cursor: pointer;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    }

    button:hover {
        background-color: #ff4fa4;
    }

    @keyframes glow {
        0% {
            text-shadow: 0 0 10px #fff;
        }

        100% {
            text-shadow: 0 0 20px #ff69b4, 0 0 30px #ff69b4;
        }
    }

.balloon {
  position: absolute;
  width: 40px;
  height: 60px;
  border-radius: 50%;
  opacity: 0.7;
  animation: float 6s infinite ease-in;
}

.balloon1 {
  left: 20%;
  background: #ff6b6b;
  animation-delay: 0s;
}
.balloon2 {
  left: 50%;
  background: #6bcf77;
  animation-delay: 1s;
}
.balloon3 {
  left: 75%;
  background: #4d96ff;
  animation-delay: 2s;
}

@keyframes float {
  0% { bottom: -100px; transform: translateX(0); }
  50% { transform: translateX(30px); }
  100% { bottom: 110vh; transform: translateX(-30px); }
}

.heart {
  position: absolute;
  width: 10px;
  height: 10px;
  background: pink;
  transform: rotate(45deg);
  animation: heartFall 5s infinite ease-in;
}

.heart::before,
.heart::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  background: pink;
  border-radius: 50%;
}

.heart::before {
  top: -5px;
  left: 0;
}
.heart::after {
  left: -5px;
  top: 0;
}

.heart1 { left: 15%; animation-delay: 0s; }
.heart2 { left: 40%; animation-delay: 2s; }
.heart3 { left: 70%; animation-delay: 4s; }

@keyframes heartFall {
  0% { top: -10px; opacity: 2; transform: rotate(0deg) scale(1); }
  100% { top: 110vh; opacity: 0; transform: rotate(360deg) scale(1.2); }
}

.bounce-text {
  font-size: 2.5rem;
  animation: bounce 2s infinite;
  color: #ff69b4;
}

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


.moon {
  position: absolute;
  top: 10%;
  left: 85%;
  width: 90px;
  height: 90px;
  background: #D9D6CF;
  border-radius: 50%;
  box-shadow: 0 0 40px 20px rgba(217, 214, 207, 0.5);
  animation: pulse 5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 60px 30px #f5f3ce80; }
  50% { box-shadow: 0 0 90px 40px #fffacd; }
}