* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: #D2B48C; /*added the background color after I took out the picture*/
    background-size: cover;
    color: #221811;
    font-family: Tahoma, Arial,sans-serif;
    text-align: left;
}
#wrapper {
    /*removed all margin and width*/
    max-width: 800px;
    background-color: #231814;
    overflow: auto;
    
}

header {
    background-image: url("javajamlogo.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: left;
    height: 128px;
    background-color: #D2B48C;
    color: #231814;
    padding-left: 100px; /*added but no changes*/
    display: flex;
    align-items: center;
    justify-content: center;
    text-shadow: 2px 2px 4px #fff;
    position: relative;
}
    header::before {
        content: "";
        position:absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(255, 255, 255, 0.4); /* white tint */
        z-index: 1;
    }
    header h1 {
        position: relative;
        z-index: 2; /* ensures text sits above overlay */
    }
/* for header links*/
    header a:link,
    header a:visited { color: #231814; text-decoration: none; }

    header a:hover {
        color: #FEF6C2;
    } /*not sure what this does right now*/

h1 {
    line-height: 100%;
    font-size: 2.0em;
    font-weight: bold;
}
/*reduces the height of the logo banner*/

h2, h3 {
    color: #8C3826;
}

h4 {
    text-transform: uppercase;
    border-bottom: 5px solid #231814;
    padding-bottom: 0;
    border: 5px solid #D2B48C;
    color: #8C3826;
    margin-right: 10%;
    margin-left: 10%;
} /*this is for month title on music page*/

nav {
    float: none;
    text-align: center;
    background-color: #231814;
  }
    nav ul {
        list-style-type: none;
        padding-left: 0;
        flex-direction: column;
        align-items: stretch;
        display: flex;
    }
    /*not sure what this does at the moment*/
    nav li {
        padding-top: 0em;
        padding-bottom: 0em;
        padding-right: 0em;
        padding-left: 0em;
        border-bottom: none;
    }

    nav a {
        display: block; /* makes the whole box clickable */
        padding: 0.6em 0em; /* internal spacing */
        color: #FEF6C2; /* unvisited color */
        text-decoration: none;
        border: 1px solid #FEF6C2; /* visible border around each link */
        transition: background .15s, color .15s, border-color .15s;
    }

    nav a:visited {
            color: #D2B48C;
    }/*when you over on the navigation link it changes to this color*/
   
     nav a:hover,
    nav a focus {
            color: #CC9933;
            text-decoration: underline;
            background-color: #FEF6C2; /* swap colors for contrast on hover */
            border-color: #CC9933; /* hover border color */
            outline: none;
     }
main {
    margin-right: 0px; /* ✅ leaves space for nav */
    padding: 0;
    padding-bottom: 10px;
    background-color: #FEF6C2;
  }

main ul {padding-left: 2em;}

main h2,
main h3,
main h4,
main p,
main div,
main ul,
main dl {
    padding-left: 1em;
    padding-right: 1em;
}/*moved the text to the right*/


/*Hero images for each page */
#homehero {
    background-image: url("heroroad.jpg");
    }
#heromugs {
    background-image: url("mugs.jpg");
    }

#heroguitar {
    background-image: url("heroguitar.jpg");
    }
#herocouch {
    background-image: url("herocouch.png");
}


#homehero,
#heromugs,
#heroguitar
#homecouch{
    height: 300px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.heroimg, img[alt*="Background"] {
    float: right;
    max-width: 300px;
    margin: 1em 0 15px 15px;
    border-radius: 24px;
    box-shadow: 2px 2px 5px #666;
}

.menuimg {
    width: 120px;
    float: left;
    margin: 0 10px 10px 0;
    border-radius: 8px;
    box-shadow: 2px 2px 4px #666;
} 
        
#mobile {display: inline;}
#desktop {display: none;}

.details {overflow: auto;}

footer {
    clear: both;
    background-color: #D2B48C;
    font-size: 0.60em;
    font-style: italic;
    text-align: center;
    padding: 10px;
    margin-top: 0px;
    padding-top: 0px;
}


table{
    align-content: center;
    width: 90%;
    border-spacing: 0;
}
td,th{padding: 10px;}
tr:nth-of-type(odd){background-color: #D2B48E;}


/*not sure where the coffeecup logo is coming from*/
#herojobs {
    height: 300px;
    background-repeat: no-repeat;
    background-image: url("coffeecup.jpg");
    background-size: 100% 100%;
}
form {
    display: flex;
    flex-direction: column;
    padding-left: 1em;
    width: 80%;
}

