/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body, html {
  height: 100%;
  margin: 0;
  color: #333333;
  font: 600 15px/1.8 "Lato", sans-serif;
}

#bgimg1, #bgimg2, #bgimg3, #bgimg4, #bgimg5 {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  min-height: 400px;
  opacity: 0.95;
}

#bgimg1 {
  background-image: url("images/dunnville.jpg");
  min-height: 100%;
}

#bgimg2 {background-image: url("images/mohawk-institute.jpg");}

#bgimg3 {background-image: url("images/grand-river-mills.jpg");}
  
#bgimg4 {background-image: url("images/park-baptist-church.jpg");}
  
 #bgimg5 {background-image: url("images/lighthouse.jpg");}

h1 {
  text-align: center;
  color: #111111;
  text-transform: uppercase;
  text-shadow: 1px 1px #aaaaaa;
  background-color: #eeeeee;
  border: 2px solid #111111;
  margin: 0 20%;
  top: 50%;
  position: absolute;
  width: 60%;
  font: 2.5em/1.4em "Open Sans", sans-serif;
  letter-spacing: 0.3em;
  padding: 0.5em;
}

h3 {
  text-align: center;
  color: #111111;
  text-transform: uppercase;
  text-shadow: 1px 1px #aaaaaa;
  font: 2.0em/1.4em "Open Sans", sans-serif;
  letter-spacing: 0.3em;
}

p {
  text-align: justify;
  margin-left: 18%;
  margin-right: 18%;
}

.lightbg {
  color: #777777;
  background-color: #ffffff;
  padding: 50px 80px;
}

.darkbg {
  color: #dddddd;
  background-color: #282e34;
  padding: 50px 80px;
}

.darkbg h3 {color: #eeeeee;}

.img-flt {
  margin: 10px;
  width: 92%;
}

.lightbg img {
  border:1px solid #111111;
}
.darkbg img {
  border:1px solid #eeeeee;
}

h5 {
  margin: 0 10px;
  text-align: center;
  color: #111111;
  
}

.darkbg h5 {color: #eeeeee;}

#credits {
  margin: 0 auto;
  width: 40%;
  padding-top: 20px;
  border-top: 1px solid #111111;
}

#credits ul li {
  text-align: left;
  list-style-type: circle;
  font-size: 0.8em;

}

div {overflow: auto;}