/* General */

body {
  color: #853f3f;
  background-image: url(../assets/images/boys-background.jpg);
}

main section {
  margin-bottom: 60px;
}

main h2 {
  padding: 0 40px;
  line-height: 1em;
  text-align: center;
  font-family: 'Cinzel', serif;
  font-weight: normal;
  font-size: 35px;
}

@media (min-width: 500px) {

  main h2 {
    font-size: 7vw;
  }

}

@media (min-width: 1200px) {

  main h2 {
    font-size: 84px;
  }

}

main em {
  color: #000;
}

main h3 {
  font-family: 'Cinzel', serif;
  font-weight: normal;
  font-size: 32px;
}

main blockquote {
  font-family: 'Cinzel', serif;
  font-size: 25px;
}

@media (min-width: 850px) {

  main blockquote {
    font-size: 3vw;
  }

}

@media (min-width: 1100px) {

  main blockquote {
    font-size: 33px;
  }

}

main p,
main hr,
main figure,
main blockquote {
  margin: 60px 0;
}

main img {
  margin: 60px auto;
}

main li {
  font-weight: 600;
}

main p,
main li {
  line-height: 2em;
  font-size: 16px;
}

@media (min-width: 850px) {

  main p,
  main li {
    font-size: 2vw;
  }

}

main p.center {
  text-align: center;
}

@media (min-width: 1100px) {

  main p,
  main li {
    font-size: 22px;
  }

}

main blockquote.large {
  line-height: 1em;
  font-size: 39px;
}

@media (min-width: 650px) {

  main blockquote.large {
    font-size: 6vw;
  }

}

@media (min-width: 1130px) {

  main blockquote.large {
    font-size: 68px;
  }

}

main blockquote cite {
  font-size: 22px;
}

main section nav a {
  display: block;
  position: relative;
  width: 100%;
  height: 300px;
  color: #000;
  background-size: cover;
}

@media (min-width: 600px) {

  main section nav {
    display: flex;
    max-width: 1200px;
    margin: 0 auto;
  }

  main section nav a {
    flex: 1;
    max-height: 500px;
    height: 33.3vw;
  }

}

main section nav a[href*="russell-barlow"] {
  background-image: url(../assets/images/russell-barlow.jpg);
}

main section nav a[href*="arthur-emory"] {
  background-image: url(../assets/images/arthur-emory.jpg);
}

main section nav a[href*="waverly-groves"] {
  background-image: url(../assets/images/waverly-groves.jpg);
}

main section nav a > div {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 20px;
  background-color: #f5f4df;
}

main section nav a:focus div,
main section nav a:hover div,
main section nav a:active div {
  color: #fff;
  background-color: #6565ee;
}