/*Grid Container*/

.gridContainer{
    display: grid;
    grid-template-areas: 
    "topNav topNav"
    "sideNav content"
    "sideNav content"
    ;
    grid-template-columns: 1fr 5fr;
    gap: 3px;
    padding:5px;
}

.gridContainer.change{
    grid-template-areas: 
    "topNav"
    "content"
    "content" ;
    grid-template-columns: 6fr;
}

.gridContainer > div{
    padding: 10px;
}

.gridContainer > div.header{
    grid-area: header;
    height: 500px;
}

.gridContainer > div.topNav{
    grid-area: topNav;
    height: 50px;
}

.gridContainer > div.sideNav{
    grid-area: sideNav;
}

.gridContainer.change > div.sideNav{
    display: none;
    grid-area: sideNav;
}

.gridContainer > div.content{
    grid-area: content;
}