:root {
    --logo_size: 200px;
    /* Hmmm..might be cool to put some more variables here to keep things neat */
}

body {
    background-color: bisque;
    height: 2000px;
}
    header {
        width: 100%;
        position: fixed;
        top: 0;

    }
    #logo {
        width: var(--logo_size);
        border: 1px solid;
        border-radius: 50px;
        box-shadow: 0px 0px 10px 3px;
        z-index: 1;
        position: absolute;
        left: 25px;
    }
    #banner {
        position: absolute;
        background-color: brown;
        border: 2px solid coral;
        width: 100%;
        box-shadow: 0px 0px 10px 3px;
        top: 40px;
        height: 125px;
    }

    #banner h1 {
        right: 300px;
        color: white;
        text-shadow: 0px 0px 7px black;
        position: absolute;

    }

    nav {
        right: 300px;
        bottom: 50px;
        position: absolute;
    }

    nav a {
        text-decoration: none;
        color: bisque;
        text-shadow: 0 0 5px #fff,
        0 0 10px #fff,
        0 0 20px black,
        0 0 30px black,
        0 0 40px black;
    }

    nav a:hover {
        /* Making the menu items glow when hovering over them */
        text-decoration: none;
        color: bisque;
        text-shadow: 0 0 5px #fff,
        0 0 10px #fff,
        0 0 20px bisque,
        0 0 30px bisque,
        0 0 40px bisque;
    }
    main img {
        width: 350px;
        height: 200px;
        object-fit: cover;
        border-radius: 15px;
        border: 1px solid;
        box-shadow: 0px 0px 10px 1px;
    }

    #blurb {
        font-size: large;
        padding-bottom: 20px;
        margin: 30px;
        padding-top: 150px;

    }

    main {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
        margin: 30px;
        padding: 30px;
    }
    .category h1 {
        color: white;
        text-shadow: 0px 0px 10px black;
        position: absolute;
    }

    .category img {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
    }
    footer {
        height: 50px;
        background-color: brown;
        border: 2px solid coral;
        width: 100%;
        box-shadow: 0px 0px 10px 3px;
        color: white;
        text-align: center;
        position: fixed;
        bottom: 0;
        margin-top: 10px;
    }
@media screen and (max-width: 650px) {
    header {
        width: 100%;
        position: fixed;
        top: 0;
    }
    #logo {
        width: 100px;
        border: 1px solid;
        border-radius: 50px;
        box-shadow: 0px 0px 10px 3px;
        z-index: 1;
        position: absolute;
        left: 25px;
    }
    #banner {
        display: flex;
        position: absolute;
        background-color: brown;
        border: 2px solid coral;
        width: 100%;
        box-shadow: 0px 0px 10px 3px;
        top: 40px;
        height: 125px;
    }
    #banner h1 {
        left: 170px;
        color: white;
        text-shadow: 0px 0px 7px black;
        position: absolute;
        flex-wrap: wrap;
        font-size: x-large;
    }
    nav {
        top: 80px;
        left: 20px;
    }
}