body{
    background-color: black;
    margin: 0;
}
.grid-container {
    display: grid;
    grid-template-columns: minmax(0px, 1fr) repeat(6, minmax(0, 175px)) minmax(0px, 1fr);
    grid-auto-rows: minmax(50px, auto);
    background-color: black;
}
.nav{
    grid-column:1/9;
    grid-row:1/3;
    text-align: center;
    background-color: rgba(189,0,235,0.5);
    border: 1px solid #FFFFFF;
}
.hero{
    grid-column:1/9;
    grid-row:3/10;
    text-align: center;
    background-color: rgba(235,117,145,0.5);
    border: 1px solid #FFFFFF;
}
.wrapper-grid{
    grid-column:2/8;
    grid-row:1/20;
    text-align: center;
    border: 1px solid #FFFFFF;
}
#wrapper{
    grid-column:2/8;
    grid-row:10/19;
    text-align: center;
    background-color: rgba(200,234,107,0.5);
    border: 1px solid #FFFFFF;
}
.footer{
grid-column:1/9;
grid-row:19/20;
text-align: center;
background-color: rgba(234,169,117,0.5);
border: 1px solid #FFFFFF;
}