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


@layer components {
  .fade {
      animation-name: fade;
      animation-duration: 1.5s;
  }

  @keyframes fade {
    from {opacity: .4} 
    to {opacity: 1}
  }

  .active {
    @apply bg-yellow-600;
  }

  .footer-links {
    @apply no-underline text-gray-300 text-[14px] font-normal block hover:underline;
  }

  /* Hide scrollbar for Chrome, Safari, and Opera */
  .hide-scrollbar::-webkit-scrollbar {
    display: none; /* Safari and Chrome */
  }

  /* Hide scrollbar for IE and Edge */
  .hide-scrollbar {
    -ms-overflow-style: none;  /* IE and Edge */
  }

  /* Hide scrollbar for Firefox */
  .hide-scrollbar {
    scrollbar-width: none;      /* Firefox */
  }

  @media (max-width: 1024px) {
    #body-overlay {
      width: 100vw;
      height: 100vh;
      display: none;
      position: fixed;
      z-index: 3;
      top: 0;
      overflow: hidden;
      background: rgba(0, 0, 0, 0.5);
    }
  }

  @media screen and (max-width: 490px) {
    .grid-col-1 {
      @apply grid-cols-1 px-8;
    }
  }

  @media screen and (max-width: 350px) {
    .w-490-full {
      width: 100% !important;
    }
  }
}

@layer utilities {
  .slide {
      display: none;
  }

  .b-bottom-slate {
    @apply border-b border-slate-600;
  }

  .text-sm-medium {
    @apply text-sm font-medium;
  }

  .btn {
    @apply border-none outline-none px-4 py-2 w-full rounded-md duration-200;
  }

  .btn-warning {
    @apply bg-yellow-500 hover:bg-yellow-400;
  }
  .styled-scrollbar::-webkit-scrollbar {
        width: 10px;
  }

  .styled-scrollbar::-webkit-scrollbar-track {
      background: rgb(77, 74, 74);
      border-radius: 5px;
  }

  .styled-scrollbar::-webkit-scrollbar-thumb {
      background: #ffffff;
      border-radius: 5px;
  }

  /* Firefox */
  .styled-scrollbar {
      scrollbar-width: thin;
      scrollbar-color: #ffffff rgb(77, 74, 74);
  }

  .styled-scrollbar::-ms-scrollbar {
      width: 10px;
      background: rgb(77, 74, 74);
  }

}