body {
    font-family: 'Kanit', sans-serif;
    overflow: hidden;
}

.font-sriracha {
    font-family: 'Sriracha', cursive;
}

.gradient-bg {
    background: linear-gradient(-45deg, #f8bbd0, #f48fb1, #f06292, #ec407a);
    background-size: 400% 400%;
    animation: gradient-animation 15s ease infinite;
}

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


.heart {
    position: absolute;
    bottom: -50px; 
    font-size: 2rem;
    color: white;
    opacity: 0.7;
    animation: float-up 10s linear infinite;
}

@keyframes float-up {
    0% {
        transform: translateY(0) translateX(0) rotate(0deg);
        opacity: 0.7;
    }
    100% {
        transform: translateY(-120vh) translateX(50px) rotate(360deg); /* Float up and slightly sideways */
        opacity: 0;
    }
}


.card {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all 0.5s ease;
}

.open-button {
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.open-button:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}

#message-card.active {
    animation: fade-in-up 0.8s forwards cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}