body {
    font-family: 'Inter', sans-serif;
    background-color: #f3f4f6; /* Light gray background */
    color: #333;
    overflow-x: hidden; /* Prevent horizontal scroll due to animations */
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition for dark mode */
}
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}
/* Custom scroll-reveal animation */
.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.reveal.active {
    opacity: 1;
    transform: translateY(0);
}
/* Typing animation for hero text */
.typing-text {
    border-right: 2px solid;
    white-space: nowrap;
    overflow: hidden;
    animation: typing 3s steps(40, end) forwards, blink-caret .75s step-end infinite;
}
@keyframes typing {
    from { width: 0 }
    to { width: 100% }
}
@keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: #2563eb; } /* Tailwind blue-700 */
}

/* Skill bar animation */
.skill-bar {
    height: 8px;
    background-color: #e5e7eb; /* Gray-200 */
    border-radius: 9999px; /* Full rounded */
    overflow: hidden;
}
.skill-progress {
    height: 100%;
    background-color: #2563eb; /* Tailwind blue-700 */
    border-radius: 9999px;
    transition: width 1s ease-out;
}
.skill-item.active .skill-progress {
    width: var(--progress-width, 0%);
}

/* Project card hover effect */
.project-card {
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
.project-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Smooth scroll effect */
html {
    scroll-behavior: smooth;
}

/* Custom CSS for animated name with gradient */
.animated-name {
    /* Applying gradient background */
    background-image: linear-gradient(to right, #2563eb, #111827); /* blue-700 to gray-900 (black) */
    -webkit-background-clip: text; /* Clip background to text shape for webkit browsers */
    background-clip: text; /* Clip background to text shape */
    color: transparent; /* Make text transparent so the background shows through */
    transition: transform 0.3s ease-in-out; /* Smooth transition for hover effect */
    display: inline-block; /* Essential for transform to work correctly on inline elements */
}
.animated-name:hover {
    transform: scale(1.05); /* Slightly enlarge on hover */
}

/* Custom CSS for about section gradient */
.about-gradient-bg {
    background-image: linear-gradient(to right, #2563eb, #111827); /* blue-700 to gray-900 (black) */
}

/* Game specific styles (Dino Rush) */
#game-area {
    background-color: #ffffff;
    border-radius: 0.75rem; /* rounded-lg */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
    padding: 2.5rem; /* p-10 */
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
canvas {
    background-color: #f7fafc; /* light background for game */
    border: 2px solid #2563eb; /* blue-700 border */
    border-radius: 0.5rem; /* rounded-md */
    margin-bottom: 1.5rem; /* mb-6 */
    display: block;
    touch-action: none; /* Prevent default touch actions on canvas */
}
#game-controls button {
    background-color: #2563eb; /* blue-700 */
    color: #ffffff;
    font-weight: 700; /* font-bold */
    padding: 0.75rem 1.5rem; /* py-3 px-6 */
    border-radius: 9999px; /* rounded-full */
    transition: background-color 0.3s ease-in-out, transform 0.3s ease-in-out;
    cursor: pointer;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    margin: 0.5rem; /* margin around buttons */
}
#game-controls button:hover {
    background-color: #1d4ed8; /* blue-800 */
    transform: scale(1.05);
}
#game-status {
    color: #4a5568; /* gray-700 */
    font-weight: 600; /* font-semibold */
    margin-bottom: 1rem; /* mb-4 */
}

/* Mobile Menu specific styles */
#mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white; /* Match header background */
    z-index: 20; /* Above header */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease-out;
    transform: translateX(100%); /* Start off-screen */
}
#mobile-menu.active {
    transform: translateX(0); /* Slide in */
}
#mobile-menu .close-btn {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    font-size: 2rem;
    cursor: pointer;
    color: #2563eb; /* blue-700 */
}
#mobile-menu ul li a {
    font-size: 1.5rem;
    padding: 1rem;
    display: block;
    color: #333;
    transition: color 0.3s;
}
#mobile-menu ul li a:hover {
    color: #2563eb; /* blue-700 */
}

