index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html,
  body,
  #__next {
    @apply h-full;
  }

  #__next {
    @apply flex flex-col;
  }

  #__next > main {
    @apply flex-grow flex-shrink-0;
  }

  #__next > footer {
    @apply flex-shrink-0;
  }

  body {
    @apply bg-[#131313];
    @apply text-[#ececec];
  }

  button,
  .button {
    @apply bg-gray-900;
    @apply px-3 py-1;
    @apply border border-gray-700;

    @apply hover:bg-gray-800;
    @apply active:bg-[#202020];
  }

  input[type=text] {
    @apply bg-gray-900;
    @apply px-4 py-2;
    @apply border border-gray-700;

    @apply focus:outline-none focus:border-gray-500;
    @apply caret-gray-300;
  }

  hr {
    @apply border-t border-gray-700;
  }

  a {
    @apply text-blue-400;
    @apply hover:text-blue-500;
  }

  .markdown h1 {
    @apply text-6xl;
  }

  .markdown h2 {
    @apply text-5xl;
  }

  .markdown h3 {
    @apply text-4xl;
  }

  .markdown h4 {
    @apply text-3xl;
  }

  .markdown h5 {
    @apply text-2xl;
  }

  .markdown h6 {
    @apply text-xl;
  }

  .markdown p {
    @apply mb-3;
  }

  .markdown blockquote {
    @apply pl-3;
    @apply border-l-4 border-gray-700;
  }

  .markdown code {
    @apply bg-gray-800;
    @apply p-1;
    @apply border border-gray-700;
  }

  .markdown pre code {
    @apply block;
    @apply p-3;
  }
}