/*
 * Custom CSS
 */

:root {
  /* --bs-body-bg: var(--bs-gray-100); */
  --bs-blue: #005eff;
  --bs-nav-link-color: red;
}

body {
  font-family: "Jost", sans-serif;
  font-optical-sizing: auto;
}

.demo {
  margin-right: 20px;
  margin-left: -150px;
}

.anta {
  font-family: "Anta", sans-serif;
  font-optical-sizing: auto;
}

.jost {
  font-family: "Jost", sans-serif;
  font-optical-sizing: auto;
}

h2 {
  font-family: "Anta", sans-serif;
  font-optical-sizing: auto;
}

.logo {
  height: 3rem;
}

.navbar {
  -webkit-backdrop-filter: saturate(50%) blur(8px);
  backdrop-filter: saturate(50%) blur(8px);
  background-color: rgba(255,255,255,.7) !important;
}

.nav-link {
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--bs-blue)
}

.navbar-collapse {
  flex-grow: 0.7;
}

.background-image {
  background-image: url(background.jpg);
  background-size: 80%;
  background-position-x: right;
  background-repeat: no-repeat;
}

.btn-primary {
  --bs-btn-bg: var(--bs-blue);
}

.bg-blue {
  background-color: var(--bs-blue);
}

.mission {
  text-align: center;
  font-weight: bold;
  font-style: italic;
  color: var(--bs-blue);
}


.bd-placeholder-img {
  font-size: 1.125rem;
  text-anchor: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

@media (min-width: 768px) {
  .bd-placeholder-img-lg {
    font-size: 3.5rem;
  }
}




/* Featurettes
------------------------- */

.featurette-divider {
  margin: 4rem 0; /* Space out the Bootstrap <hr> more */
  border-top-width: 4px;
  border-top-color: var(--bs-blue);
  opacity: 100;
}

/* Thin out the marketing headings */
.featurette-heading {
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.05rem;
}


/* RESPONSIVE CSS
-------------------------------------------------- */

@media (max-width: 768px) {

  html, body {
    max-width: 100%;
    overflow-x: hidden;
  }

  .callout-box {
    margin-bottom: 20px;
  }

  .visualize {
    height: 150px;
  }

}

@media (min-width: 40em) {

  .featurette-heading {
    font-size: 2.5rem;
    font-weight: bold;
  }
}

@media (min-width: 62em) {
  .featurette-heading {
    margin-top: 5rem;
  }
}