$accentColor = #e2627f
$accentColor = #e67891
$navBarColor = white
$scrollBarSize = 8px
$pageWidth = 900px

.navbar {
  background-color: rgb(111, 41, 67);
  background-image: linear-gradient(120deg, rgb(217, 131, 166), rgb(77, 17, 79));
  color: $navBarColor;
  border: none;

  .logo {
    min-width: auto;
  }

  .site-name {
    color: $navBarColor;
  }
}

.token.string {
  color: $accentColor;
}

@media (min-width: 719px) {
  .nav-links a:hover,
  .nav-links a.router-link-active {
      color: #ffeff2;
  }
}

.search-box input {
  border: 1px solid transparent;
  transition: border 0.25s;
}

.page-nav,
.page-edit,
.content:not(.custom) {
  max-width: $pageWidth;
}

.page__getting-started {
  .language-js .language-js {
    max-height: 300px;
  }
}


// Scrollbars
* {
  ::-webkit-scrollbar-track {}

  ::-webkit-scrollbar-thumb {
    background-color: alpha(black, 0.1);
  }

  ::-webkit-scrollbar {
    width: $scrollBarSize;
  }
}

.language-js {
  ::-webkit-scrollbar {
    height: $scrollBarSize;
  }

  ::-webkit-scrollbar-thumb {
    background-color: alpha(white, 0.3);
  }
}