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


@layer base {
    h1 {
        @apply text-gray-50;
    }

    h2 {
        @apply text-gray-150;
    }

    h3 {
        @apply text-gray-250;
    }

    h4 {
        @apply text-gray-350;
    }

    h5 {
        @apply text-white;
    }

    p {
        @apply text-gray-550;
    }
}

@layer components {
    .container {
        @apply bg-gray-800;
    }

    .sub-container {
        @apply bg-gray-900;
    }

    .icon {
        @apply h-[25px] invert dark:brightness-100 dark:invert-0;
    }

}

@layer utilities {
    .bg-radial {
        background: radial-gradient(hsla(0, 0%, 5%, 0.568), hsla(0, 0%, 25%, 0));
    }

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