@media (max-width: 576px) {
  .container,
  .container-fluid {
    --bs-gutter-x: 3rem;
  }
}

a:not(.btn) {
  text-underline-offset: 0.3125rem;
}

h1, h2 {
  font-family: var(--font-serif), Georgia, serif;
  font-weight: 400;
  color: var(--h1-h2-color);
}

[data-bs-theme="dark"] {
  h1, h2 {
    color: #fff;
  }
}

h1, .h1 {
  font-size: 2rem;
  line-height: 1.1;
  margin-bottom: 1.5rem;
}

h2, .h2 {
  font-size: 1.375rem;
  margin-bottom: 1.25rem;
}

h3, .h3 {
  font-size: 1.125rem;
  margin-bottom: 1.25rem;
}

h4, .h4 {
  font-size: 1rem;
}

h5, .h5 {
  font-size: 0.875rem;
}

@media (min-width: 768px) {
  h1, .h1 {
    font-size: 3rem;
    margin-bottom: 1.875rem;
  }

  h2, .h2 {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
  }

  h3, .h3 {
    font-size: 1.25rem;
  }

  h4, .h4 {
    font-size: 1.125rem;
  }

  h5, .h5 {
    font-size: 1rem;
  }
}

@media (min-width: 1400px) {
  h1, .h1 {
    font-size: 3.75rem;
  }

  .card h1,
  .card .h1 {
    font-size: 3rem;
  }

  h2, .h2 {
    font-size: 2.375rem;
  }

  h3, .h3 {
    font-size: 1.75rem;
  }

  h4, .h4 {
    font-size: 1.5rem;
  }

  h5, .h5 {
    font-size: 1.25rem;
  }
}

section {
  scroll-margin-top: 6.25rem;
}

@media (min-width: 768px) {
  section {
    scroll-margin-top: 7.5rem;
  }
}

@media (min-width: 1400px) {
  section {
    scroll-margin-top: 8.125rem;
  }
}

.section-mb-1 {
  margin-bottom: 5rem !important;
}

.section-mb-2 {
  margin-bottom: 2.5rem !important;
}

.section-mb-3 {
  margin-bottom: 2rem !important;
}

@media (min-width: 1400px) {
  .section-mb-1 {
    margin-bottom: 6.25rem !important;
  }
  .section-mb-2 {
    margin-bottom: 3.75rem !important;
  }
  .section-mb-3 {
    margin-bottom: 2.5rem !important;
  }
}

.page-hero {
  background-color: var(--addgene-light-gray);
  padding-top: 3.125rem;
  padding-bottom: 3.125rem;
  margin-bottom: 3.125rem;
}

[data-bs-theme="dark"] {
  .page-hero {
    background-color: var(--addgene-navy);
  }
}

@media (min-width: 768px) {
  .page-hero {
    padding-top: 3.75rem;
    padding-bottom: 3.75rem;
    margin-bottom: 3.75rem;
  }

  .page-hero .tagline {
    width: 76%;
    margin: auto;
  }
}

@media (min-width: 1400px) {
  .page-hero {
    padding-top: 4.375rem;
    padding-bottom: 4.375rem;
    margin-bottom: 4.375rem;
  }

  .page-hero .tagline {
    width: 60%;
    font-size: 1.25rem;
  }
}

.dropdown-toggle::after {
  display: inline-block;
  width: 1em;
  margin-left: 0.255em;
  vertical-align: middle;
  content: "";
  aspect-ratio: 15 / 8;
  border: none;
  background-color: currentColor;
  mask: url("data:image/svg+xml,%3Csvg width='15' height='8' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cpath d='m12.464.39-4.7 4.188a.4.4 0 0 1-.527 0L2.529.39a1.592 1.592 0 0 0-2.091 0 1.224 1.224 0 0 0 0 1.87L6.45 7.616c.578.515 1.52.515 2.098 0l6.014-5.358a1.224 1.224 0 0 0 0-1.87c-.579-.515-1.52-.515-2.099 0z'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
}

.dropdown-item[aria-checked="true"]::after {
  content: '';
  aspect-ratio: 1;
  width: 1em;
  display: inline-block;
  margin: 0 0.2em 0.2em 0;
  vertical-align: middle;
  background-color: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.dropdown-item.active, .dropdown-item:active {
  background-color: var(--bs-primary);
}

.offcanvas.offcanvas-end {
  border-left: none;
}

.table > :not(caption) > * > * {
    padding: 0.75rem 0.75rem;
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] {
  .table {
    thead, tbody, tfoot, tr, td, th {
        border-color: var(--bs-border-color-translucent);
    }
  }
}

#main-content:not(:has(.page-hero)) {
  padding-top: 4rem;
}

@media (min-width: 1400px) {
  #main-content:not(:has(.page-hero)) {
    padding-top: 5rem;
  }
}

pre {
	user-select: all;
	white-space: pre-wrap;
	word-break: break-word;
	padding: 1rem;
	background-color: var(--bs-light);
	border: 1px solid var(--bs-border-color);
	border-radius: 0.25rem;
}

[data-bs-theme="dark"] {
  pre {
    background-color: unset;
    border: 1px solid var(--bs-border-color-translucent);
  }
}

.mb-a-1 {
  margin-bottom: 2rem !important;
}

.title-case {
  text-transform: capitalize;
}