* {
  box-sizing: border-box;
}

body {
  color:#000000;
  font-size: 100%;
  font-family: 'Nunito Semibold';
  text-align: center;
}
h1 {
  padding-left: 0px;
  padding-right: 0px;
}
h2 {
  padding-left: 0px;
  padding-right: 0px;
}
h4 {
  padding-left: 0px;
  padding-right: 0px;
}
img {
  width: 100%;
  height: auto;
}
a {
  text-decoration: none;
  color: #000000;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
/* Style the header */
.header {
  grid-area: header;
  background-color: #FFF8DC;
  padding: 10px;
  text-align: center;
}
.container {
  background-color: #FFF8DC;
  padding: 10px;
  text-align: center;
}
/* The grid container */
.grid-container {
  background-color: #FFF8DC;
  display: grid;
  grid-template-areas:
    'header header header header header header'
    'left left middle middle right right'
    'lowerleft lowerleft lowermiddle lowermiddle lowerright lowerright'
    'footer footer footer footer footer footer';
    grid-column-gap: 10px;
}

.left, .middle, .right .lowerleft, .lowermiddle, .lowerright{
  padding: 10px;
}

/* Style the left column */
.left{
  grid-area: left;
  max-width: 100%
}
/* Style the middle column */
.middle{
  grid-area: middle;
  max-width: 100%
}
/* Style the right column */
.right{
  grid-area: right;
  max-width: 100%
}
/* Style the lowerleft column */
.lowerleft{
  grid-area: lowerleft;
  max-width: 100%
}
/* Style the lowermiddle column */
.lowermiddle{
  grid-area: lowermiddle;
  max-width: 100%
}
/* Style the lowerright column */
.lowerright{
  grid-area: lowerright;
  max-width: 100%
}
/* Style the footer */
.footer {
  grid-area: footer;
  background-color: #f1f1f1;
  padding: 10px;
  text-align: center;
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media (max-width: 860px) {
.grid-container  {
  grid-template-areas:
    'header header header header header header'
    'left left left middle middle middle'
    'right right right lowerleft lowerleft lowerleft'
    'lowermiddle lowermiddle lowermiddle lowerright lowerright lowerright'
    'footer footer footer footer footer footer';
}
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media (max-width: 420px) {
.grid-container  {
  grid-template-areas:
    'header header header header header header'
    'left left left left left left'
    'middle middle middle middle middle middle'
    'right right right right right right'
    'lowerleft lowerleft lowerleft lowerleft lowerleft lowerleft'
    'lowermiddle lowermiddle lowermiddle lowermiddle lowermiddle lowermiddle'
    'lowerright lowerright lowerright lowerright lowerright lowerright'
    'footer footer footer footer footer footer';
  }
}