layout.css

*{
  margin:  0;
  padding: 0;
  list-style: none;
  text-decoration: none;
}

body{
  font-family: "Lato", sans-serif;
  height:  100%;
  width: 100%;
  background-image: url( "images/American-White-Oak-CC-1024x1024.width-1000filteredresized.jpg" );

}

.grid-container{
  height:  100%;
  width: 100%;
  display: grid;
  grid-template-columns: 20% 60% 20%;
  grid-template-rows: auto;
}

.header{
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;  
  background-color:  rgba(192,192,192,0.7);
}

.logo-container h1{
  color: white;
  height: 100%;
  float:  left;
  display: table-cell;
  padding-left: 5%;
  padding-top: 5%;
  vertical-align: middle;
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 52px;
}

.header-navigation{
  color: white;
  float:  right;
  padding-right: 5%;
  padding-top: 5%;
  display: table-cell;
  vertical-align: middle;
  height: 100%;
  font-family: 'Oswald', sans-serif;
  font-size: 24px;
  font-weight: bold;
}

.header-navigation a{
  color: white;
  height: 100%;
  float:  left;
  display: table;
}

.header-navigation a li{
  vertical-align: middle;
  padding: 0px 20px;
  margin:  20px 0px;
  font-family: 'Oswald', sans-serif;
}

.content{
  padding:  5% 5%;
  background-color: white;
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 7;
  font-size: 18px;
}

.footer{
  padding: 2%;
  background-color: rgba(255, 174, 66, 0.4);
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 7;
  grid-row-end: 8;
}

.watermark h2{
  height: 100%;
  color: white;
  vertical-align: middle;
}