@charset "utf-8";

/* =========================================
   1. GLOBAL STYLES (Assignment 4, Step 4)
   Styles that apply to ALL screen sizes.
   ========================================= */
body {
    font-family: Verdana, Geneva, sans-serif;
    color: rgb(91, 91, 91);
    background-color: ivory;
}

header {
    text-align: center;
    padding: 20px;
}

header img {
    width: 100%;
    display: block;
}

h1, h2 {
    text-shadow: 4px 6px 5px gray; /* Step 6a */
}

main {
    padding: 20px; /* Step 9a */
    margin-top: 35px; /* Step 9b */
}

nav ul {
    list-style: none; /* Step 7.a.iv.1 */
    margin: 0;
    padding: 0;
}

nav a {
    display: block; /* Step 7.a.vi.1 */
    background-color: #34495e; /* Step 7.a.vi.2 */
    line-height: 2.8em; /* Step 7.a.vi.3 */
    text-decoration: none; /* Step 7.a.vi.4 */
    text-align: center; /* Step 7.a.vi.5 */
    color: #ecf0f1;
}

nav a:hover {
    background-color: #f1c40f; /* Step 7.a.vii.1 */
    color: #2c3e50; /* Step 7.a.vii.2 */
}

footer {
    clear: both; /* Step 10.a - Crucial for float fix */
    background-color: #34495e;
    color: rgba(236, 240, 241, 0.6);
    text-align: center;
    padding: 10px;
}

/* =========================================
   2. MOBILE STYLES (Assignment 4, Step 3 & 5-7)
   Max-width: 768px
   ========================================= */
@media only screen and (max-width: 768px) {
    body {
        width: 100%; /* Step 5a */
        margin: 0; /* Step 5b */
    }

    nav li {
        float: none; /* Step 6.a.i */
        font-size: x-large; /* Step 6.a.ii */
        width: 100%; /* Step 6.a.iii */
    }

    nav a {
        border-bottom: 1px solid black; /* Step 6.b.i */
    }

    main > img {
        width: 90%; /* Step 7a */
        float: none; /* Step 7b */
        display: block;
        margin: 0 auto;
    }

    /* Flex Gallery Mobile View (1 column) */
    .gallery img {
        width: 100%; /* Step 8b */
    }
}

/* =========================================
   3. DESKTOP STYLES (Assignment 4, Step 4)
   Min-width: 769px
   ========================================= */
@media only screen and (min-width: 769px) {
    html {
        /* Desktop only background (Step 4a) */
        background-image: url('background.jpg'); 
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    }

    body {
        width: 90%; /* Step 5b (from previous assignment) */
        margin-left: auto;
        margin-right: auto; /* Step 5c */
    }

    nav li {
        width: 20%; /* Step 7.a.v.2 */
        float: left; /* Step 7.a.v.3 */
    }

    main > img {
        width: 25%; /* Step 8a */
        float: right; /* Step 8a */
        padding: 25px;
    }

    /* Flex Gallery Desktop View (4 columns) */
    .gallery img {
        width: 25%; /* Step 8b */
    }
}

/* =========================================
   4. FLEX GALLERY (Assignment 4, Step 8)
   ========================================= */
.gallery {
    display: flex; /* Step 8b - MUST use flex */
    flex-wrap: wrap; /* Allows images to wrap to next line */
}

/* Tablet View: Transition to 2-column layout */
@media screen and (max-width: 768px) and (min-width: 480px) {
    .gallery img {
        width: 50%; /* Step 8b */
    }
}