body {
  font-family: Dancing Script;
  background-image: url("../Images/Background.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}

.grid-container {
    display: grid;
	  grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas: "header-l header-c header-c"
    "hero hero hero"
    "left middle right"
    "footer footer footer"
}

.header-l {
  grid-area: header-l;
 padding:30px;
 text-align: center;
 font-size:28px;
}

.nav {

}
nav a {
  display:inline-block;
  font-size: 1em;
  padding: 2%;
  background-color: #FFFFFF90;
  border-radius: 4px;
  text-decoration: none;
  color: darkblue;
}

.header-c {
  grid-area:header-c;
 padding:30px;
 padding-left: 0px;
 padding-right: 0px;
 text-align: center;
 font-size:28px;
}

.hero {
 grid-area:hero;
 text-align: center;
 font-size: 35px;
 width: 100%;
 color: darkblue;
}

.p1 {
  margin-block-start: 0em
  margin-block-end: 0.25em
}

.p2 {
  margin-block-start: 0em
  margin-block-end: 0.25em
}

.p3 {
  margin-block-start: 0em
  margin-block-end: 0.25em
}

.left img,
.middle img,
.right img {
max-height:400px;
margin: auto;
display: block;
}

.left {
  grid-area:left;
}

.middle {
  grid-area:middle;
}

.right {
  grid-area:right;
}

.footer {
 grid-area:footer;
 text-align: center;
   }

.footer img {
display:inline-block;
margin:0 10px;
padding: 20px;
background-color: #FFFFFF90;
font-size: 30px;
width: 30px;
text-align: center;
text-decoration: none;
border-radius: 50%;
}
.hover {
  opacity: 0.7;
}

#logo {
	float:left;
	width:200px;
}

#nav-menu {
  font-size: 200px;
  padding: 5px 0px 5px 0px;
}

input[type=text], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical
}

input[type=submit] {
  background-color: darkblue;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #45a049;
}

.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}

@media only screen and (max-width:480px) {

  .grid-container {
    grid-template-columns:1fr;
    grid-template-areas:
    "header-l"
    "header-c"
    "hero"
    "left"
    "middle"
    "right"
    "footer"
  }

  .left img,
  .middle img,
  .right img {
  width:100%;
  height:100%;
  margin: auto;
  display: block;
  }
}

@media only screen and (max-width:768px) {

  .grid-container {
    grid-template-columns:1fr;
    grid-template-areas:
    "header-l"
    "header-c"
    "hero"
    "left"
    "middle"
    "right"
    "footer"
  }

  .left img,
  .middle img,
  .right img {
  width:100%;
  height:100%;
  margin: auto;
  display: block;
  }
}