/* Global Styles */
html, body {
    height: 100vh; /* Use full height of the viewport */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: white; /* White background */
    color: black; /* Black text */
}

/* Background */
.bg {
    background-image: url('https://scitechdaily.com/images/Human-Brain-Memories-Neurons.jpg');
    height: 100vh;
    width: 100vw;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transition: opacity 0.5s ease-in-out;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

/* Navigation Bar */
/* Ensure the navigation bar stays fixed on top */
/* Ensure navigation bar is always visible */
.nav {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    padding: 15px 0;
    text-align: center;
    display: flex;
    justify-content: center;
    gap: 20px;
    z-index: 1000; /* Keeps it above everything */
}


.nav a {
    color: white;
    text-decoration: none;
    padding: 10px 15px;
    font-size: 20px;
    font-weight: bold;
    display: inline-block;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.nav a:hover {
    background-color: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

/* Content Area */
.content {
    margin-top: 80px;
    padding: 20px;
    max-width: 900px;
    color: white;
    text-align: center;
    font-size: 1.2em;
    transition: opacity 0.5s ease-in-out;
}

/* Typing Effect */
.typed-text {
    font-size: 24px;
    text-align: center;
    max-width: 70%;
    background-color: rgba(0, 0, 0, 0.6);
    padding: 20px;
    border-radius: 10px;
    min-height: 120px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Page Specific Styling */
.fact-container, .quiz-container, .brain-container , .aboutcontainer{
    color: black;
    padding: 57px;
    border-radius: 10px;
   
}

/* Mobile-friendly Navigation */
@media (max-width: 768px) {
     .about-container {
        margin-top: 80px;  
        width: 90%;
       
        text-align: center;
        font-size: 1em;
    }

    h1 {
        font-size: 1.8em; /* Slightly larger but fits mobile */
    }

    p {
        font-size: 1em;
        line-height: 1.5;
    }
    .nav {
        display: flex;
        flex-direction: row; /* Keep items in one row */
        flex-wrap: wrap;
        justify-content: center;
        background-color: rgba(0, 0, 0, 0.8);
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        padding: 10px 0;
        z-index: 1000;
    }

    .nav a {
        font-size: 14px; /* Make text smaller */
        padding: 8px 12px;
        text-align: center;
        color: white;
        text-decoration: none;
    }

    /* Fix overlap issue */
    .typed-text {
        margin-top: 80px; /* Push text down */
        font-size: 1em;
        text-align: center;
        padding: 10px;
    }
   

    /* Fix Navbar Overlap */
    .content {
        top: 100%; /* Push down the content below the navbar */
    }

    /* Adjust Fact Cards */
    .fact-container {
         margin-top: 55%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center; /* Center align facts */
        gap: 10px; /* Add space between facts */
        padding: 10px;
    }
    .fact-container, .quiz-container, .brain-container, .aboutcontainer {
    color: black;
    padding-top: 90px;
    border-radius: 10px;
     margin-top: 55%;
        top: 100%;
    }

    .fact {
        
        width: 90%; /* Make facts wider for better readability */
        padding: 15px;
        text-align: center; /* Center text for better mobile view */
        font-size: 1.1em;
    }

    /* Fix Button Spacing */
    #showMore {
        width: 100%;
        max-width: 300px;
        margin: 20px auto;
        display: block;
    }


    
     .quiz-container {
        margin-top: 55%;
        width: 90%;
       
        padding: 15px;
    }

    .question {
        font-size: 1em; /* Reduce text size for better spacing */
    }

    /* Improve Spacing of Radio Buttons */
    .question label {
        display: block;
        font-size: 1em;
        margin-bottom: 8px;
    }

    /* Reduce Size of Quiz Header */
    h1, h2 {
        font-size: 1.5em; /* Prevent overflow on smaller screens */
        text-align: center;
    }
}


/* Brain Container */
.brain-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 90vh;
    overflow: hidden;
}

.brain-image {
    max-width: 75%;
    max-height: 85vh;
    object-fit: contain;
}

/* Positioning Brain Lobes */
.lobe {
    position: absolute;
    cursor: pointer;
    background-color: rgba(255, 255, 255, 0.2);
    transition: background-color 0.3s;
    border: 2px solid rgb(0 0 0 / 23%);
    border-radius: 50%;
}

.lobe:hover {
    background-color: rgba(255, 255, 255, 0.4);
}

/* Adjusting Positioning for Each Lobe */
#frontal { top: 25%; left: 28%; width: 12%; height: 18%; }
#parietal { top: 15%; right: 30%; width: 12%; height: 18%; }
#temporal { top: 60%; left: 42%; width: 12%; height: 15%; }
#occipital { top: 52%; right: 25%; width: 10%; height: 14%; }

/* Info Box Fix */
/* Info Box Styling */
#info-box {
    position: absolute;
    background-color: rgba(255, 255, 255, 0.95);
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 15px;
    width: 280px; /* Set a fixed width */
    max-width: 90%; /* Prevent it from being too wide on small screens */
    text-align: center;
    display: none;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    transition: all 0.3s ease-in-out;
}


/* Fact container: Adjust size to fit all items */
.fact-container {
    display: grid;
    gap: 10px;
    max-width: 80%;
    text-align: center;
    margin-top: 55%; /* Add space below navbar */
}
/* Fact box: Reduce padding & margins */
.fact {
    background-color: rgba(240, 240, 240, 0.9);
    color: black;
    border-left: 3px solid #8E54E9;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    font-size: 1em; /* Reduce font size */
}

h1 {
    font-size: 2.5em;
    text-align: center;
    margin-top: 90px; /* Add margin so it’s not hidden under navbar */
    font-weight: bold;
}

/* Trivia & Quiz: Adjust size */
#trivia, #quiz {
    width: 80%;
    padding: 10px;
    font-size: 1em;
}

#result {
    font-weight: bold;
    margin-top: 10px;
    text-align: center;
    font-size: 1.2em;
}

/* Button Styling */
button {
    background-color: #5490e9;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 25px;
    cursor: pointer;
    font-size: 1.2em;
    transition: background-color 0.3s ease, transform 0.3s ease;
    box-shadow: 0 2px 5px rgba(255, 255, 255, 0.2);
}

button:hover {
    background-color: #3a7bd5;
    transform: scale(1.05);
}

.about {
    padding: 20px;
    max-width: 900px;
    text-align: center;
    font-size: 1.2em;
    transition: opacity 0.5s ease-in-out;
}
.hidden {
    display: none;
}