/* Inherits styles from landing page */

.dotted {
  background-image: url("../../../../docs/website/assets/halftone.png");
  background-size: 158%;
  background-repeat: repeat-y;
  background-position: center center;
  width: 190px;
  height: 100vh;
  position: fixed;
  left: 0;
  opacity: 0.1;
  top: 0;
  z-index: -5;
  pointer-events: none;
}

.dotted-right {
  background-image: url("../../../../docs/website/assets/halftone.png");
  background-size: 158%;
  transform: rotate(180deg);
  background-repeat: repeat-y;
  background-position: center center;
  width: 190px;
  height: 100vh;
  position: fixed;
  right: 0;
  opacity: 0.1;
  top: 0;
  z-index: -5;
  pointer-events: none;
}

@media (max-width: 576px) {
  .dotted,
  .dotted-right {
    opacity: 0.05;
  }

  .dotted {
    left: -80px;
  }

  .dotted-right {
    right: -80px;
  }
}

.doc {
  color: var(--navbar-font-color);
}

.doc h1,
.doc h2,
.doc h3,
.doc h4,
.doc h5,
.doc h6 {
  color: var(--navbar-font-color);
}

.toc.sidebar .toc-menu {
  color: var(--navbar-font-color);
}

.breadcrumbs li {
  color: var(--color-white-50);
}

.toc .toc-menu a.is-active {
  color: var(--color-white-50);
}

.nav-text {
  color: var(--color-white-50);
}
