/* Character colors */
:root {
    --bri-themea: #04043f;
    --bri-themea-rgb: rgb(4,4,63);
    --bri-bg: #dbdce4;
    --bri-bg-rgb: rgba(219,220,228,255);
    --liz-themea
}

.container {
    border-radius: 12px;
}

/* Cover Images for each character and home */
.masthead {
    background:linear-gradient(to bottom, rgba(15, 10, 75, 0.55) 2%, rgba(20, 15, 5, 0.55) 45%, rgba(0, 30, 5, 0.6) 90%, #000 100%), url(../assets/img/bg-masthead.jpg)!important;
}
.masthead-bri {
  background: linear-gradient(to bottom, rgba(82, 44, 176, 0.3) 0%, rgba(128, 78, 213, 0.45) 30%, rgba(41,11,118, 0.7) 55%, rgba(4,4,63,0.7) 85%, rgb(4,4,63) 100%), url("../assets/img/masthead-bri.jpg")!important;
}
.masthead-liz {
  background: linear-gradient(to bottom, rgba(229,210,229,0.50) 0%, rgba(219,168,188,0.5) 60%, #343627 100%), url("../assets/img/masthead-liz.png")!important;
}
.masthead-fioria {
  background: linear-gradient(to bottom, rgba(234, 58, 6, 0.3) 0%, rgb(209, 92, 4, 0.45) 60%, #730704 100%), url("../assets/img/masthead-fioria.jpg")!important;
}
.masthead-marc {
  background: linear-gradient(to bottom, rgba(50, 0, 0, 0.3) 0%, rgb(64, 5, 5, 0.45) 60%, #320201 100%), url("../assets/img/masthead-marc.png")!important;
}
.masthead-luc {
  background: linear-gradient(to bottom, rgb(27 80 46 / 30%) 0%, rgb(57 96 53 / 32%) 70%, #294021 100%), url(../assets/img/masthead-luc.png)!important;
}
.about-section-luc {
    padding-top: 10rem;
    background: linear-gradient(to bottom, #294021 0%, rgba(0, 0, 0, 0.8) 100%);
}
@media (min-width: 992px) {
.masthead-marc .masthead-liz .masthead-bri .masthead-luc .masthead-fioria {
    height: 100vh !important;
    padding: 0;
}
}
@media (min-width: 992px) {
.box {
    max-width: 672px !important;
    padding: 0;
}
}

.bri {
    background: var(--bri-bg)!important;
}
.luc {
    background: #a4ada0!important;
}
.liz {
    background: #a9aba5!important;
}
.fi {
    background: #a15856!important;
}
.marc {
    background: linear-gradient(to bottom, #5c3a40 75%, #FFF 100%)!important;
}
/* Small backstory blurb*/
.beginning-section-bri {
    background: linear-gradient(to bottom, rgb(4,4,63) 20%, var(--bri-bg-rgb) 100%)!important;
}
.beginning-section-liz {
    background: linear-gradient(to bottom, #343627 20%, #a9aba5 100%)!important;
}
.about-section-fi {
    background: linear-gradient(to bottom, #730704 0%, #a15856 100%)!important;
}
.about-section-marc {
    background: linear-gradient(to bottom, #320201 0%, #5c3a40 100%)!important;
}
.about-section-luc {
    background: linear-gradient(to bottom, #294021 0%, #a4ada0 100%)!important;
}
.headshots img {
    opacity: .75;
}
.portrait {
    max-width: 70%!important;
}
.vertical {
    vertical-align: middle;
}
.portrait-section {
  padding-top: 10rem;
  background: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.9) 40%, rgba(0, 0, 0, 0.3) 80%, var(--bs-light) 100%);
}
.portrait-section p {
  margin-bottom: 5rem;
}
.box {
    background-color: var(--bs-light);
    opacity: 60%;
    padding: 1rem;
}
.left-align {
    text-align: left !important;
    text-indent: 1em;
}
.decor {
    width: 50%;
}
.spotify {
    border-left: 0.5rem solid #343a40;
}
/* TIMELINE SHENANIGANS */

/* The actual timeline (the vertical ruler) */
.timeline::-webkit-scrollbar {
  display: none;
}

.timeline {
    display:block;
  font-family: var(--bs-body-font-family);
  font-size: .8em;
  font-weight: var(--bs-body-font-weight);
  line-height: var(--bs-body-line-height);
  position: relative;
  max-width: 100%;
  margin: 0 auto;
  overflow: scroll;
  max-height: 50em;
  background: rgba(4,4,63,0.2);
  border-radius: 12px;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

/* The actual timeline (the vertical ruler) */
.timeline::after {
  content: '';
  position: absolute;
  width: 6px;
  background-color: white;
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -3px;
  height: 3500px;
}

/* Container around content */
.timebox {
  padding: 10px 20px;
  position: relative;
  background-color: inherit;
  width: 50%;
  border-radius: 12px;
}

/* The circles on the timeline */
.timebox::after {
  content: '';
  position: absolute;
  width: 25px;
  height: 25px;
  right: -12px;
  background-color: white;
  border: 4px solid var(--bs-yellow);
  top: 15px;
  border-radius: 50%;
  z-index: 1;
}

/* Place the container to the left */
.left {
  left: 0;
}

/* Place the container to the right */
.right {
  left: 50%;
  text-align: left;
  text-indent: 1em;
}

/* Add arrows to the left container (pointing right) */
.left::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  right: 30px;
  border: medium solid white;
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent white;
}

/* Add arrows to the right container (pointing left) */
.right::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  left: 30px;
  border: medium solid white;
  border-width: 10px 10px 10px 0;
  border-color: transparent white transparent transparent;
}

/* Fix the circle for containers on the right side */
.right::after {
  left: -13px;
}

/* The actual content */
.content {
  padding: 20px 30px;
  background-color: white;
  position: relative;
  border-radius: 12px;
}

/* Media queries - Responsive timeline on screens less than 600px wide */
@media screen and (max-width: 600px) {
/* Place the timelime to the left */
  .timeline::after {
    left: 31px;
  }

/* Full-width containers */
  .timebox {
    width: 100%;
    padding-left: 70px;
    padding-right: 25px;
  }

/* Make sure that all arrows are pointing leftwards */
  .timebox::before {
    left: 60px;
    border: medium solid white;
    border-width: 10px 10px 10px 0;
    border-color: transparent white transparent transparent;
  }

/* Make sure all circles are at the same spot */
  .left::after, .right::after {
    left: 15px;
  }

/* Make all right containers behave like the left ones */
  .right {
    left: 0%;
  }
}
.youtube {
    display: block;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
    background: white;
    max-width:612px; 
    max-height:372px;
}

.youtube-top {
    display:none;
}

.l-a-text-top {
    display: none;
}

/* Liz' YT video ughhhhhhhhh */

@media screen and (max-width: 800px) {

.l-a-text {
    display: none;
}

.l-a-text-top {
    display: block;
}

.youtube {
display: none;
}

.youtube-top {
    display: block;
    margin-bottom: 5px;
    background: white;
    width: 90%;
}
}