/* Define the grid and grid areas */
.container {
  display: grid;
  grid-template-columns: [right-start] 300px [main-start] minmax(600px, 1200px);
  grid-template-rows: [header-start] 50px [navigation-start] 50px [main-start] min(calc(100vh - 150px)) [footer-start] 50px;
  grid-template-areas:  "header       header"
                        "navigation   navigation"
                        "main         main"
                        "footer       footer";
}

.container {
  padding: 0px;
  max-width: 1500px;
}

/* bind the divs to grid areas */
.header {
  grid-area: header;
}

.navigation {
  grid-area: navigation;
}

.main {
  grid-area: main;
  margin-left: 0px;
  margin-right: 0px;
  padding-left: 50px;
  padding-right:50px;
  overflow-y: auto; 
}

.footer {
  grid-area: footer;
}

/* Grid Layout End */