/* EVERYTHING */
:root{
    --burgundy:  #8b0606;
    --brown:     #643C14;
    --green:     #067F38;
    --blue:      #081E31;
    --ltgray:    #EFEFEF;
    --white:     #FFFFFF;
}

*{
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
html { height: 100%; }
body {  min-height: 100%; 
        font-size: 100%;
        font-weight: 100;
        box-sizing: border-box;
        /*font-family: Tahoma, Helvetica, sans-serif;*/
        font-family: 'Montserrat', Arial, Helvetica, sans-serif;
       
}

/* MAIN CONTAINER */
.container {
  display: grid;
  grid-template-areas: 
        "header header "
        "left main "
        "footer footer ";
  grid-template-columns: 10% 90%;
  grid-template-rows: 10% minmax(85%,85%) 5%;
  width: 100vw;
  height: 100vh;
}
.header {
  grid-area: header;
  color: var(--ltgray);
  background-image: linear-gradient(to bottom,  var(--blue),  var(--green));
  font-size: 2.5em;
  letter-spacing:  0.2em;
  font-weight: 100;
}
.left {
  grid-area: left;
  color: var(--ltgray);
  background-color: var(--green);
}

.main{
  grid-area: main;
  color: var(--blue);                                          
  background-color: var(--ltgray);
  overflow: hidden;
  overflow-y:auto;
}

.footer {
  grid-area: footer;
  color: var(--ltgray);
  background-image: linear-gradient(to bottom,  var(--green), var(--blue));  
}

/* 3 Column Middle Grid */
.container3 {
  display: grid;
  grid-template-areas: 
        "left3 header3 header3 header3"
        "left3 mainleft3 mainmiddle3 mainright3"
        "left3 footer3 footer3 footer3";
  grid-template-columns: 1% 33% 33% 33%;
  grid-template-rows: 12% 83% 5%;
  width: 100%;
  height: 100vh;
}

.header3 {
  grid-area: header3;
  padding-top: 1%;
  padding-bottom: 1%;
}
.left3 {
  grid-area: left3;
}
.mainleft3 {
  grid-area: mainleft3;
}
.mainmiddle3 {
  grid-area: mainmiddle3;
}
.mainright3 {
  grid-area: mainright3;
}
.footer3 {
  grid-area: footer3;
}

/* 2 Column Middle Grid */
.container2 {
  display: grid;
  grid-template-areas: 
        "left2 header2 header2"
        "left2 mainleft2 mainright2"
        "left2 footer2 footer2";
  grid-template-columns: 1% 49% 48%;
  grid-template-rows: 12% 83% 5%;
  width: 100%;
  height: 100vh;
}

.header2 {
  grid-area: header2;
  padding-top: 1%;
  padding-bottom: 1%;
}
.left2 {
  grid-area: left2;
}
.mainleft2 {
  grid-area: mainleft2;
}
.mainright2 {
  grid-area: mainright2;
}
.footer2 {
  grid-area: footer2;
}


/* 1 Column Middle Grid */
.container1 {
  display: grid;
  grid-template-areas: 
        "left1 header1 "
        "left1 main1 "
        "left1 footer1 ";
  grid-template-columns: 1% 99%;
  grid-template-rows: 12% 83% 5%;
  width: 100%;
  height: 100vh;
}

.header1 {
  grid-area: header1;
  padding-top: 1%;
  padding-bottom: 1%;
}
.left1 {
  grid-area: left1;
}
.main1 {
  grid-area: main1;
}
.footer1 {
  grid-area: footer1;
}