body {
    background-color: black;
}



#wrapper{
    display: grid;
    background-color: white;
    grid-template-rows: 100px 300px 700px 100px;
    grid-template-columns: minmax(0px, 1fr)  minmax(0, 750px) minmax(0px, 1fr)
}

#leftbar{
    grid-column: 1 / 2;
    grid-row: 1 / 4;
    background-color: rgba(6, 0, 255, 0.5);
}

#rightbar{
    grid-column: 3 / 4;
    grid-row: 1 / 4;
    background-color: rgba(6, 0, 255, 0.5);
}

nav {
    grid-row: 1/2;
    grid-column: 2 /3;
    background-color: rgba(255, 0, 0, 0.5);
}

#officeHero{
    grid-row: 2/3;
    grid-column: 2 /3;
    background-color: rgba(250, 255, 0, 0.4);
}

#content {
    grid-row: 3/4;
    grid-column: 2 /3;
    background-color: rgba(5, 255, 0, 0.5);
}

footer{
    grid-row: 4/5;
    grid-column: 1 /4;
    background-color: rgba(255, 0, 0, 0.4);
}

#sidebar{
    grid-row: 1/4;
    grid-column: 1 / 2;
    background-color: rgba(6, 0, 255, 0.5);
}