:root {
  --sidebar: 22rem;
}

html {
  scroll-behavior: smooth;
}

body {
  scrollbar-color: var(--g2) transparent;
}

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

::-webkit-scrollbar-track {
  background-color: transparent;
}

::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background-color: var(--g2);
}

.font-semibold-active.active {
  font-weight: 600;
}

.underline-h:hover {
  text-decoration: underline;
}

.indicator {
  height: 4px;
}

.max-width-content {
  max-width: 53.125rem;
}

.two-column {
  /* Height: Header | Content */
  grid-template-rows: 3rem 1fr;
  /* Width: Sidebar | Content */
  grid-template-columns: 18.554rem 1fr;
}

.icon {
  width: 1.1rem;
  height: 1.1rem;
}

.discord-icon {
  width: 1.3rem;
  height: 1.3rem;
}

.logo {
  width: 8rem;
}

.logo,
.h-logo {
  height: 1.75rem;
}

.left-sidebar {
  /* Hide Sidebar off screen in mobile */
  left: calc(var(--sidebar) * -1);
  z-index: 1;
}

.table-fixed {
  table-layout: fixed;
}

.border-collapse {
  border-collapse: collapse;
}

.resize-vertical {
  resize: vertical;
}

.open,
.transition-x {
  transition: transform 100ms cubic-bezier(0.23, 1, 0.320, 1);
}

.open,
.translate-x-sidebar {
  transform: translateX(var(--sidebar));
}

.transition-fill {
  transition: fill 2s ease-out;
}

/* Sidebar group toggling */
label.sidebar-group-title {
  color: var(--p1);
}

label.sidebar-group-title:before {
  font-size: .8rem;
  color: var(--g6);
  content: "\25B6";
}

label.sidebar-group-title+ul {
  height: 0;
  overflow: hidden;
  padding-left: .7rem;
}

@media only screen and (min-width:48em) {

  .open,
  .transition-x {
    transition: none;
  }

  .open,
  .translate-x-sidebar {
    transform: translateX(0);
  }

  .resize-none-lg {
    resize: none;
  }
}

li>ul.mb1 {
  margin-bottom: 0;
}

li>ol.mb1 {
  margin-bottom: 0;
}

details>summary {
  list-style: none;
}

details>summary::-webkit-details-marker {
  display: none;
}

details summary .plus-icon,
details[open] summary .minus-icon {
  display: inline;
}

details[open] summary .plus-icon,
details summary .minus-icon {
  display: none;
}

main {
  display: flex;
}

.right-sidebar {
  display: block;
  font-size: .9rem;
  min-width: 16rem;
}

@media only screen and (max-width:80rem) {
  main {
    display: block;
  }

  .right-sidebar {
    display: none;
  }
}

.right-sidebar a {
  text-decoration: none;
}

.right-sidebar a.active,
.right-sidebar a.active code {
  font-weight: 700;
  color: var(--g10);
}

nav.toc {
  padding-left: 0.5rem;
}

nav.toc ol {
  list-style: none;
}

nav.toc ol li {
  margin-left: 0.5rem;
}

nav.toc li a {
  color: var(--p1);
  font-weight: 500;
}

nav.toc li a:hover {
  color: var(--h1);
}

.navButton {
  border: 1px solid transparent;
  border-radius: 99em;
  padding-block: 0.25em;
}

.navButton.active {
  background-color: hsl(0deg 0% 40%);
}

.navButton:not(.active):hover {
  border-color: hsl(0deg 0% 80%);
}