@import url(https://fonts.googleapis.com/css?family=Comfortaa);
.specialFont {
  font-family: 'Comfortaa', serif;
}

.specialFont sup {
  font-size: x-small;
  color: gray;
}

.dateFont {
  font-family: 'Courier New', Courier, monospace;
  font-size: small;
  padding-right: 10px;
  
  color: #17a2b8;
  letter-spacing: -1.2px;

}

.active .dateFont {
  color: lightgray;
}

.bg-black {
  background-color: black;
}

article.bg {
  background-image: url(../images/3_angels.png);
  background-size: contain;
  /* <------ */
  background-repeat: no-repeat;
  background-position: bottom center;
  /* optional, center the image */
}

.no-padding-h {
  padding-left: 0%;
  padding-right: 0%;
}

.dropdown-item {
  font-size: calc(.8em + 0.1vw);
}

.imgFade {
  box-shadow: 0 30px 40px rgba(0, 0, 0, .3), 0 -30px 40px rgba(0, 0, 0, .3);
}

.subTitle-highlight {
  box-shadow: 0 10px 20px rgba(0, 0, 0, .2), 0 -10px 20px rgba(0, 0, 0, .2);
  padding: 2px 20px
}

.title-font {
  font-size: calc(2.2em + 1.5vw);
  text-shadow: 2px 2px #000000;
  margin-bottom: 0;
}

.subtitle-font {
  font-size: calc(0.7em + 0.5vw);
  font-weight: lighter;
}

.verseImageContainer {
  position: relative;
}

.verseCollapseButton {
  background-color: rgba(24, 24, 24, 0.2);
  border: none;
  position: absolute;
  right: 1px;
  top: 1px;
}

.overlay-text-verse {
  font-size: min(calc(1.1em + 2vw), 5em);
  position: absolute;
  width: 70%;
  max-width: 1600px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 25px;
  background-color: rgba(24, 24, 24, 0.2);
}

.text-verse {
  font-size: calc(1em + 2.5vw);
  background-color: rgba(24, 24, 24, 0.2);
}

article {
  font-family: 'Comfortaa', serif;
  font-size: calc(1em + 0.5vw);
  /* text-align: justify; */
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
  -webkit-column-width: 300px;
  -moz-column-width: 300px;
  column-width: 300px;
  -webkit-column-gap: 4em;
  -moz-column-gap: 4em;
  column-gap: 4em;
  -webkit-column-rule: 1px dotted rgb(76, 76, 76);
  -moz-column-rule: 1px dotted rgb(76, 76, 76);
  column-rule: 1px dotted rgb(76, 76, 76);
}

article p:first-of-type:first-child:first-letter {
  color: white;
  float: left;
  font-size: calc(3em + 0.5vw);
  line-height: 40px;
  padding-top: 4px;
  padding-right: 2px;
  padding-left: 3px;
}

/* Scrollbar */

html {
  --scrollbarBG: #343a40;
  --thumbBG: #000000;
}

body::-webkit-scrollbar {
  width: 11px;
}

body {
  scrollbar-width: thin;
  scrollbar-color: var(--thumbBG) var(--scrollbarBG);
}

body::-webkit-scrollbar-track {
  background: var(--scrollbarBG);
}

body::-webkit-scrollbar-thumb {
  background-color: var(--thumbBG);
  border-radius: 6px;
  border: 3px solid var(--scrollbarBG);
}