@tailwind base;

@tailwind components;

@tailwind utilities;

@layer base {
  html {
    @apply antialiased m-0;
  }

  p {
    @apply mb-5;
  }

  body {
    color: theme('colors.black');
    background-attachment: fixed;
    background-image: url('../assets/dodad-1.svg'),
      url('../assets/dodad-2.svg'), url('../assets/dodad-3.svg');
    background-position: left 25% bottom 20%, left 12% top 50px,
      right 5% top 45%;
    background-size: auto 140px, auto 100px, auto 140px;
    background-color: theme('colors.secondary');
    background-repeat: no-repeat;
    min-height: 100%;
  }

  .markdown ul {
    @apply pl-6;
  }

  .markdown li {
    @apply pb-4;
    list-style: disc;
  }

  .markdown h1 {
    @apply text-5xl mb-6 mt-8 font-brand text-center text-yellow;

    text-shadow: 3px 2px 0px #5c5a5a;
  }

  .text-shadow {
    text-shadow: 3px 2px 0px #5c5a5a;
  }

  .text-shadow-sm {
    text-shadow: 2px 1px 0px #5c5a5a;
  }

  h2,
  h3,
  h4 {
    @apply text-3xl mb-4 mt-6 font-brand text-center text-yellow;

    text-shadow: 3px 2px 0px #5c5a5a;
  }

  a {
    @apply text-puke font-bold;

    &:hover {
      text-decoration: underline;
    }
  }

  pre:has(code) {
    box-shadow: 2px 2px 2px #5c5a5a;
  }
}