/* Language Switcher Styles */
.language-switcher {
    display: flex;
    gap: 0.5rem;
    margin-left: 1rem; /* Default margin, adjusted by media queries */
}
.language-switcher button {
    background-color: #e5e7eb; /* gray-200 */
    color: #333;
    font-weight: 600;
    padding: 0.4rem 0.8rem;
    border-radius: 0.375rem; /* rounded-md */
    transition: background-color 0.3s, color 0.3s;
}
.language-switcher button:hover {
    background-color: #d1d5db; /* gray-300 */
}
.language-switcher button.active-lang {
    background-color: #2563eb; /* blue-700 */
    color: #ffffff;
}

/* Responsive adjustments for header */
@media (min-width: 1024px) {
    #mobile-menu-button {
        display: none;
    }
    #desktop-nav-links {
        display: flex !important;
    }
    .language-switcher {
        /* Increased margin for better separation on desktop */
        margin-left: 2rem !important; /* More space from nav links on desktop */
        display: flex !important;
    }
    .header-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }
    .header-content > div { /* Target the div containing nav and lang switcher */
       display: flex;
       align-items: center;
   }
}
@media (max-width: 1023px) {
    #desktop-nav-links {
        display: none !important;
    }
    #mobile-menu-button {
        display: block !important;
    }
    .language-switcher {
        display: flex !important; /* Always show language switcher */
        /* No specific margin needed here, as ml-4 on button handles spacing */
        margin-left: 0; /* Override default for mobile, spacing handled by button */
    }
    .header-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }
    .header-content .animated-name {
        flex-grow: 1; /* Allow name to take available space */
        text-align: left;
    }
}

/* Dark Mode Styles */
body.dark-mode {
    background-color: #1a202c; /* Dark gray background for dark mode (gray-900) */
    color: #e2e8f0; /* Light text for dark mode (gray-200) */
}

body.dark-mode header {
    background-color: #2d3748; /* Darker header (gray-800) */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}
body.dark-mode header .animated-name {
    background-image: linear-gradient(to right, #63b3ed, #90cdf4); /* Lighter blue gradient */
    -webkit-background-clip: text;
    background-clip: text;
}
body.dark-mode header a {
    color: #cbd5e0; /* gray-300 for nav links */
}
body.dark-mode header a:hover {
    color: #90cdf4; /* blue-300 on hover */
}

body.dark-mode #mobile-menu {
    background-color: #2d3748; /* Darker mobile menu */
}
body.dark-mode #mobile-menu .close-btn {
    color: #90cdf4; /* blue-300 */
}
body.dark-mode #mobile-menu ul li a {
    color: #e2e8f0; /* Light text for mobile menu links */
}
body.dark-mode #mobile-menu ul li a:hover {
    color: #90cdf4; /* blue-300 on hover */
}

body.dark-mode .about-gradient-bg {
    background-image: linear-gradient(to right, #1a202c, #2d3748); /* Darker gradient */
}
body.dark-mode .about-gradient-bg h1 {
    color: #e2e8f0;
}
body.dark-mode .about-gradient-bg h1 span.text-blue-300 {
    color: #90cdf4; /* blue-300 */
}
body.dark-mode .about-gradient-bg p {
    color: #cbd5e0; /* gray-300 */
}
body.dark-mode .about-gradient-bg p strong {
    color: #90cdf4; /* blue-300 */
}
body.dark-mode .about-gradient-bg p a {
    color: #90cdf4; /* blue-300 */
}
body.dark-mode .typing-text {
    border-color: #90cdf4; /* blue-300 */
}
@keyframes dark-mode-blink-caret {
    from, to { border-color: transparent }
    50% { border-color: #90cdf4; } /* blue-300 */
}
body.dark-mode .typing-text {
    animation: typing 3s steps(40, end) forwards, dark-mode-blink-caret .75s step-end infinite;
}


body.dark-mode #skills, body.dark-mode #contact {
    background-color: #2d3748; /* Darker background for sections (gray-800) */
}
body.dark-mode #projects {
    background-color: #1a202c; /* Darkest background for projects section (gray-900) */
}

