.masthead .masthead-device-mockup .circle .gradient-start-color {
  stop-color: rgb(11, 79, 108, 1.0);  /*  Indigo Dye  */
}
.masthead .masthead-device-mockup .circle .gradient-end-color {
  stop-color: rgba(1, 186, 239, 1.0);  /*  Process Cyan  */
}

.accent-dark {
  color: rgba(129, 15, 15, 1.0) /* Burnt Crimson */
}

.accent-light {
  color: rgba(231, 44, 39, 1.0) /* Ruby shine */
}

/* Other Potential Highlight Color: rgb(210, 117, 25) */

.features-device-mockup .circle .gradient-start-color {
  stop-color: rgba(1, 186, 239, 1.0);  /*  Process Cyan  */
}
.features-device-mockup .circle .gradient-end-color {
  stop-color: rgb(11, 79, 108, 1.0);  /*  Indigo Dye  */
}

/* Original styles.css uses !important, so this must as well */
.bg-gradient-primary-to-secondary {
  background: linear-gradient(45deg, rgba(1, 186, 239, 1.0), rgb(11, 79, 108, 1.0)) !important;
}

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: rgb(11, 79, 108, 1.0);
  --bs-btn-border-color: #01270d;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: rgba(1, 186, 239, 1.0);
  --bs-btn-hover-border-color: rgb(28, 131, 175);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: rgb(11, 79, 108, 1.0);
  --bs-btn-active-border-color: #000;
  --bs-btn-disabled-color: #000000;
  --bs-btn-disabled-bg: #5a5757;
  --bs-btn-disabled-border-color: #141414;
}

.form-control:focus {
  color: #212529;
  background-color: #fff;
  border-color: #458ba3;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(1, 186, 239, 1.0);
}

.device[data-device=iPhoneX][data-orientation=portrait][data-color=black]::after {
background-image: url("../assets/img/portrait_black-no-notches_v1.png"); /*  portrait_black-no-notches.png */
}

.text-gradient {
  background: -webkit-linear-gradient(rgba(1, 186, 239, 1.0), rgb(11, 79, 108, 1.0));
  background-clip: text;
}

pre code {
    display: block;
    color: rgba(0, 255, 81, 0.7);
    background-color: rgba(0, 0, 0, 0.8);
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow-x: auto;
}

/* This needs some work. */
@media (min-width: 1173px) {
  .masthead {
    background-color: #f8f9fa;
    padding-top: 3rem;
    padding-bottom: 2rem;
  }

  .masthead .masthead-device-mockup {
    padding-top: 6em;
    padding-bottom: 1rem;
  }
}

aside {
  padding-top: 2rem;
  padding-bottom: 0rem;
}

section.cta {
  padding: 3rem 0;
  background-image: "";
}