
        /* Custom styles and animations */
        @keyframes animated-gradient {
            0% {
                background-position: 0% 50%;
            }

            50% {
                background-position: 100% 50%;
            }

            100% {
                background-position: 0% 50%;
            }
        }

        body {
            font-family: 'Inter', sans-serif;
            background: linear-gradient(-45deg, #fce7f3, #fbcfe8, #f9a8d4, #f472b6);
            background-size: 400% 400%;
            animation: animated-gradient 15s ease infinite;
            overflow: hidden;
            /* Hide scrollbars during animation */
        }

        .font-dancing {
            font-family: 'Dancing Script', cursive;
        }

        .font-playfair {
            font-family: 'Dancing Script', cursive;
        }

        .card {
            opacity: 0;
            transform: translateY(30px) scale(0.95);
            transition: opacity 0.6s ease-out, transform 0.6s ease-out;
            perspective: 1000px;
        }

        .card.visible {
            opacity: 1;
            transform: translateY(0) scale(1);
        }

        .card-inner {
            transition: transform 0.5s ease;
        }

        .card:hover .card-inner {
            transform: rotateY(5deg) rotateX(5deg) scale(1.05);
        }

        /* New Modal Style */
        .message-modal {
            background-color: #fff;
            border: 2px solid #fbcfe8;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
            overflow: hidden;
        }

        #modal-canvas {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
        }

        #modal-message {
            position: relative;
            z-index: 2;
        }

        #intro-screen {
            transition: opacity 1s ease-in-out;
        }

        .text-shadow {
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
        }

        .text-shadow-md {
            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
        }
 