@import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap');
body {
  background-color:  #3891A6;
  font-family:'Courier New', Courier, monospace;
  font-size: 22px;
  margin: 0;
  padding: 0;
}
#content {
    max-width: 1600px;
    margin: 0 auto;
}
header {
  background-color: #F0F8EA;
  display: grid;
  grid-template-columns: 150px auto;
}
nav {
  display: flex;
  justify-content: space-around;
}
nav a {
  text-align: center;
  color: #6F1D1B;
  text-decoration: none;
  padding: 35px;
}
nav a:hover {
  background-color: #6F1D1B;
  color:  #F0F8EA;
}
.logo {
  width: 100px;
}
#logo_link {
  padding-top: 5px;
  justify-self: center;
  align-self: center;
}
#hero {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  margin-top: -100px;
}
#hero-box {
  grid-column: 1/4;
  grid-row: 1/3;
  z-index: -1;
}
#hero-msg {
  grid-column: 2/3;
  grid-row: 1/2;
  margin-top: 100px;
}
#hero-img {
  width: 100%;
}
#hero-msg h1 {
  text-align: center;
}
#hero-msg h3 {
  text-align: center;
  color:#F0F8EA;
  font-family: 'Courier New', Courier, monospace;
}
.home-title {
  color: #EE9B00;
  font-family: "Permanent Marker", 'Times New Roman', sans-serif;
  font-size: 3em;
  margin-top: 10px;
}
main {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
}
main section {
  text-align: center;
}
main section img {
  box-sizing: border-box;
}
h1, h2, h3, h4 {
  font-family: "Permanent Marker", 'Times New Roman', sans-serif;
}
h2 {
  margin: 0;
}
.msg h2 {
  color: #EE9B00
}
.button-box {
  text-align: center;
}
#background {
  height: 600px;
  background-color: #F0F8EA;
  grid-column:  1/11;
  grid-row: 6/13;
}
.msg {
  background-color: #6F1D1B;
  line-height: 1.5em;
  padding: 35px;
  grid-column: 4/8;
  grid-row: 9/10;
  box-shadow: 5px 5px 10px black;
}
.mountains {
  width: 100%;
  grid-column: 1/6;
  grid-row: 8/11;
  box-shadow: 5px 5px 10px black;
}
.view {
  width: 100%;
  grid-column: 6/11;
  grid-row: 8/11;
  box-shadow: 5px 5px 10px black;
}
.rivers-card {
  grid-column:  2/4;
  grid-row: 2/3;
}
.camping-card {
  grid-column:  5/7;
  grid-row: 2/3;
}
.rapids-card {
  grid-column: 8/10;
  grid-row: 2/3;
}
.bbq-card {
  grid-column:  2/4;
  grid-row: 4/5;
}
.canoeing-card {
  grid-column:  5/7;
  grid-row: 4/5;
}
.hiking-card {
  grid-column: 8/10;
  grid-row: 4/5;
}
.book {
  background-color:#6F1D1B;
  color: #F0F8EA;
  text-decoration: none;
  font-size: 18px;
  padding: 15px 30px;
  margin-top: 50px;
  border-radius: 5px;
}
.book:hover {
  background-color:#F0F8EA;
  color: #6F1D1B;
}
.join {
  background-color:#3891A6;
  color: #F0F8EA;
  text-decoration: none;
  font-size: 18px;
  padding: 15px 30px;
  margin-top: 50px;
  border-radius: 5px;
}
.join:hover {
  background-color:#F0F8EA;
  color: #3891A6;
}
.msg p {
  color: #F0F8EA;
  font-size: .8em;
  padding-bottom: 15px;
}
.icon {
  width: 80px;
  padding-top: 10px;
}
footer {
  background-color: #F0F8EA;
  color: #6F1D1B;
  padding: 25px 50px;
  margin-top: 200px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
footer a {
  color: #6F1D1B; 
  text-decoration: none;
}
footer a:hover {
  color: #EE9B00;
}
footer p {
  font-size: 1.2em;
}
footer p a:hover {
  text-decoration: underline;
}
footer .social img {
  padding-top: 15px;
}
.rivers-card, .camping-card, .rapids-card,.bbq-card, .canoeing-card, .hiking-card {
  margin: 50px auto;
  width: 100%;
}
.rivers-card h2, .camping-card h2, .rapids-card h2,.bbq-card h2, .canoeing-card h2, .hiking-card h2 {
  color: #F0F8EA; 
  font-size: 2em;
  font-family: 'Courier New', Courier, monospace;
}
.card-img {
  width: 100%
}
.card-img {
  border: 15px solid #F0F8EA;
  transition: transform .5s;
  box-shadow: 5px 5px 10px black; 
}
.card-img:hover {
  opacity: .6;
  transform: scale(1.1);
}
@media screen and (max-width: 900px) {
    #hero, .home-grid {
        display: block;
        height: auto;
    }
    nav, footer {
        flex-direction: column;
    }
    nav a {
        display: block;
        padding: 15px;
    }
    #hero {
        margin-top: 0;
    }
    #hero-msg {
        margin-top: 0;
    }
    #hero-msg h3 {
        display: none;
    }
    #hero-msg h1 {
        color: #F0F8EA;
    }
    .home-title {
        font-size: 25px;
    }
    .rivers-card, .camping-card, .rapids-card, .bbq-card, .canoeing-card, .hiking-card{ 
        margin: 50px auto;
        width: 60%;
    }
    #background {
        display: none;
    }
    .mountains, .msg {
        width: 80%;
        display: block;
        margin: 0 auto;
    }
    footer {
        margin-top: 25px;
    }
}