html {
  height: 100%;
  font-size: 14px;
}

body {
  @apply flex flex-col text-neutral-700 font-default;
  /* Force scrollbars to prevent content jumping */
  @apply overflow-y-scroll;
  height: 100%;
}

html.dark body {
  @apply bg-neutral-800 text-neutral-200;
}

.font-heading {
  @apply font-sans font-bold;
}
.link {
  @apply text-link-600 hover:(text-link-800 underline);
}
.link:visited {
  @apply text-link-800;
}

html.dark .link {
  @apply text-link-200 hover:(text-link-100 underline);
}

html.dark .link:visited {
  @apply text-link-300;
}


::selection {
  @apply bg-neutral-600 hover:bg-neutral-600 text-white;
}
::-moz-selection {
  @apply bg-neutral-600 hover:bg-neutral-600 text-white;
}

/* Firefox */
*  {
  scrollbar-color: #CCC #EEE;
}
html.dark *  {
  scrollbar-color: #111 #333;
}

/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  @apply w-3;
}
*::-webkit-scrollbar-track {
  @apply mr-2 border-l;
  @apply bg-neutral-200 border-neutral-300;
  @apply dark:(bg-neutral-700 border-neutral-800);
}

*::-webkit-scrollbar-thumb {
  @apply bg-neutral-300 rounded-full shadow-inner;
  @apply dark:(bg-neutral-500);
}

*:not(.prose) {
  .h0 {
    @apply font-heading text-3xl md:text-5xl;
  }

  h1,
  .h1 {
    @apply font-heading text-2xl md:text-4xl;
  }

  h2,
  .h2 {
    @apply font-heading text-xl md:text-3xl;
  }

  h3,
  .h3 {
    @apply font-heading text-lg md:text-2xl;
  }

  h4,
  .h4 {
    @apply font-heading text-base md:text-lg;
  }

  .p {
    @apply font-default;
  }
}