.quote-card{
  color: #fff;
  font-size: 24px;
  text-align: center;
  padding: clamp(1em, 10%, 4em) 10em 10em 10em;
  background-color: var(--cerulean);
  background-image: radial-gradient(#3989ad, #185894, #0b7db1);
  background-image: url(../png/quote-background.png);
  background-repeat: no-repeat;
  background-size: 250% 250%;
  animation: background-gradient 20s ease infinite;
  height: 17em;
  text-overflow: ellipsis;
}

@keyframes background-gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.circle {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1em;
  height: 4em;
  width: 4em;
  border-radius: 50%;
  background-color: var(--cerulean);
  color: #fff;
  z-index: 2;
}

.timeline-entry.row .col-2 {
  align-self: stretch;
}

/* to-do: figure out why this isn't aligned properly */
/* .timeline-entry.row .col-2::after {
    content: "";
    position: relative;
    border-left: 3px solid var(--cerulean);
    border-left-style: dashed;
    z-index: 1;
}
.timeline-entry.row .col-2.bottom::after {
  height: 100%;
  top: -1em;
  left: calc(-2em + 1px);
}
.timeline-entry.row .col-2.full::after {
  height: 75%;
  left: calc(-2em - 1px);
}
.timeline-entry.row .col-2.top::after {
  height: 75%;
  left: calc(-2em + 1px);
} */


.timeline div {
  padding: 0;
  height: 40px;
}
.timeline hr {
  border-top: 3px solid var(--cerulean);
  margin: 0;
  top: 17px;
  position: relative;
  opacity: 100%;
}
.timeline .col-2 {
  display: flex;
}
.timeline .corner {
  border: 3px solid var(--cerulean);
  width: 100%;
  position: relative;
}

.timeline .dashed-end, .timeline .dashed-start {
  border-top: 3px dashed var(--cerulean);
  background-color: #fff;
  width: 50%;
}

.timeline .dashed-start {
  left: 25%;
  width: 75%;
}

@media (prefers-color-scheme: dark) {
  .timeline .dashed-end, .timeline .dashed-start {
    background-color: var(--dark-bg-color);
  }

  .timeline .dashed-end.light-theme , .timeline .dashed-start.light-theme {
    background-color: var(--light-bg-color);
  }

  .timeline .right-bottom {
    border-bottom: none !important;
    border-right: none !important;
  }

  .timeline .left-bottom {
    border-bottom: none !important;
    border-left: none !important;
  }

  .timeline .top-right {
    border-top: none !important;
    border-right: none !important;
  }

  .timeline .top-left {
    border-top: none !important;
    border-left: none !important;
  }
}

@media (prefers-color-scheme: light) {
  .timeline .dashed-end, .timeline .dashed-start {
    background-color: var(--light-bg-color);
  }

  .timeline .dashed-end.dark-theme , .timeline .dashed-start.dark-theme {
    background-color: var(--dark-bg-color);
  }
}

/* to-do: work out what's going on with the height and top properties on smaller device sizes. They will need to be adjusted so that the lines extend the correct amount to connect to the circles. As much as I hate to do it, I think it may just need to use a media query */

.timeline .top-right {
  left: 50%;
  top: -200%;
  border-top: none;
  border-right: none;
  border-bottom-left-radius: 25px;
  height: 100px;
}
.timeline .left-bottom {
  left: -50%;
  top: calc(50% - 3px);
  border-bottom: none;
  border-left: none;
  border-top-right-radius: 25px;
  height: 200px;
}
.timeline .top-left {
  left: -50%;
  top: -200%;
  border-left: none;
  border-top: none;
  border-bottom-right-radius: 25px;
  height: 100px;
}
.timeline .right-bottom {
  left: 50%;
  top: calc(50% - 3px);
  border-bottom: none;
  border-right: none;
  border-top-left-radius: 25px;
  height: 100px;
}

.timeline .horizontal-right {
  border: 3px solid var(--cerulean);
  border-left: none;
  border-top: none;
  border-bottom: none;
  position: relative;
  bottom: 15em;
  height: 10em;
  width: 100%;
}

.timeline .horizontal-left {
  border: 3px solid var(--cerulean);
  border-right: none;
  border-top: none;
  border-bottom: none;
  position: relative;
  bottom: 15em;
  height: 10em;
  width: 100%;
}

.timeline .longer {
  height: 15em;
  bottom: 20em;
}

/* Styles for Timeline Scroll Fading */

.scroll-fade {
  opacity: 0;
  transition: opacity 500ms;
}

.scroll-fade.scrolled {
  opacity: 1;
}

.scrolled.slide-left {
  animation: slide-in-left 1s ease-in-out both;
  animation-delay: 150ms;
}

.scrolled.slide-right {
  animation: slide-in-right 1s ease-in-out both;
  animation-delay: 150ms;
}

/* keyframes for slide effect */

/* ----------------------------------------------
 * Generated by Animista on 2021-2-11 23:32:31
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

 @keyframes slide-in-left {
  0% {
    -webkit-transform: translateX(-100px);
    transform: translateX(-100px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slide-in-right {
  0% {
    -webkit-transform: translateX(100px);
    transform: translateX(100px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}

/* 
Dear reader,

What follows is, quite possibly, the worst CSS code that has ever been written. 
I apologize dearly for what I have asked your web browser to render. It is truly
an abomination to any semblances of good design practices.
DRY code? How about re-do the classes for every possible breakpoint?
Sensible responsive sizing and layout? Who has time for that!?
I am so sorry.

-Ben P.
*/

@media screen and (max-width: 999px){
  .timeline .horizontal-right, .timeline .horizontal-left{
    bottom: 30em;
    height: 25em;
  }

  .timeline .horizontal-right.slightly-shorter, .timeline .horizontal-left.slightly-shorter {
    bottom: 25em;
    height: 20em;
  }

  .timeline .horizontal-right.shorter, .timeline .horizontal-left.shorter {
    bottom: 15em;
    height: 15em;
  }

  .timeline .horizontal-right.longer, .timeline .horizontal-left.longer {
    bottom: 32em;
    height: 30em;
  }

  .timeline .horizontal-right.moderately-longer, .timeline .horizontal-left.moderately-longer {
    bottom: 40em;
    height: 35em;
  }
  
  .quote-card{
    color: #fff;
    font-size: 18px;
    text-align: center;
    padding: clamp(0.25em, 25%, 2em) 4em 2em 4em;
    height: 15em;
  }

  .carousel-caption {
    font-size: smaller;
  }
}

@media screen and (max-width: 850px){
  .timeline .horizontal-right, .timeline .horizontal-left, .timeline.row {
    display: none;
  }

  .timeline-entry {
    margin: 2em auto;
  }
  
  .quote-card{
    color: #fff;
    font-size: 12px;
    text-align: center;
    height: clamp(10em, 60vw, 150em);
    padding: clamp(0.25em, 25%, 1em) 4em clamp(1em, 50%, 4em) 4em;
    margin-bottom: clamp(1em, 50%, 4em);
  }

  .carousel-caption {
    font-size: smaller;
  }
}

@media screen and (max-width: 1250px) {
  .feature-icon span {
    font-size: 1.5rem !important;
  }

  .quote-card {
    height: clamp(10em, 40vw, 150em);
    font-size: 16px;
  }
}