body {
            font-family: 'Evolventa', sans-serif;
            font-weight: 696; /* Bold */
            -webkit-font-smoothing: antialiased;
            font-size: clamp(0.5rem, 1vw + 0.5rem, 1.2rem); /* Font scales dynamically */
            background-color: #f0f0f0;
            margin: 0;
            padding: 0;
            overflow-y: scroll; /* Allow vertical scrolling */
            height: auto; /* Ensure the page fills the screen height */
            scroll-behavior: smooth; /* Smooth scrolling experience */
            user-select: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
        }

        /* Background */
        .background {
            position: fixed; /* Fix the background */
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(145deg, #000, #111, #222, #333);
            background-size: 400% 400%;
            animation: gradient 15s ease infinite;
            z-index: -1; /* Send it to the back */
            transform: translateZ(-1px) scale(2);
        }

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

        /* Doodle Container */
        .doodle-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            max-width: 1200px;
            margin: auto;
            position: relative;
            padding-top: 50px;
            padding-bottom: 50px;
            z-index: 2; /* Above the background */
            min-height: 100vh; /* Ensure container covers full screen */
        }

        .word {
            margin: 10px;
            padding: 15px 20px;
            font-size: calc(10px + 2vw);
            color: #fff;
            font-size: 18px;
            text-align: center;
            text-shadow: 1px 1px 10px rgba(0, 0, 0, 0.7);
            border-radius: 21px;
            transition: transform 0.5s ease, color 0.5s ease, box-shadow 0.5s ease;
            cursor: pointer;
            opacity: 0.1;
            position: relative;
            display: inline-block;
            text-decoration: none;
            animation: fall 1.2s ease forwards;
        }

        .word:nth-child(odd) {
            animation-duration: 1.5s;
        }

        .word:nth-child(even) {
            animation-duration: 2s;
        }

        /* Hover effects */
        .word:hover {
            transform: scale(0.1); /* Larger scale and faster rotation */
            color: #fff;
            opacity: 0.1;
        }

        /* Neon glow effect */
        .word::before {
            content: "";
            position: absolute;
            top: -5px;
            left: -5px;
            right: -5px;
            bottom: -5px;
            border-radius: 130px;
            opacity: 0;
            box-shadow: 0 0 200px #fff, 0 0 300px #fff, 0 0 500px #fff;
            transition: opacity 1.5s ease;
        }

        .word:hover::before {
            opacity: 0.7;
        }

        /* Falling word animation */
        @keyframes fall {
            0% { transform: translateY(-100px) scale(0.5); opacity: 0; }
            100% { transform: translateY(0) scale(1); opacity: 1; }
        }
        
        @media (max-width: 768px) {
        .word {
        font-size: 20px; /* Adjust font size for smaller screens */
        }
        }
        
        .loader {
            display: none; /* Hide loader initially */
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 2rem;
            color: #fff;
        } 

        .loaded .loader {
            display: none; /* Hide loader once loaded */
        }