body.dark-mode h2 {
    color: #e2e8f0; /* Light heading text */
}

body.dark-mode .skill-item, body.dark-mode .project-card, body.dark-mode #contact .max-w-xl {
    background-color: #4a5568; /* Darker cards (gray-700) */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 2px 4px -1px rgba(0, 0, 0, 0.12);
}
body.dark-mode .skill-item h3, body.dark-mode .project-card h3 {
    color: #e2e8f0; /* Light text for card headings */
}
body.dark-mode .skill-item span, body.dark-mode .project-card p {
    color: #cbd5e0; /* Light text for card content */
}
body.dark-mode .skill-bar {
    background-color: #4a5568; /* Darker gray for skill bar background */
}
body.dark-mode .skill-progress {
    background-color: #63b3ed; /* Lighter blue for skill progress */
}
body.dark-mode .project-card strong {
    color: #90cdf4; /* blue-300 */
}
body.dark-mode .project-card span {
    background-color: #3182ce; /* blue-600 */
    color: #e2e8f0;
}
body.dark-mode #game-area {
    background-color: #4a5568; /* Darker game area */
}
body.dark-mode canvas {
    background-color: #2d3748; /* Darker game canvas */
    border-color: #63b3ed; /* blue-500 */
}
body.dark-mode #game-status {
    color: #e2e8f0; /* Light text for game status */
}
body.dark-mode #game-controls button {
    background-color: #63b3ed; /* blue-500 */
    color: #1a202c; /* Dark text for buttons */
}
body.dark-mode #game-controls button:hover {
    background-color: #4299e1; /* blue-400 */
}

body.dark-mode footer {
    background-color: #1a202c; /* Darkest footer */
    color: #cbd5e0;
}
body.dark-mode footer a {
    color: #a0aec0; /* gray-400 */
}
body.dark-mode footer a:hover {
    color: #e2e8f0;
}

/* Dark mode button specific styles */
#dark-mode-toggle {
    position: fixed;
    bottom: 1.5rem; /* Equivalent to Tailwind bottom-6 */
    left: 1.5rem;  /* Equivalent to Tailwind left-6 */
    background-color: #2563eb; /* Blue-700 */
    color: white;
    padding: 0.75rem 1rem; /* py-3 px-4 */
    border-radius: 9999px; /* rounded-full */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* shadow-md */
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    z-index: 50; /* Ensure it's above other content */
}

#dark-mode-toggle:hover {
    background-color: #1d4ed8; /* Blue-800 */
    transform: scale(1.05);
}

body.dark-mode #dark-mode-toggle {
    background-color: #63b3ed; /* Blue-500 */
    color: #1a202c; /* Dark text */
}

body.dark-mode #dark-mode-toggle:hover {
    background-color: #4299e1; /* Blue-400 */
}

/* Responsive adjustments for dark mode button */
@media (max-width: 767px) { /* md breakpoint for Tailwind */
    #dark-mode-toggle {
        bottom: 1rem;
        left: 1rem;
        padding: 0.6rem 0.8rem;
        font-size: 0.875rem; /* text-sm */
    }
}

/* Specific dark mode styles for contact info splashes */
body.dark-mode .email, body.dark-mode .num {
    color: #e2e8f0; /* Ensure text color is light in dark mode */
}
body.dark-mode .email {
    background-image: linear-gradient(to right, #1e3a8a, #172554); /* Darker blue gradient */
}
body.dark-mode .num {
    background-color: #ea580c; /* Darker orange */
}