.content {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
}
.title {
  font-size: 28pt;
  font-weight: bold;
}
.chapter, .verse {
    height: 20px;
    padding: 3px;
    border: solid 1px black;
    text-align: center;
}
.book {
    width: 100%;
}
.chapter {
    width: 82px;
}
.verse {
    width: 20px;
}
/*.text {
    display: none;
}*/
/* for the color bands: */
.verse {
  position: relative;
  background: white;
  /* Ensure box creates a stacking context */
  z-index: 0;
}

/* Top stack starts from the top edge */
.top-stack {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  max-height: 50%; /* Prevent crossing center */
  overflow: hidden; /* Hide any excess bands */
  z-index: -1; /* put behind the content */
}

/* Bottom stack starts from the bottom edge */
.bottom-stack {
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column-reverse;
  max-height: 50%; /* Prevent crossing center */
  overflow: hidden;
  z-index: -1; /* put behind the content */
}

.band {
  width: 26px;
  height: 5px;
  background: #CBFFA9; /* green */
}

.bottom-stack .band {
  background: #CBFFA9; /* green */}

.band.optional {
  background: #FFFEC4; /* yellow */
}
.band.abridged {
  background: #FFD6A5; /* orange */
}
.band.skipped {
  background: #FF9B9B; /* red */
}