:root {
  /** Main */
  --burnt-sienna: #FF671B;
  --firefly: #103335;
  --fountain-blue: #4DB9AB;
  /** Neutral */
  --taupe: #D2D0C5;
  --ebony: #343439;
  /** Deprecated */
  --sinbad: #9FD1D6;
  --steel-blue: #408BA2;
  /** Bootstrap overrides */
  --bs-font-sans-serif: Arimo, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --bs-body-color: var(--ebony);
  --bs-body-bg: var(--taupe);
  --bs-emphasis-color: var(--burnt-sienna);
  --bs-secondary-color: var(--firefly);
  --bs-tertiary-color: var(--fountain-blue);
  --bs-link-color: var(--fountain-blue);
  --bs-border-color: var(--burnt-sienna);
  --bs-light: var(--taupe);
  --bs-light-rgb: 210, 208, 197;
}


/**
 * Layout and colours
 */

.navbar {
  background-color: var(--taupe);
  box-shadow: 0 6px 12px rgba(0,0,0,0.5);
}
.navbar-brand, .navbar-nav .nav-link {
  color: var(--firefly) !important;
}
.navbar-brand:hover, .navbar-nav .nav-link:hover {
  color: var(--burnt-sienna) !important;
}

.hero {
  background: rgba(0, 0, 0, 0.5);
  color: var(--taupe);
  padding: 7rem 0;
  text-align: center;
  position: relative;
  min-height: 74vh
}
.hero-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}

.section-header {
  margin-bottom: 2rem;
  font-weight: bold;
}
.section {
  position: relative;
  padding: 5rem 0;
}
.section img {
  border-radius: 5px;
}
.section img {
  border-radius: 5px;
  max-height: 600px;
}

/** Custom xl breakpoint code for images */
@media (min-width: 1200px) {
  .img-overflow {
    width: 49vw;
    img {
      float: right
    }
  }
  .img-underflow {
    width: 50vw;
    float: right;
  }
}

.v-shape {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 49vw solid transparent;
  border-right: 49vw solid transparent;
  border-bottom: 4rem solid var(--fountain-blue);

  /* animation timeline has limitted support */
  animation: flatten linear forwards;
  animation-timeline: view(350px);
  animation-range: 0% 100%;
}

.v-shape.firefly {
  border-bottom-color: var(--firefly);
}
.v-shape.taupe {
  border-bottom-color: var(--taupe);
}

@keyframes flatten {
  from {
    border-bottom-width: 5rem;
    border-left-width: 50vw;
    border-right-width: 50vw;
  }
  to {
    border-bottom-width: 0;
    border-left-width: 0;
    border-right-width: 0;
  }
}

.bg-firefly {
  background-color: var(--firefly);
}
.bg-fountain-blue {
  background-color: var(--fountain-blue);
}
.bg-ebony {
  background-color: var(--ebony);
}

/**
 * Typography
 */

.prose ul {
  list-style: none;
  margin: 2rem;
  padding: 0;
  li {
    margin: 0;
    margin-bottom: 0.5rem;
    padding-left: 1.5rem;
    position: relative;
    &:after {
      content: '';
      height: .4rem;
      width: .4rem;
      background: var(--bs-body-color);
      display: block;
      position: absolute;
      transform: rotate(45deg);
      top: .5rem;
      left: 0;
    }
  }
}
.text-light ul li:after {
    background-color: var(--taupe);
}

.btn-primary {
  --bs-btn-bg:  var(--burnt-sienna);
  --bs-btn-border-color:  var(--burnt-sienna);
  --bs-btn-hover-bg:  var(--burnt-sienna);
  --bs-btn-hover-border-color:  var(--burnt-sienna);
  --bs-btn-active-bg:  var(--burnt-sienna);
  --bs-btn-active-border-color:  var(--burnt-sienna);
  --bs-btn-disabled-bg:  var(--ebony);
  --bs-btn-disabled-border-color:  var(--ebony);
  transition: filter .5s;
}

.btn-primary:hover {
  filter: brightness(72%);
}