@tailwind base;
@tailwind components;
@tailwind utilities;
 @media (max-width: 640px) {
            .mobile-menu-scroll {
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
                scrollbar-width: none;
                -ms-overflow-style: none;
            }
            .mobile-menu-scroll::-webkit-scrollbar {
                display: none;
            }
        }

        @keyframes fade-in {
            from { opacity: 0; }
        }

        @keyframes fade-out {
            to { opacity: 0; }
        }

        @keyframes slide-from-right {
            from { transform: translateX(90px); }
        }

        @keyframes slide-to-left {
            to { transform: translateX(-90px); }
        }

        ::view-transition-old(slide-it) {
            animation: 180ms cubic-bezier(0.4, 0, 1, 1) both fade-out;

        }
        ::view-transition-new(slide-it) {
            animation: 420ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in;

        }

        .mobile-transition {
            view-transition-name: fade-it;

        }
            .htmx-indicator{
        opacity:0;
        transition: opacity 500ms ease-in;
    }
    .htmx-request .htmx-indicator{
        opacity:1;
    }
    .htmx-request.htmx-indicator{
        opacity:1;
    }