html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden; /* Prevent scrolling */
}
        canvas {
            display: block;
            margin: auto;
            background-color: #22c55e; /* Tailwind bg-green-500 */
        }

        /* Modal styling */
        #gameOverModal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            justify-content: center;
            align-items: center;
        }

        .modal-content {
            background-color: white;
            padding: 20px;
            text-align: center;
            border-radius: 8px;
            width: 300px;
            color: black;
        }

        .modal-button {
            padding: 10px;
            margin: 5px;
            border-radius: 8px;
            cursor: pointer;
        }

        /* Styling for the difficulty dropdown */
        #difficultyDropdown {
            padding: 12px 24px;
            margin: 10px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 16px;
        }

        /* Tailwind classes */
        .bg-green-500 { background-color: #22c55e; }
        .bg-yellow-500 { background-color: #f59e0b; }
        .bg-yellow-400 { background-color: #fbbf24; }
        .bg-blue-500 { background-color: #3b82f6; }
        .bg-blue-400 { background-color: #60a5fa; }
        .bg-red-500 { background-color: #ef4444; }
        .bg-red-400 { background-color: #f87171; }
        .bg-green-400 { background-color: #34d399; }

        .hover\:bg-yellow-400:hover { background-color: #fbbf24; }
        .hover\:bg-blue-400:hover { background-color: #60a5fa; }
        .hover\:bg-red-400:hover { background-color: #f87171; }
        .hover\:bg-green-400:hover { background-color: #34d399; }



/* flappy bird text decoration */
/* Shine effect animation */
        @keyframes shine {
            0% {
                background-position: -100%;
            }
            100% {
                background-position: 100%;
            }
        }

        /* Flash effect animation */
        @keyframes flash {
            0% {
                opacity: 1;
            }
            50% {
                opacity: 0.5;
            }
            100% {
                opacity: 1;
            }
        }

        /* Apply hover effects */
        .text-hover {
            background-image: linear-gradient(90deg, #fff, #ffcc00, #fff);
            background-size: 200% 100%;
            background-clip: text;
            color: transparent;
            text-decoration: none;
            transition: background-position 0.5s ease, opacity 0.3s ease, text-decoration 0.3s ease;
        }

        .text-hover:hover {
            animation: shine 1s linear infinite, flash 1s ease-in-out;
            text-decoration: underline;
            text-decoration-color: #ffcc00;  /* Customize underline color */
        }




/* Create a bouncing/flapping effect for the bird image */
@keyframes flapAnimation {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);  /* Moves the image upwards */
    }
    100% {
        transform: translateY(0);  /* Returns the image to its original position */
    }
}

/* Apply the animation to the bird image */
.bird-animation {
    display: inline-block;
    animation: flapAnimation 0.9s ease-in-out infinite;  /* Apply the animation with a 0.5s duration */
}