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


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

    h2 {
        @apply text-gray-150 dark:text-gray-850;
    }

    h3 {
        @apply text-gray-250 dark:text-gray-750;
    }

    h4 {
        @apply text-gray-350 dark:text-gray-650;
    }

    h5 {
        @apply text-white;
    }

    p {
        @apply text-gray-550 dark:text-gray-450;
    }
}

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

    .social-icon-in {
        animation: 0.2s social-icon-in-anim ease-out forwards;
    }

    .social-icon-out {
        animation: 0.2s social-icon-out-anim ease-in forwards;
    }

    .slider {
        position: absolute;
        left: -50%;
        animation-name: slide;
        animation-duration: 18s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
        animation-delay: var(--delay);
    }

    .focus-camera {
        animation-name: blur-anim;
        animation-duration: 8s;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in-out;
        animation-direction: alternate;
    }

    @media (width <= 1024px)  {
        .slider {
            left: -150%;
            animation-name: slide-mobile;
        }
    }

    @keyframes blur-anim {
        from {
            filter: blur(0px);
        }

        to {
            filter: blur(3px);
        }
    }

    @keyframes social-icon-in-anim {
        from {
            background-color: inherit;
            transform: scale(1);
        }
        to {
            background-color: rgb(234 88 12);
            transform: scale(0.9);
        }
    }

    @keyframes social-icon-out-anim {
        from {
            background-color: rgb(234 88 12);
            transform: scale(0.9);
        }
        to {
            background-color: inherit;
            transform: scale(1);
        }
    }

    @keyframes slide {
        from {
            left: -25%;
        }
        to {
            left: 100%;
        }
    }

    @keyframes slide-mobile {
        from {
            left: -150%;
        }
        to {
            left: 150%;
        }
    }
}