:root {
  --primary: #BB86FC;
  --secondary: #03dac5;
  --vp-c-brand: #10b981;
  --vp-c-accent: #BB86FC;
}

.VPNavBar.has-sidebar .content, .VPNav {
  background-color: rgba(var(--vp-c-bg), 0.75);
  backdrop-filter: blur(1px);
}

.examples .VPDoc {
  @apply !px-8 !py-6 md:!px-12 lg:!px-24;
}

.examples .content-container {
  @apply max-w-full;
}

.examples .aside {
  @apply !hidden;
}

html, body {
  @apply scrollbar scrollbar-thin scrollbar-thumb-rounded scrollbar-thumb-green-500 scrollbar-track-black;
}

h1 {
  @apply text-xl lg:text-4xl mb-4 font-bold;
}

h2 {
  @apply text-lg lg:text-2xl mb-4 font-semibold;
}

p {
  line-height: inherit;
  margin: revert;
}

ul li {
  @apply mt-2;
}

.docs-button {
  @apply z-1 shadow-lg transition-colors duration-200 text-white font-semibold text-lg mt-4 px-5 py-3 rounded-lg bg-green-500;
}

.slider {
  --color: red;
  @apply bg-gray-200 w-full h-[10px] outline-none rounded-full;
  -webkit-appearance: none;
  appearance: none;

  &::-moz-range-thumb {
     @apply w-[15px] h-[15px] cursor-pointer border-1 border-solid border-white rounded-full;
     -webkit-appearance: none;
     background: var(--color);
   }
  &::-webkit-slider-thumb {
     @apply w-[15px] h-[15px] cursor-pointer border-1 border-solid border-white rounded-full;
     -webkit-appearance: none;
     background: var(--color);
   }
}

.vue-repl pre, .vue-repl pre[class*=language-] {
  padding: unset;
  margin: unset;
  border-radius: unset;
  line-height: unset;
}