body {
    font-family: 'Inter', sans-serif;
    background-color: #f3f4f6; /* Light gray background */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.main-content {
    flex: 1; /* Allows main content to grow and push footer down */
}
/* Custom styles for subtle hover effects on info links */
.info-link {
    transition: transform 0.2s ease-out, color 0.2s ease-out;
}
.info-link:hover {
    transform: translateX(5px);
    color: #2563eb; /* Blue-600 */
}
/* Animation for content pane */
@keyframes fadeInSlideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.animate-fadeInSlideUp {
    animation: fadeInSlideUp 0.5s ease-out forwards;
}

/* Styles for the dynamically displayed info content */
.info-content {
    display: none; /* Hidden by default */
    animation: fadeInSlideUp 0.3s ease-out forwards;
}
.info-content.active {
    display: block; /* Shown when active */
}

/* Rainbow text effect (modern CSS animation) */
@keyframes rainbowText {
    0% { color: #ef4444; } /* Red */
    16% { color: #f97316; } /* Orange */
    33% { color: #eab308; } /* Yellow */
    50% { color: #22c55e; } /* Green */
    66% { color: #3b82f6; } /* Blue */
    83% { color: #a855f7; } /* Purple */
    100% { color: #ef4444; } /* Red */
}
.text-rainbow {
    animation: rainbowText 6s infinite linear;
    transition: color 0.1s ease-in-out; /* Smooth color change */
}

/* Specific styles for responsive layout on smaller screens */
@media (max-width: 767px) { /* Targets screens smaller than md breakpoint (768px) */
    .main-grid {
        grid-template-columns: 1fr; /* Stack columns on small screens */
    }
    .left-nav {
        margin-bottom: 1.5rem; /* Space between stacked columns */
    }
    /* Increased fonts for main content, header, and nav for mobile devices */
    #site-title {
        font-size: 3rem; /* Still large enough for main title */
    }
    #tagline {
        font-size: 1.25rem; /* Tagline */
    }
    .left-nav h2 {
        font-size: 1.75rem; /* Nav heading */
    }
    .info-link {
        font-size: 1.375rem; /* Nav links */
    }
    /* DOUBLED FONT SIZES FOR MAIN INFO CONTENT */
    .info-content p {
        font-size: 2.5rem; /* Doubled from 1.25rem */
    }
    .info-content h4 {
        font-size: 3.5rem; /* Doubled from 1.75rem */
    }
}