body {
    background-color: bisque;
    position: absolute;
}

/* Thoughts:
    Use flexbox to center the Rich's Cookie Emporium within the header (vertically and horizontally)
    Use flexbox to arrange the links.  Notice that they are display horizontally until the screen gets less that 600px wide, they they display vertically.
    when the screen width becomes less than 600px, make the header text smaller
    The main section should use gridbox to allow automatically calculated rows where each product can not be less than 300px but should scale up as needed. */

.product img {
    width: 100%;
    height: 70%;
    border: 1px solid;
    object-fit: cover;
    box-shadow: 3px 3px 15px 2px;
}



header {
    font-family: "Story Script", sans-serif;
    font-size: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url("/yourturns/YT3-storefront/img/c10.jpg");
    text-align: center;
    background-size: cover;
}

header h2 {
    margin: 0;
    color: white;
    text-shadow:
        1px 1px 2px black,
        0px 0px 15px black;
}

nav {
    display: flex;
    justify-content: space-evenly;
    padding: 5px;
}

nav a {
    text-decoration: none;
    font-size: large;
    color: black;
}

nav a:nth-child(even) {
    color: red;
}

footer {
    border-top: 1px solid gray;
    text-align: center;
}

#storefront {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
}

aside {
    position: fixed;
    bottom: 0px;
    right: 0px;
}

aside img {
    width: 400px;
}

aside p {
    position: absolute;
    font-size: 40px;
    top: 80px;
    left: 110px;
}

#storefront img:hover {
    box-shadow: 10px 12px 24px black;
    transition: box-shadow 0.3s ease;
}

@media screen and (width < 600px) {
    header {
        font-size: 30px;
    }

    nav {
        flex-direction: column;
        align-items: center;
    }
}