:root {
  --oxford-blue: #002252;
  --dark-electric-blue: #536878;
  --alice-blue: #edf6f9;
  --dark-cornflower-blue: #003885;
  --french-bistre: #706c61;
  --color-text: #64707d;
  --color-title: #242b33;
}

/* Light background */

.btn-primary {
  background-color: var(--dark-cornflower-blue);
  border-color: var(--dark-cornflower-blue);
}

.btn-primary:hover {
  color: #fff;
  background-color: var(--oxford-blue);
  border-color: var(--oxford-blue);
}

.btn-check:active + .btn-primary, .btn-check:checked + .btn-primary, .btn-primary.active, .btn-primary:active, .show > .btn-primary.dropdown-toggle {
  color: #fff;
  background-color: var(--dark-cornflower-blue);
  border-color: var(--dark-cornflower-blue);
}

.btn-check:focus + .btn-primary, .btn-primary:focus {
  color: #fff;
  background-color: var(--dark-cornflower-blue);
  border-color: var(--dark-cornflower-blue);
  box-shadow: 0 0 0 0.25rem rgba(0, 56, 133, 0.5);
}

.btn-check:active + .btn-primary:focus, .btn-check:checked + .btn-primary:focus, .btn-primary.active:focus, .btn-primary:active:focus, .show > .btn-primary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.25rem rgba(0, 56, 133, 0.5);
}

/* Dark background */

.btn-outline-primary {
  color: #fff;
  border-color: var(--alice-blue);
}

.btn-outline-primary:hover {
  color: #fff;
  background-color: var(--oxford-blue);
  border-color: var(--alice-blue);
}

.btn-check:focus + .btn-outline-primary, .btn-outline-primary:focus {
  color: #fff;
  background-color: var(--oxford-blue);
  border-color: var(--alice-blue);
  box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.5);
}

.btn-check:active + .btn-outline-primary:focus, .btn-check:checked + .btn-outline-primary:focus, .btn-outline-primary.active:focus, .btn-outline-primary:active:focus, .show > .btn-outline-primary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.5);
}

/* Navigation */

@media (min-width: 768px) {
  .nav-item::after {
    content: "";
    display: inherit;
    width: 75%;
    margin: 0 auto;
    border-top: 4px solid transparent;
  }
}

@media (min-width: 768px) {
  .nav-item:hover:after {
    border-top: 4px solid var(--french-bistre);
  }
}