body{
  color: #000;
  font: 'Nunito Semibold';
  text-align: center;
  background: #e0e0e0;
  scroll-behavior: auto;
}

#content{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(100px, auto);
  grid-gap: 10px;
  max-width: 960px;
  margin: 0 auto; 
}

#content > *{  
  padding: 30px;
  color: #fff;
}

#content header{  
  grid-column: 1 / 13;
  background: #046464;
}

#content main{
  grid-column: 4 / 13;
  grid-row: 2 / 4;
  background: #f26968;
}

#content aside{
  grid-column: 1 / 4;
  grid-row: 3 / 4;
  background: #2f496e;
}

#content section{
  grid-column: 1 / 13;
  grid-row: 4 / 6;
  background: #323642;
}

#content nav{
  grid-column: 1 / 4;
  grid-row: 2 / 3;
  background: #81bd4a;
}

#content footer{
  grid-column: 1 / 13;
  background: #046464;  
}


#content2{
  display: grid;
  grid-template-columns: repeat(6, 1fr) ;
  grid-auto-rows: minmax(150px, auto);
  grid-gap: 5px;
  max-width: 960px;
  margin: 0 auto;
}

#content2 div{  
  background: #333;
  padding: 30px;
  color: #fff;
}

.one{
  grid-column: 1 / 3;
  grid-row: 1 / 5;
}

.two{
  grid-column: 3 / 7;
  grid-row: 1 / 3;
}

.three{
  grid-column: 3 / 5;
  grid-row: 3 / 5;
}

.four{
  grid-column: 5 / 7;
  grid-row: 3 / 7;
}

.five{
  grid-column: 1 / 5;
  grid-row: 5 / 7;
}

#content2{  
  transform: rotateZ(-15deg) scale(0.8);  
  font-weight: 600;
  font-size: 1.6rem;
}

#content3{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(100px, auto);
    grid-gap: 5px;
    max-width: 960px;
    margin: 0 auto; 
    grid-template-areas: 
    "header header header header"
    "footer footer footer footer"
    "main main main main"
    "main main main main"    
    "aside aside nav nav"
    "section section section section"
    "section section section section"
    "summary summary summary summary";
 }

@media screen and (min-width: 760px){
  #content3{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(100px, auto);
    grid-gap: 5px;
    max-width: 960px;
    margin: 0 auto; 
    grid-template-areas: 
    "header header header header"
    "nav main main main"
    "aside main main main"
    "aside section section section"  /* inserting period in place of any makes it vacant */
    "summary summary summary summary"  
    "footer footer footer footer"; 
  }
}

#content3 > *{  
  /* background: #046464; */
  padding: 30px;
  color: #fff;
}

#content3 header{
  grid-area: header;
  background: teal;
}

#content3 main{
  grid-area: main;
  background: #1f54ac;
}

#content3 section{
  grid-area: section;
  background: #329546;
}

#content3 aside{
  grid-area: aside;
  background: #002a32;
}

#content3 nav{
  grid-area: nav;
  background: #4caf50;
}

#content3 summary{
  grid-area: summary;
  background: #002a32;
}

#content3 footer{
  grid-area: footer;
  background: #d25757;
}

#prevPage {  
  font-family: 'Courier New', Courier, monospace;
  font-size: 1.1em;
  font-weight: 600;  
  margin-top: 30px;
  margin-left: -30px;
}

#nextPage {  
  font-family: 'Courier New', Courier, monospace;
  font-size: 1.1em;
  font-weight: 600;
  margin-top: 30px;
  margin-left: 700px;
}

#license{
  font-family: 'Courier New', Courier, monospace;
  font-size: 1.1em;
  font-weight: 600;
  margin-bottom: 0;
  padding-bottom: 0;  
  padding-left: 0px;
  margin-left: -35px;  
}

#license a {
  text-decoration: none;
}

#footer{
  font-family: 'Courier New', Courier, monospace;
  font-size: 1.4em;
  font-weight: 700;
  padding-top: 0;
  margin-top: 0;
}

#footer a{
  text-decoration: none;
}

#footer a:hover {  
  color: #000;
}