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

.wrapper {
    display: grid;
    grid-auto-rows: minmax(0px, auto);
    grid-template-columns: minmax(0px, 1fr) repeat(6, minmax(0px, 165px)) minmax(0px, 1fr);
    ;
}

header,
nav,
#homeMain,
#homeMenu,
footer {
    display: grid;
    grid-column: 1/-1;
    grid-template-columns: minmax(0px, 1fr) repeat(6, minmax(0px, 165px)) minmax(0px, 1fr);
}

.content {
    display: grid;
    grid-column: 2/-2;
    grid-auto-rows: minmax(0px, auto);
    grid-template-columns: repeat(6, minmax(0px, 165px));
}

header {
    background-color: rgba(160, 32, 240, 0.3);
    grid-row: 1/2;
    grid-column: 1/-1;
    height: 150px;
    border: 1px black solid;
}

nav {
    background-color: rgba(0, 0, 255, 0.3);
    grid-row: 2/3;
    grid-column: 1/-1;
    height: 120px;
    border: 1px black solid;
}

#homePage {
    background-color: rgba(255, 0, 0, 0.3);
    grid-row: 3/4;
    grid-column: 1/-1;
    height: 600px;
    border: 1px black solid;
}

#homeMenu {
    background-color: rgba(0, 255, 0, 0.3);
    grid-row: 4/5;
    grid-column: 1/-1;
    height: 540px;
    border: 1px black solid;
}

footer {
    background-color: rgba(255, 255, 0, 0.3);
    grid-row: 5/6;
    grid-column: 1/-1;
    height: 190px;
    border: 1px black solid;
}

.content {
    border: 1px black solid;
    order: 1;
}

@media only screen and (max-width: 1100px) {
    #wrapper {
        grid-template-columns: minmax(0px, 1fr) repeat(6, minmax(0px, 165px)) minmax(0px, 1fr);
    }

    header,
    nav,
    #homeMain,
    #homeMenu,
    footer {

        grid-template-columns: minmax(0px, 1fr) repeat(6, minmax(0px, 165px)) minmax(0px, 1fr);
    }

    .content {
        grid-template-columns: repeat(6, minmax(0px, 165px));
    }
}

@media only screen and (max-width: 900px) {
    #wrapper {
        grid-template-columns: minmax(0px, 1fr) repeat(6, minmax(0px, 125px)) minmax(0px, 1fr);
    }

    header,
    nav,
    #homeMain,
    #homeMenu,
    footer {
        grid-template-columns: minmax(0px, 1fr) repeat(6, minmax(0px, 125px)) minmax(0px, 1fr);
    }

    .content {
        grid-template-columns: repeat(6, minmax(0px, 125px));
    }
}

@media only screen and (max-width: 600px) {
    #wrapper {
        grid-template-columns: minmax(0px, 1fr) repeat(5, minmax(0px, 110px)) minmax(0px, 1fr);
    }
    header,
    nav,
    #homeMain,
    #homeMenu,
    footer {
        grid-template-columns: minmax(0px, 1fr) repeat(5, minmax(0px, 110px)) minmax(0px, 1fr);
    }

    .content {
        grid-template-columns: repeat(5, minmax(0px, 110px));
    }

}