/* style.css */

/* General Styles */
body {
    font-family: sans-serif;   /* Add your preferred font family */
    background-color: #f7f7f7; /* Light grey background */
    color: #333; /* Dark grey text */
    margin: 0;
    padding: 0;
    line-height: 1.6;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* Header and Navigation */
header {
    background: linear-gradient(to right, #4a90e2, #63d471); /* Example vibrant gradient */
    color: white;
    padding: 1rem 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    position: fixed; /* Make the header fixed */
    top: 0;          /* Stick it to the top */
    left: 0;         /* Stick it to the left */
    width: 100%;       /* Full width */
    z-index: 100;     /* Ensure it's on top of other content */
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo a {
    text-decoration: none;
}

.logo img {
    max-height: 80px; /* default for desktop */
    width: auto;
    height: auto;
    margin-right: 20px;
}

.nav-links {
    list-style: none;
    display: flex;
    flex-direction: row;
}

.nav-links li {
    margin: 0 15px;
}

.nav-links a {
    color: white;
    text-decoration: none;
    padding: 8px 12px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.nav-links a:hover {
    background-color: rgba(255, 255, 255, 0.1); /* Slightly transparent white */
}

/* Burger Menu (for smaller screens) */
.burger {
    display: none;
    cursor: pointer;
}

.burger div {
    width: 25px;
    height: 3px;
    background-color: white;
    margin: 5px;
    transition: all 0.3s ease;
}

/* Main Content */
main.content {
    padding: 20px;
    padding-bottom: 20px; /* Keep some bottom padding */
    margin-top: 4rem;  /* Add top margin to prevent overlap */
}

/* Hero Section */
.hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}

.hero-content {
    flex: 1;
}

.hero h1 {
    font-size: 2.5em;
    color: #333;
    margin-bottom: 10px;
}

.hero p {
    font-size: 1.2em;
    color: #666;
    margin-bottom: 20px;
}

.button {
    display: inline-block;
    padding: 12px 24px;
    background-color: #f9a825; /* Example: A bright orange */
    color: white;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.button:hover {
    background-color: #e65100; /* Darker orange on hover */
}

.hero-image {
    flex: 1;
    text-align: center;
}

.hero-image img {
    max-width: 100%;
    height: auto;
}

/* Featured Subjects Section */
.featured-subjects {
    background-color: #fff;
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.featured-subjects h2 {
    font-size: 2em;
    color: #333;
    margin-bottom: 20px;
    text-align: center;
}

.subject-list {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.subject-card {
    text-align: center;
    margin: 20px;
}

.subject-card img {
    max-width: 100px; /* Adjust as needed */
    height: auto;
    margin-bottom: 10px;
}

.subject-card h3 {
    font-size: 1.2em;
    color: #333;
}

/* Content Section */
.content-section {
    background-color: #fff; /* Optional: Give it a white background */
    padding: 20px;
    padding-bottom: 20px; /* Keep some bottom padding */
    margin-top: 20px; /* Add some space between the header/messages and the content */
    border-radius: 8px; /* Optional: Rounded corners */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Optional: Subtle shadow */
}

.content-wrapper {
    margin-bottom: 20px; /* Add space below the content wrapper */
}

/* Footer */
footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 1rem 0;
    margin-top: 20px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .navbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .nav-links {
        display: none; /* Hide by default on mobile */
        flex-direction: column;
        width: 100%;
    }

    .nav-links li {
        margin: 10px 0;
    }

    .nav-links.nav-active {
        display: flex; /* Show when the burger menu is clicked */
    }

    .burger {
        display: block; /* Show the burger menu */
    }

    .hero {
        flex-direction: column;
        text-align: center;
    }

    .hero-image {
        order: -1; /* Move image above content on smaller screens */
        margin-bottom: 20px;
    }

    .subject-list {
        flex-direction: column;
        align-items: center;
    }

    .content-section {
        margin-top: 15px;
        padding: 15px;
    }

    .logo img {
    max-height: 60px;
    }

    @media (max-width: 480px) {
        .logo img {
            max-height: 40px;
        }
    }

}

/* Example vibrant color palette (you can adjust these) */
/* Primary: #4a90e2 (a bright blue) */
/* Secondary: #63d471 (a lively green) */
/* Accent: #f9a825 (a cheerful orange) */
/* Text: #333 (dark grey) */
/* Background: #f7f7f7 (light grey) */

/* Example image placeholders (replace with your actual image paths) */
/* images/trivia_logo.png */
/* images/trivia_hero.png */
/* images/subject_history.png */
/* images/subject_science.png */
/* images/subject_pop_culture.png */

/* Example font family placeholder (replace with your preferred font) */
/* font-family: 'Your Chosen Font', sans-serif; */