input, textarea {
    margin-bottom: .5em;
}

audio {
    display: block;
    margin-top: 1em;
}

/* Task 3: Gear Page Styling */

/* a. Style for item container */
.item {
    background-color: #FAF9F7;
    margin: 1em;
    padding: 1em;
    overflow: auto;
}

    /* b. Style for images inside item */
    .item img {
        float: right;
    }

/* c. Hero image for Gear page */
#herocouch {
    height: 300px;
    background-image: url("herocouch.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

/*medium layout*/
@media screen and (min-width: 601px) {
    #wrapper {
        width: 100%;
    }
    form {
        display: grid;
        width: 40%;
        grid-gap: 1em;
        grid-template-columns: 6em 1fr;
    }
    /* ✅ Style the submit button */
    input[type="submit"] {
        grid-column: 2;
        width: 9em;
    }

    /* ✅ Larger hero image for jobs page */
    #herojobs {
        background-image: url("herojobs.jpg");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        height: 500px;
    }

    header {
        text-align: center;
        padding-left: 0;
    }

    h1 {
        font-size: 3em;
    }

    nav a {
        border: none;} /* removes border for medium and larger screens */
    nav ul {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        padding: 0;
    }
    /*I believe this is fixed as we added the flex display to not make it wrap around*/
    #homehero,
    #heromugs,
    #heroguitar 
    #herocouch{
        height: 300px;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    .heroimg, img[alt*="Background"] {
        float: right;
        max-width: 300px;
        margin: 1em 0 15px 15px;
        border-radius: 24px;
        box-shadow: 2px 2px 5px #666;
    }

    .menuimg {
        width: 120px;
        float: left;
        margin: 0 10px 10px 0;
        border-radius: 8px;
        box-shadow: 2px 2px 4px #666;
    }

    #mobile {
        display: none;
    }

    #desktop {
        display: inline;
    }

    .details {
        overflow: auto;
    }

    footer {
        clear: both;
        background-color: #D2B48C;
        font-size: 0.60em;
        font-style: italic;
        text-align: center;
        padding: 10px;
        margin-top: 0px;
        padding-top: 0px;
    }
}

/*large layout*/
/* Task 3: Gear Page Styling */

/* a. Style for item container */
.item {
    background-color: #FAF9F7;
    margin: 1em;
    padding: 1em;
    overflow: auto;
}

    /* b. Style for images inside item */
    .item img {
        float: right;
    }

/* c. Hero image for Gear page */
#herocouch {
    height: 300px;
    background-image: url("herocouch.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

@media screen and (min-width: 1024px) {
    #wrapper {
        display: grid;
        grid-template-areas:
            "header header"
            "nav   main"
            "footer   footer";
        grid-template-columns: 200px 1fr;
        grid-template-rows: auto 1fr auto;
    }
    /*this might need fixing*/

    header {
        grid-area: header;
        text-align: center;
        padding: 1em;
        background-color: #D2B48C;
        color: #231814;
    }

    nav {
        grid-area: nav;
        background-color: #231814;
        padding: 1em;
    }

        nav ul {
            list-style-type: none;
            padding-left: 0;
            display: flex;
            flex-direction: column;
            align-items: stretch;
        }

        nav li {
            margin-bottom: 0.5em;
        }

        nav a {
            display: block;
            padding: 0.6em 0;
            color: #FEF6C2;
            text-decoration: none;
            border: none;
        }

        nav a:hover {
                background-color: #FEF6C2;
                color: #CC9933;
                border-color: #CC9933;
        }

    main {
        grid-area: main;
        padding: 1em;
        background-color: #FEF6C2;
    }

    footer {
        grid-area: footer;
        text-align: center;
        padding: 1em;
        background-color: #D2B48C;
        font-size: 0.6em;
        font-style: italic;
    }

    #homehero,
    #heromugs,
    #heroguitar {
        height: 300px;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    .heroimg,
    img[alt*="Background"] {
        float: right;
        max-width: 300px;
        margin: 1em 0 15px 15px;
        border-radius: 24px;
        box-shadow: 2px 2px 5px #666;
    }

    .menuimg {
        width: 120px;
        float: left;
        margin: 0 10px 10px 0;
        border-radius: 8px;
        box-shadow: 2px 2px 4px #666;
    }

    .logo {
        max-width: 100px;
        margin-bottom: 1em;
    }

    #mobile {
        display: none;
    }

    #desktop {
        display: inline;
    }

    .details {
        overflow: auto;
    }
}