/* GENERAL PAGE STYLING */

body {
    /* Removes the browser's default outer spacing */
    margin: 0;

    /* Main font used across the website */
    font-family: Arial, sans-serif;

    /* Main Halloween background color */
    background-color: #121212;

    /* Default text color */
    color: white;
}


/* NAVIGATION BAR */

nav {
    background-color: #2a2a2a;

    /* Space inside the navbar */
    padding: 15px;

    /* Centers the navigation links */
    text-align: center;

    /*
        Keeps the navbar visible at the top
        after the user scrolls past it.
    */
    position: sticky;
    top: 0;

    /*
        Keeps the navbar above other page elements.
        Higher z-index values appear in front of lower ones.
    */
    z-index: 1000;

    /* Small shadow underneath the navbar */
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
}


/* Navigation links */
nav a {
    color: orange;

    /* Removes the normal underline from links */
    text-decoration: none;

    /*
        Space outside each link.
        0 = top/bottom
        8px = left/right
    */
    margin: 0 8px;

    /*
        Space inside each clickable link.
        Increase this if you want larger navigation buttons.
    */
    padding: 10px 18px;

    font-size: 18px;

    /* Rounded corners for the hover background */
    border-radius: 8px;

    /* Makes hover changes fade smoothly */
    transition: 0.3s;
}


/* Navigation link while the mouse is hovering over it */
nav a:hover {
    background-color: orange;
    color: black;
}


/* HERO SECTION 

    The hero is the large introduction area
    at the top of the website.
*/
.hero {
    text-align: center;

    /*
        Controls how tall/spacious the hero feels.
        80px = top/bottom
        20px = left/right
    */
    padding: 80px 20px;

    background-color: #181818;
}


/* Main title inside the hero */
.hero h1 {
    /* Change this if the title feels too large or small */
    font-size: 50px;

    color: orange;

    /* Space between the title and paragraph */
    margin-bottom: 10px;
}


/* Introduction text inside the hero */
.hero p {
    font-size: 20px;

    /* Space between the paragraph and button */
    margin-bottom: 30px;
}


/* Main hero button */
.hero-button {
    /*
        Links are normally inline elements.
        inline-block lets us give the link padding
        so it behaves more like a button.
    */
    display: inline-block;

    background-color: orange;
    color: black;

    /* Removes the normal underline from the link */
    text-decoration: none;

    /*
        Controls the size of the button.
        12px = top/bottom
        24px = left/right
    */
    padding: 12px 24px;

    /* Rounded button corners */
    border-radius: 8px;

    font-weight: bold;

    /* Smooth hover animation */
    transition: 0.3s;
}


/* Hero button while hovered */
.hero-button:hover {
    background-color: white;
}


/* 
   MAIN CONTENT SECTIONS

 Styles every <section> on the page */
section {
    /*
        Stops sections from becoming too wide
        on large monitors.

        Increase this value if you want wider content.
    */
    max-width: 1000px;

    /*
        50px = space above and below each section
        auto = centers the section horizontally
    */
    margin: 50px auto;

    /*
        Space between the content and the section edges.
        Reduce this if the sections feel too large.
    */
    padding: 40px;

    background-color: #1f1f1f;

    /* Rounded section corners */
    border-radius: 14px;

    /* Orange Halloween accent on the left */
    border-left: 5px solid orange;
}


/* 
   SECTION LAYOUT
    Holds the text and image/video inside a section.

    Flexbox places the children next to each other:
    TEXT | IMAGE
*/
.section-content {
    display: flex;

    /* Lines both sides up vertically */
    align-items: center;

    /*
        Space between the text and image/video.
        Increase this if they feel too close together.
    */
    gap: 40px;
}


/* Text side of a section */
.section-text {
    /*
        flex: 1 means this side takes an equal share
        of the available space.
    */
    flex: 1;
}


/* Image side of a section */
.section-image {
    /* Shares the available space equally with the text */
    flex: 1;
}


/* Images inside .section-image */
.section-image img {
    /*
        Makes the image fill its container
        without using a fixed pixel width.
    */
    width: 100%;

    /* Rounded image corners */
    border-radius: 12px;
}


/* 
   VIDEO EMBEDS

    Container for embedded videos.
    flex: 1 lets it share space with .section-text.
*/
.video-container {
    flex: 1;
}


/*
    Styles an <iframe> inside .video-container.

    An iframe lets us show content from another website,
    such as a YouTube video, inside our own page.
*/
.video-container iframe {
    /* Makes the video fill the width of its container */
    width: 100%;

    /*
        Default desktop video height.
        Change this if the video looks too tall or short.
    */
    height: 315px;

    /* Removes the browser's default iframe border */
    border: none;

    /* Matches the rounded style of our images */
    border-radius: 12px;
}

/* 
   TEAM PAGE BUTTON

    Button used for external links such as the FGU team page.
    Change the padding if you want the button larger or smaller.
*/
.team-button {
    
     /* This is very similar to .hero-button.
       We could later replace both with one shared button class. */
       
    display: inline-block;

    background-color: orange;
    color: black;

    text-decoration: none;

    padding: 10px 20px;
    margin-top: 10px;

    border-radius: 8px;
    font-weight: bold;

    /* Smoothly changes the button when hovered */
    transition: 0.3s;
}


/* Changes the team button while the mouse is over it */
.team-button:hover {
    background-color: white;
}


/* 
   FOOTER
*/

footer {
    text-align: center;
    padding: 20px;
    background-color: #1a1a1a;
}


/* 
   MOBILE / SMALL SCREENS

    Everything inside this block only applies
    when the screen is 700px wide or smaller.

    These rules override the normal desktop rules above.
*/
@media (max-width: 700px) {

    /*
        Changes:
        TEXT | IMAGE

        into:

        TEXT
        IMAGE
    */
    .section-content {
        flex-direction: column;
    }


    /* Smaller hero title so it fits better on phones */
    .hero h1 {
        font-size: 36px;
    }


    /* Smaller hero button for narrow screens */
    .hero-button {
        padding: 8px 16px;
        font-size: 14px;
    }


    /*
        Reduces the empty space inside sections
        so the content has more room on phones.
    */
    section {
        padding: 25px;
    }


    /* Makes embedded videos shorter on smaller screens */
    .video-container iframe {
        height: 220px;
    }
}