@tailwind base;
@layer utilities {

    .animate-gradient {
      background-size: 300%;
      -webkit-animation: animatedgradient 6s ease infinite alternate;
      -moz-animation: animatedgradient 6s ease infinite alternate;
      animation: animatedgradient 6s ease infinite alternate;
    }

    @keyframes animatedgradient {
      0% {
        background-position: 0% 50%;
      }
      50% {
        background-position: 100% 50%;
      }
      100% {
        background-position: 0% 50%;
      }
    }


    /* 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 */
    }

    .sideli {
      @apply text-xl ml-0;
    }

    .sidemenu-style {
      @apply p-4 w-40 min-h-full bg-neutral-800 text-base-content overflow-hidden;
    }

    .footer-style {
      @apply ml-0 pl-0 pb-4 pt-4 bg-neutral-800 justify-between pr-16;
    }

    .mobile-menu-link {
      @apply text-gray-100 hover:text-orange-300 flex md:hidden;
    }

    .sidebar-link {
      @apply text-white hover:text-orange-300 hover:bg-neutral-700;
    }

    .titlebar-link {
      @apply text-gray-100 hover:text-orange-300 flex md:hidden;
    }

    .website-title {
      @apply text-3xl uppercase font-bold bg-gradient-to-r from-orange-300 via-red-300 to-orange-200 text-transparent bg-clip-text animate-gradient
    }
}

@layer base {

  .inline-picture {
    @apply w-24 inline;
  }

  a {
    @apply text-orange-300;
  }

  p {
    @apply text-xl text-white;
  }

  li {
    @apply list-disc text-xl text-white 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
  }
  blockquote {
    @apply bg-gray-900 py-4 px-4 mx-4 my-4 border-l-4 text-xl text-white
  }
}
@tailwind components;
@tailwind utilities;