:root {
  --primary-color: #7b7cd2;
}

.navbar {
  --bs-primary-rgb: 123, 124, 210;
}

.navbar a.dropdown-item:hover,
.navbar-dark .navbar-nav .active > .nav-link {
  background-color: var(--primary-color);
}

#navbar .navbar-nav .nav-item > .nav-link {
  color: rgba(255, 255, 255, 0.8);

  &:hover {
    background-color: var(--primary-color);
    color: #fff;
  }
}

.navbar-brand {
  --bs-navbar-brand-color: #fff;

  &:hover {
    --bs-navbar-brand-hover-color: rgba(255, 255, 255, 0.8);
  }
}

a {
  color: var(--primary-color);
}

a.nav-link,
.home {
  color: hsl(0, 0%, 80%);

  &:hover {
    color: hsl(0, 0%, 100%);
  }
}

a:hover {
  color: #2c2b2b;
}

button.btn.btn-primary.btn-copy-ex {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

.home {
  display: none;
  left: 0px;
  position: absolute;
  padding: 8px 30px;

  @media (min-width: 1250px) {
    display: initial;
  }
}

#version-switcher {
  margin-inline-start: 0.5rem;
  margin-inline-end: auto;

  @media (min-width: 992px) {
    margin-inline-end: 2rem;
  }

  & > a {
    background-color: hsl(239.3, 40.2%, 55.3%);
    color: rgba(255, 255, 255, 0.8);
    padding: 0.25rem 1rem;
    border-radius: 1rem;

    &:hover {
      color: white;
    }
  }
}

summary:has(h3#past) {
  & > * {
    display: inline;
  }

  &::marker,
  &::-webkit-details-marker {
    /* an equivalent of Bootstrap's h3 that's within the summary */
    font-size: calc(1.3rem + 0.6vw);
  }
}