@charset "utf-8";
/* CSS Document */
body {
  font-size: .9rem;
  background-image: url(../images/bio/bio-background.jpg);
  background-position: top center;
  background-repeat: repeat;
  background-color: rgba(0, 0, 0, 1);
}
.firstcharacter {
  color: rgba(204, 0, 0, 1);
  float: left;
  font-family: Georgia;
  font-size: 72px;
  line-height: 60px;
  padding-right: 8px;
  padding-left: 3px;
}
hr {
  height: 1px;
  border-top: none;
  margin: 15px auto 15px auto;
  width: 75%;
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(204, 0, 0, 1), rgba(255, 255, 255, 0));
}
.break, .brood {
  position: relative;
  margin-bottom: 15px;
  font-family: 'Merriweather', serif;
  font-style: italic;
  font-size: 12px;
  text-align: center;
  color: #ccc;
}
.break, .break p {
  width: 335px;
}
.brood, .brood p {
  width: 300px;
}
.break p, .brood p {
  position: absolute;
  background-color: rgba(0, 0, 0, .6);
  padding: 7.5px;
}
.break p {
  top: 283px;
}
.brood p {
  top: 177px;
}
.simmy a, .simmy a:visited {
  font-weight: 700;
  color: rgba(0, 0, 0, 1);
  text-decoration: none;
}
.simmy a:hover {
  color: rgba(0, 0, 0, 1);
  background-color: rgba(204, 0, 0, .175);
}
.tunes {
  text-align: center;
  padding-left: 12.5%;
  padding-right: 12.5%;
  color: rgba(204, 0, 0, 1);
}
.question {
  text-align: center;
  font-size: 16px;
  font-style: italic;
  color: rgba(204, 0, 0, 1);
}
.simmy h6 {
  color: #a1a1a1;
  border-bottom: 1px solid #ddd;
  padding-bottom: 10px;
  margin-bottom: 20px;
}
.cover, .splash, .left-spread, .right-spread, .spread {
  margin-bottom: 15px;
}
.left-spread, .right-spread, .spread {
  background-color: rgba(255, 255, 255, 1);
  padding-top: 15px;
  padding-bottom: 15px;
}
.left-spread, .right-spread, .spread {
  min-height: 7.8in;
}
.cover, .splash {
  padding: 0;
}
.the-end {
  margin-top: 80px;
  display: block;
}
@media (min-width: 576px) {
  .left-spread, .right-spread, .spread {
    padding: 36px;
  }
}
@media (max-width: 991.98px) {
  .cover, .splash, .left-spread, .right-spread, .spread {
    box-shadow:
      0 0 10px 5px rgba(0, 0, 0, 1);
  }
  main > div {
    max-width: 480px !important;
  }
}
@media (min-width: 992px) {
  .left-spread, .right-spread, .spread {
    height: 7.8in;
  }
  .spread {
    column-count: 2;
    column-width: 250px;
    column-gap: 54px;
    column-rule: 2px dotted #ccc;
    column-fill: auto;
  }
  .left-spread {
    padding-right: 27px;
    border-right: 1px solid #ccc;
  }
  .right-spread {
    padding-left: 27px;
    border-left: 1px solid #ccc;
  }
  main > div {
    max-width: 1000px !important;
  }
}