body {
    background-color: #f8fbff;
    /* Soft polka dot background */
    background-image: radial-gradient(#cde0f5 20%, transparent 20%), radial-gradient(#cde0f5 20%, transparent 20%);
    background-position: 0 0, 20px 20px;
    background-size: 40px 40px;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* Floating Animations */
@keyframes float {
    0% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-15px) rotate(2deg); }
    100% { transform: translateY(0px) rotate(0deg); }
}

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

@keyframes drift {
    0% { transform: translateX(0px); }
    50% { transform: translateX(15px); }
    100% { transform: translateX(0px); }
}

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

.animate-float {
    animation: float 4s ease-in-out infinite;
}

.animate-float-delayed {
    animation: float-reverse 5s ease-in-out infinite;
    animation-delay: 1s;
}

.animate-drift {
    animation: drift 6s ease-in-out infinite;
}

.animate-drift-slow {
    animation: drift 8s ease-in-out infinite;
    animation-delay: 2s;
}

.animate-bounce-soft {
    animation: pulse-soft 2s ease-in-out infinite;
}

/* Cute Photo Frame */
.photo-frame {
    border: 6px solid #ffffff;
    box-shadow: 0 10px 25px rgba(162, 210, 255, 0.4);
    position: relative;
}

.photo-frame::after {
    content: '👑';
    position: absolute;
    top: -20px;
    right: -10px;
    font-size: 2rem;
    transform: rotate(15deg);
    animation: float 3s ease-in-out infinite;
}

/* Card Container Polish */
.card-container {
    background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(253,240,213,0.8) 100%);
    backdrop-filter: blur(10px);
}