.navigation { grid-area: Nav;
    width: 100%;
    height: 83px;
    background: #1E1E1E;
    flex-shrink: 0;
}
.header { grid-area: Header;
    width: 100%;
    height: 318px;
}
.main { grid-area: Main;
    width: 100%;
    height: 1086px;
    background: #37A4F4;
}
.footer { grid-area: Footer;
    width: 100%;
    height: 128px;
    background: #1E1E1E;
    color: #FFF;
    text-align: center;
    font-family: Kokoro;
    font-size: 29px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.grid {
  display: grid;
  grid-template-areas:
    'Nav  Nav  Nav  Nav  Nav  Nav'
    'Header  Header  Header  Header  Header  Header'
    'Main  Main  Main  Main  Main  Main'
    'Footer  Footer  Footer  Footer  Footer  Footer';
    grid-template-columns: minmax(0px, 1fr);
    grid-template-rows: minmax(0px, 1fr);
}

nav ul {
    color: #FFF;
    text-align: center;
    font-family: Kokoro;
    font-size: 28px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    display: flex;
    -ms-flex-align: center;    
    list-style-type: none;
}

ul {
    list-style-type: none;
    margin: auto;
    overflow: hidden;
  }
  
  li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }
  
  li a:hover {
    background-color: #111;
  }

h1 {
text-align: center;
text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
font-family: Montez;
font-size: 150px;
font-style: normal;
font-weight: 400;
line-height: normal;
}

h2 {
color: #000;
text-align: center;
text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
font-family: Bentham;
font-size: 70px;
font-style: normal;
font-weight: 400;
line-height: normal;
}

#left {
float: left;
width: 378px;
height: 296px;
flex-shrink: 0;
}

#right {
flex-shrink: 0;
width: 421px;
height: 296px;
}

#bottomright {
object-position: right;
width: 421px;
height: 296px;
flex-shrink: 0;
}

#bottomleft {
float: left;
width: 378px;
height: 266px;
flex-shrink: 0;
}