.modal-content {
  border-radius: 0px;
}
body {
  font-family: "Raleway", sans-serif;
}

@font-face {
  font-family: "gothic_reg";
  src: url("../fonts/AcmeGothic-Regular.otf");
}
@font-face {
  font-family: "gothic_sb";
  src: url("../fonts/AcmeGothic-SemiBold.otf");
}
@font-face {
  font-family: "britanic";
  src: url("../fonts/britanic");
}
@font-face {
  font-family: "kandal";
  src: url("../fonts/KANDAL-BOOK.TTF");
}
@font-face {
  font-family: "kandal_i";
  src: url("../fonts/Kandal-BookItalic.ttf");
}

.header-image {
  float: right;
}

.header {
  background-color: #c5e4e4;
  position: relative;
}
.header h1 {
  font-size: 7em;
  color: white;
  line-height: 90%;
}
.header h2 {
  font-size: 4.7em;
  color: white;
  line-height: 30%;
}
.header h3 {
  font-size: 3em;
  color: white;
  line-height: 90%;
}
.headertext {
  top: 8px;
  left: 2em;
  color: white;
}
.textstroke {
  text-shadow: -1px 0 #b99213, 0 1px #b99213, 1px 0 #b99213, 0 -1px #b99213;
}
a img {
  opacity: 1;
}
a:hover img {
  opacity: 0.6;
}
hr {
  width: 80%;
}
pre {
  border: 0;
  background-color: transparent;
  font-family: "Raleway", sans-serif;
}
.container-fluid {
  padding-right: 0px;
  padding-left: 0px;
}
.poemtitle {
  font-family: "gothic_sb";
  text-align: center;
  font-size: 3.5em;
}
.poemtext {
  text-align: left;
  font-size: 1em;
  font-family: kandal;
}
.poemcredit {
  font-family: kandal_i;
  text-align: center;
  font-size: 1.8em;
  padding-bottom: 10px;
}

.piecename {
  font-family: kandal;
}

.kernriver {
  font-family: "Times New Roman", Times, serif;
  font-size: 1em;
}
.kernriver b {
  font-family: Arial, Helvetica, sans-serif;
}
.row {
  margin-left: 0px;
  margin-right: 0px;
}

.credit {
  float: right;
  font-family: kandal_i;
}

footer {
  margin: 50px 0;
  text-align: center;
}

.modal-title {
  display: none;
}

.half-img {
  width: 100%;
}

.full-img {
  width: 100%;
}

.audio-footer {
  position: fixed;
  z-index: 1;
  bottom: -5px;
  width: 100%;
  background-color: #fafafa;
  display: block;
  z-index: 100;
}

#song-name {
  padding-top: 5px;
}

#song-artist {
  padding-top: 5px;
  padding-left: 3px;
}

audio {
  width: 70vw;
}

.nxt-sng {
  font-size: 20px;
  position: relative;
  top: -9px;
  padding-left: 5px;
  padding-right: 20px;
  color: #5a5a5a;
}

.song-credit {
  display: -webkit-inline-box;
  padding-bottom: 10px;
  padding-left: 10px;
  top: -10px;
  position: relative;
}

.to-top {
  position: fixed;
  bottom: -4px;
  z-index: 3;
  background-color: white;
  padding-bottom: 55px;
  float: right;
  right: 40px;
  font-size: 20px;
  width: 80px;
  text-align: center;
  border: 1px solid black;
  color: black;
  font-weight: bolder;
}

@media only screen and (max-width: 700px) {
  .header-image {
    float: right;
    padding-top: 220px;
    position: relative;
    background-color: #c5e4e4;
    width: 112%;
    right: -20px;
  }

  audio {
    width: 8vw;
  }

  .header h1 {
    font-size: 3em;
    color: white;
    line-height: 90%;
  }
  .header h2 {
    font-size: 3.5em;
    color: white;
    line-height: 30%;
  }
  .header h3 {
    font-size: 2em;
    color: white;
    line-height: 90%;
  }

  .to-top {
    position: fixed;
    bottom: -4px;
    z-index: 3;
    background-color: white;
    padding-bottom: 80px;
    float: right;
    right: 10px;
    font-size: 18px;
    width: 55px;
    text-align: center;
    border: 1px solid black;
    color: black;
    font-weight: bolder;
    display: none;
  }
}

ul a {
  cursor: pointer;
}