:root {
  color-scheme: dark;
  --bs-body-bg: #1c313a;
  --bs-body-bg-rgb: 28, 49, 58;
  --bs-body-color: #3ebbf1;
  --bs-body-color-rgb: 62, 187, 241;
  --bs-primary: #c3f36b;
  --bs-primary-rgb: 195, 243, 107;
  --bs-primary-text-emphasis: #d5ff91;
  --bs-info: #3ebbf1;
  --bs-info-rgb: 62, 187, 241;
  --bs-secondary: #171f1a;
  --bs-secondary-rgb: 23, 31, 26;
  --bs-secondary-color: #a3aea5;
  --bs-secondary-color-rgb: 163, 174, 165;
  --bs-secondary-bg: #171f1a;
  --bs-tertiary-bg: #1d2821;
  --bs-dark: #101713;
  --bs-dark-rgb: 16, 23, 19;
  --bs-border-color: rgba(226, 238, 226, 0.16);
  --bs-link-color: #3ebbf1;
  --bs-link-hover-color: #c3f36b;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

.site-footer {
  border-top: 1px solid rgba(195, 243, 107, 0.2);
}

.footer-brand,
.footer-top-link {
  transition: color 160ms ease;
}

.footer-brand:hover,
.footer-top-link:hover {
  color: var(--bs-primary-text-emphasis) !important;
}

@media (max-width: 767.98px) {
  .navbar-brand {
    max-width: 190px;
    font-size: 1rem;
    line-height: 1.2;
    white-space: normal;
  }

  #home {
    min-height: auto !important;
    padding: 6rem 0 2rem !important;
  }

  #home .row {
    row-gap: 1.5rem !important;
  }

  #home .h2 {
    margin: 0 0 0.75rem !important;
    padding: 0 !important;
    font-size: 1.25rem;
  }

  #home h1 {
    font-size: clamp(2rem, 8vw, 3rem) !important;
  }

  #home .lead {
    margin-top: 1rem !important;
    font-size: 1.1rem;
  }

  #home .btn {
    padding: 0.65rem 1rem !important;
  }

  #home .card-body,
  #journey article.card,
  #projects a.card,
  #contact .card {
    padding: 1rem !important;
  }

  #about,
  #journey,
  #projects,
  #contact {
    padding-top: 2.25rem !important;
    padding-bottom: 2.25rem !important;
  }

  #journey {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  #about h2,
  #journey h2,
  #projects h2,
  #contact h2 {
    font-size: clamp(1.65rem, 6vw, 2.25rem) !important;
  }

  #journey .row.mb-5 {
    margin-bottom: 1.5rem !important;
  }

  #contact .card .mt-4 {
    margin-top: 0.75rem !important;
  }

  #contact .card a {
    overflow-wrap: anywhere;
  }

  footer {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }

  footer .container {
    gap: 0.75rem !important;
    text-align: center;
  }
}