:root {
  --bs-border-radius: 0.22rem;
  --bs-border-radius-sm: 0.12rem;
  --bs-border-radius-lg: 0.12rem;
  --bs-border-radius-xl: 0.22rem;
  --bs-border-radius-xxl: 0.22rem;
  --bs-border-radius-2xl: 0.22rem;
  --bs-border-radius-pill: 0.12rem;
  --bs-font-sans-serif: "Open Sans", system-ui, sans-serif;
  --bs-font-monospace: "Source Code Pro", monospace;
  --bs-font-serif: "Noto Serif", serif;
  --primary-color: #5e8bde;
}

body {
  background: #1a1c20;
}
h2 {
  font-weight: 400 !important;
}
h3 {
  font-weight: 200 !important;
}
.hero {
  background: #1a1c20;
  color: #fff;
}
.section-stripe-lighter {
  background: #454b55;
  color: #1a1c20;
}
.card {
  background: #2c2e38;
  color: #d6d6d6;
  border-radius: 0.42rem;
}
.card-title {
  color: #8c8c8c;
}
.section-stripe-darker {
  background: #1a1c20;
  color: #fff;
}
.section-stripe-darker h5 {
  color: #8c8c8c;
}
.hero h1 {
  font-family: var(--bs-font-serif);
  font-size: 3rem;
  font-weight: 300;
}
.doc-link {
  color: #fff;
  font-size: 0.8rem;
  text-decoration: none;
}

@media (max-width: 767px) {
  .hero h1  {
    font-size: 2.2rem;
  }
}

@media (max-width: 767px) {
  #hero-logo {
    width: 32px;
    margin-right: 10px;
  }
  .hero .tagline {
    padding-left: 42px;
  }
}
@media (max-width: 982px) {
  /* make container span screen width for small screens */
  #hero-img-container {
    width: 100%;
  }
}
@media (min-width: 400px) {
  .hero .btn-group {
    padding-left: 42px;
  }
}
@media (min-width: 768px) {
  #hero-logo {
    width: 42px;
    margin-right: 10px;
  }
  .hero .tagline {
    padding-left: 52px;
  }
  .hero .btn-group {
    padding-left: 52px;
  }
}
@media (min-width: 1450px) {
  /* stop image from being fluid on big screens */
  #hero-img {
    max-width: 720px !important;
    width: 720px !important;
  }
}
#footer-logo {
  width: 22px;
  margin-right: 10px;
}
.footer {
  color: #d6d6d6;
}
.footer .row > .col {
  padding-left: 45px;
}
.footer h5 {
  font-family: var(--bs-font-serif);
  font-weight: 300;
}

/** Bootstrap overrides */
.btn-outline-primary {
  --bs-btn-color: var(--primary-color);
  --bs-btn-border-color: var(--primary-color);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--primary-color);
  --bs-btn-hover-border-color: var(--primary-color);
  --bs-btn-focus-shadow-rgb: 13, 110, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--primary-color);
  --bs-btn-active-border-color: var(--primary-color);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--primary-color);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--primary-color);
  --bs-gradient: none;
}