/* Write your global styles here, in PostCSS syntax */
@tailwind base;



@layer utilities {
      /* Hide scrollbar for Chrome, Safari and Opera */
      .no-scrollbar::-webkit-scrollbar {
          display: none;
      }
     /* Hide scrollbar for IE, Edge and Firefox */
      .no-scrollbar {
          -ms-overflow-style: none;  /* IE and Edge */
          scrollbar-width: none;  /* Firefox */
    }
  }

@layer base {
  .inline-picture {
      @apply w-24 inline;
  }
  a {
    @apply text-orange-300;
  }
  p {
    @apply text-xl;
  }
  li {
    @apply list-disc text-xl py-1 ml-8;
  }
  h1 {
    @apply text-3xl border-b-2 dark:border-b-white border-b-gray-400 py-2 font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-orange-300 to-orange-200;
  }
  h2 {
    @apply text-2xl border-b-2 dark:border-b-white border-b-gray-400 py-2 font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-orange-300 to-orange-200 mb-4 mt-4;
  }
  h3 {
    @apply text-2xl bg-white text-right underline py-2 font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-orange-200 to-orange-300 pr-4;
  }
  h4 {
    @apply text-2xl text-right underline py-2 font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-orange-200 to-orange-300 pr-4;
  }
  pre {
    @apply bg-base-300 border-white border-l-2 my-4 px-2 py-2 pl-4
    overflow-x-scroll no-scrollbar
  }
  ul {
    @apply my-2
  }
}
@tailwind components;
@tailwind utilities;
