/* =============================================
   DEFAULT SETTING
   ============================================= */

* {
    /* Some CSS properties in this file were learned outside class from online tutorials and documentation,
       including https://www.runoob.com and MDN Web Docs.

       I used these sources when I wanted to make the layout cleaner and understand how real websites organize CSS.
       My takeaway is that basic CSS properties control appearance, but layout-related properties control how users experience the page. */
    margin: 0;
    padding: 0;
    box-sizing: border-box;

    /*font setting for all context*/
    font-style: normal;
    font-weight: normal;
    font-family: "KH Interference TRIAL",Formula1,"figtree",Times,serif;
    line-height: 1;
}

/* =============================================
   scrolling smooth effect
   ============================================= */
html {
    /* I learned scroll-behavior from online CSS tutorials.
       I used it to make internal page jumps feel smoother instead of suddenly jumping. */
    scroll-behavior: smooth;
}

/* =============================================
   BASE
   ============================================= */
body {
    /* I use body as the main page container.
       The flex-direction column helps the page stack from header to footer vertically. */
    background: #111111;
    color: #ffffff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

#page-wrapper {
    /* This wrapper holds the whole visible page.
       I use flex here so main content can grow and push the footer toward the bottom. */
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* =============================================
   HEADER  — dark hero section
   ============================================= */
header {
    background: #111111;
    padding: 80px 6vw 64px;
    border-bottom: 3px solid #e10600;
}

header h1 {
    font-size: 5.5vw;
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #ffffff;
    margin-bottom: 19px;
}

/* Header subtitle */
header p {
    font-family: 'Arial', 'Helvetica', sans-serif;
    font-size: 16px;
    line-height: 1.9;
    color: #cccccc;
    letter-spacing: 0.3px;
}

/* =============================================
   NAVIGATION  — sticky, horizontal
   ============================================= */
nav {
    /* I use this navigation section to keep the main links clear and easy to find.
       The red bottom border separates the navigation from the rest of the page, so it does not look like it is accidentally attached to another section. */
    background: #111111;
    border-bottom: 3px solid #e10600;
    /* I learned position: sticky from online CSS tutorials when I was trying to keep the navigation visible while scrolling.
       My takeaway is that sticky navigation improves user experience on a long page because users can still reach the links easily. */
    position: sticky;
    top: 0;
    z-index: 100;
}

nav ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 1100px;
    margin: 0 auto;
}

nav li {
    margin: 0;
}

nav a {
    display: block;
    color: #ffffff;
    text-decoration: none;
    padding: 18px 26px;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    border-bottom: 3px solid transparent;
}

nav a:hover {
    /* I changed the hover border to only affect the bottom border instead of all sides.
       This prevents small layout movement when hovering over navigation links. */
    border-bottom: 3px solid #14f3ad;
    color: #14f3ad;
}

/* =============================================
   MAIN CONTENT (base layout)
   ============================================= */
main {
    /* This main section uses flex: 1 so it can take up remaining vertical space.
       This helps keep the footer near the bottom when the page content is short. */
    width: 85vw;
    margin: 40px auto;
    flex: 1;
}

/* =============================================
   CREDITS PAGE LAYOUT
   ============================================= */
.credits-main {
    /* This section organizes the credit page content so each source group is easier to read.
       I used Flexbox because it was covered in class and works well for wrapping sections onto new lines. */
    width: 90%;
    /* I used max-width to stop the content from becoming too wide on large screens.
       I learned this from online CSS tutorials while working on responsive layout. */
    max-width: 1200px;
    margin: 40px auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
}

.credit-section {
    /* Each source group becomes a visual card.
       This makes the long credits page less crowded and easier to scan. */
    width: 100%;
    /* I changed the credit card to full width because some copyright icons and long credit lines were wrapping too early.
       My takeaway is that credit pages need more reading space than normal card layouts. */
    min-width: 0;
    background: #1a1a1a;
    border-top: 3px solid #e10600;
    padding: 24px;
}

.credit-section h2 {
    color: #ffffff;
    margin-bottom: 16px;
    font-size: calc(18px + 0.5vw);
}

.credit-section ul {
    margin-left: 20px;
}

.credit-section li {
    margin-bottom: 18px;
    line-height: 160%;
    font-size: calc(13px + 0.2vw);
}

.credit-section a {
    color: #14f3ad;
    text-decoration: none;
}

.credit-section a:hover {
    text-decoration: underline;
}
.credit-section li img {
    /* I learned this adjustment while fixing the credit page layout.
       The global img rule makes images display as block, which caused the small CC icons to break into new lines.
       I changed them back to inline so they stay next to the text like normal license icons. */
    display: inline;
    vertical-align: middle;
    margin: 0 0 0 4px;
    box-shadow: none;
    border: none;

}

/* =============================================
   FOOTER
   ============================================= */
footer {
    /* I use margin-top: auto with the page flex layout so the footer stays at the bottom.
       My takeaway is that flexbox can control vertical page structure, not only horizontal layout. */
    background: #111111;
    border-top: 3px solid #e10600;
    text-align: center;
    padding: 40px 32px;
    margin-top: auto;
}

footer p {
    color: #666666;
    font-size: 14px;
    line-height: 1.8;
}

footer a {
    color: #cccccc;
    text-decoration: none;
}

footer a:hover {
    color: #14f3ad;
}

/* =============================================
    Responsive design
   ============================================= */
@media screen and (max-width: 600px) {
    header {
        padding: 48px 20px 36px;
        text-align: center;
    }

    header h1 {
        font-size: calc(28px + 1vw);
        line-height: 1.05;
        margin-bottom: 12px;
    }

    header p {
        font-size: calc(14px + 0.2vw);
        line-height: 1.7;
    }

    nav ul {
        flex-direction: column;
        align-items: stretch;
    }

    nav a {
        text-align: center;
        padding: 16px 18px;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
    }

    main {
        width: 92vw;
        margin: 20px auto;
        /* Note:
           I learned the gap property from online CSS tutorials.
           I used it to control spacing between elements instead of using extra <br> in HTML.
           My takeaway is that gap is cleaner and easier for layout spacing. */
        gap: 16px;
    }

    .credits-main {
        width: 92%;
        margin: 20px auto;
        gap: 18px;
    }

    .credit-section {
        width: 100%;
        min-width: 0;
        padding: 18px;
    }

    footer {
        text-align: center;
        padding: 28px 20px;
    }

    footer p {
        font-size: 13px;
    }
}