:root {
        --background-color: #f8f8f8;
        --text-color: #121416;
        --card-bg: #fff;
        --primary-color: #7948e4;
        --transition-duration: 0.6s;
        --button-primary-bg: #7948e4;
        --button-primary-text: #ffffff;
        --button-secondary-bg: #f2f0ff; 
        --button-secondary-text: #131117;
        --logo-text-color: #0093e2; 
        --link-color: #7948e4; /* Light Theme Link Color */
    }

        .dark-theme {
        --background-color: #1a1a1a;
        --text-color: #f0f0f0;
        --card-bg: #2b2b2b;
        --primary-color: #9F7AEA; /* Adjusted primary color for dark mode toggle */
        --link-color: #9cb3ff; 
        --logo-text-color: #9F7AEA;
        --button-primary-bg: #9F7AEA;
        --button-primary-text: #131117;
        --button-secondary-bg: #4A4A4A;
        --button-secondary-text: #ffffff;
    }

        .light-theme {
            
        }

        #site-wrapper {
        background-color: var(--background-color);
        color: var(--text-color);
        min-height: 100vh;
    }

        #site-wrapper.transitions-enabled * {
        transition: 
            color var(--transition-duration) ease-in-out,
            background-color var(--transition-duration) ease-in-out;
    }

        #site-wrapper h1, #site-wrapper h2, #site-wrapper h5, #site-wrapper p, #site-wrapper span, #site-wrapper div {
        color: var(--text-color);
    }

        #site-wrapper p {
            color: var(--text-color); 
            text-decoration: none;
        }

        #site-wrapper a {
        color: var(--link-color); 
    }

        .card {
            background-color: var(--card-bg);
            color: var(--text-color);
        }

        header {
            background-color: var(--card-bg);
            border-color: var(--background-color);
        }

        .bg-light {
            background-color: var(--card-bg);
        }

        .theme-toggle {
            position: fixed;
            bottom: 20px;
            left: 20px;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: var(--primary-color);
            color: white;
            border: none;
            cursor: pointer;
            z-index: 1000; 
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            transition: background-color var(--transition-duration);
        }

        .theme-toggle i {
            color: white !important;
            transition: color var(--transition-duration) ease-in-out;
        }

        button:hover {
            animation: pulse 1s;
        }

        .card:hover {
            animation: pulse 1s;
        }

        .logo-text-wrapper {
            display: flex;
            font-size: 1.5rem; 
            font-weight: 800; 
            line-height: 1;
            letter-spacing: 2px; 
            align-items: flex-end; 
        }

        #logo-image {
            transition: transform 0.2s ease-out; /* Smooth transition for the jump */
        }

        #logo-container:hover .logo-letter {
            transform: translateY(-3px);
        }

        .logo-letter {
            display: block; 
            color: var(--logo-text-color) !important; 
            transition: transform 0.2s ease-out !important; 
        }

        .logo-letter:nth-child(1) { transition-delay: 0.0s !important; }
        .logo-letter:nth-child(2) { transition-delay: 0.05s !important; }
        .logo-letter:nth-child(3) { transition-delay: 0.1s !important; }
        .logo-letter:nth-child(4) { transition-delay: 0.15s !important; }
        .logo-letter:nth-child(5) { transition-delay: 0.2s !important; }
        .logo-letter:nth-child(6) { transition-delay: 0.25s !important; }