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

html, body {height: 100%;}

.changelog {
  @apply py-8 space-y-4;

  h1 {
    @apply hidden;
  }

  h2 {
    @apply text-3xl text-whisper-900;
  }

  ul {
    @apply list-disc pl-5 pb-8;
  }

  a, a:visited {
    @apply text-teal-500;
  }

  a:hover {
    @apply text-teal-800;
  }
}

.markdown {
  @apply space-y-4;

  h1 {
    @apply text-5xl tracking-tight font-extrabold sm:leading-none lg:text-5xl xl:text-6xl;
  }

  h2 {
    @apply mt-16 tracking-tight font-extrabold sm:leading-none text-3xl xl:text-4xl !important;
  }

  h3 {
    @apply tracking-tight font-extrabold sm:leading-none text-xl xl:text-2xl;
  }

  h4 {
    @apply tracking-tight font-extrabold sm:leading-none text-lg xl:text-xl;
  }

  img {
    @apply mx-auto my-8;
  }

  p {
    @apply my-4;
  }

  ul {
    @apply list-disc pl-5 my-4;
  }

  a, a:visited {
    @apply text-teal-500;
  }

  a:hover {
    @apply text-teal-800;
  }

  blockquote {
    @apply py-2 px-4 my-4 border-l-4 border-teal-500;
  }

  blockquote.important {
    @apply border-red-500;
  }

  code {
    @apply text-rose-500;
  }

  pre {
    @apply p-4 my-4 bg-vulcan-200;
  }
}