.verse_display {
    font-size: 1.75rem;
    font-weight: 200;
}
.verse_address {
}
span.single_word {
    display: inline-block;
    margin: 0 .25rem 0 0;
}
span.single_word:hover {
    background: #ffcc00;
    cursor:pointer;
}
.button_group {
    width: fit-content;
    margin: 0 auto 1rem;
}
/* playlist styles */

#trackList a {
  display: block;
  margin: 0.5em 0;
  cursor: pointer;
  text-decoration: underline;
  color: blue;
}

#trackList a:hover {
  color: darkblue;
}
div#sing-along-trasklist {
    background: #dadada;
    border-radius: 0 0 .5rem .5rem;
}

audio#sing-along {
    width: 90%;
    height: 4rem;
    display: flex;
}
.hstack.sing-along-track-row {
    width:100%;
    font-size: 1.5rem;
    display: flex;
    justify-content: left;
    border-bottom:solid black;
}
.sing-along-track-row:has(a.selected) {
    background: #c5c2c2;
    color: #ff0000;
}
.hstack.sing-along-track-row:last-child {
    border-bottom: unset;
}
.sing-along-tracklist-caption {
    font-size:.75rem;
}

/* breakpoint styles */
@media (max-width: 576px) {
    .hstack.sing-along-track-row {font-size:.75rem;}
    .sing-along-tracklist-caption {font-size:.5rem;}
}
@media (min-width: 576px) {
    .hstack.sing-along-track-row {font-size:.8rem;}
    .sing-along-tracklist-caption {font-size:.5rem;}
}

@media (min-width: 768px) {
    .hstack.sing-along-track-row {font-size:1rem;}
    .sing-along-tracklist-caption {font-size:.5rem;}
}

@media (min-width: 992px) {
    .hstack.sing-along-track-row {font-size:1.15rem;
    .sing-along-tracklist-caption {font-size:.65rem;}}
}

@media (min-width: 1200px) {
    .hstack.sing-along-track-row {font-size:1.25rem;}
    .sing-along-tracklist-caption {font-size:.7rem;}
}

@media (min-width: 1400px) {
    .hstack.sing-along-track-row {font-size:1.5rem;}
    .sing-along-tracklist-caption {font-size:.75rem;}
}