::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-primary-inv);
  border-radius: 20px;
}

::-webkit-scrollbar-thumb {
  background-color: var(--color-secondary);
  border-radius: 20px;
  border: 2px solid var(--bg-primary-inv);
}

::-webkit-input-placeholder {
  color: var(--text-secondary-1);
}

::-moz-placeholder {
  color: var(--text-secondary-1);
}

::placeholder {
  color: var(--text-secondary-1);
}

html {
  font-size: 16px;
  scroll-padding-top: 100px;
}

body {
  background-color: var(--bg-primary);
  font-family: var(--font-body);
  color: var(--text-primary-inv);
}

a {
  color: var(--text-primary-inv);
  transition: color 0.2s;
}

a:hover {
  color: var(--text-secondary-1);
}

section {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

@media (max-width: 991px) {
  section {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }
}

@media (max-width: 480px) {
  section {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
}

section.py--sm {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

section.pt--sm {
  padding-top: 2rem;
}

section.pb--sm {
  padding-bottom: 2rem;
}

@media (max-width: 480px) {
  section.py--sm {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }

  section.pt--sm {
    padding-top: 1.5rem;
  }

  section.pb--sm {
    padding-bottom: 1.5rem;
  }
}

section.py--xs {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

section.pt--xs {
  padding-top: 1.25rem;
}

section.pb--xs {
  padding-bottom: 1.25rem;
}

@media (max-width: 480px) {
  section.py--xs {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  section.pt--xs {
    padding-top: 1rem;
  }

  section.pb--xs {
    padding-bottom: 1rem;
  }
}

iconify-icon {
  display: inline-block;
}