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

@layer base {
    html {
        scrollbar-width: thin;
        scrollbar-color: #8a58e0 transparent;
    }

    body {
        background-color: #000;
        color: #fff;
    }

    ul, ol {
        list-style: revert;
    }
}

@layer components {
    ::selection {
        background-color: #8039e2;
        color: #fff;
    }

    ::-webkit-scrollbar {
        width: 3px;
    }

    ::-webkit-scrollbar-thumb {
        background-color: #8a58e0;
        border-radius: 10px;
    }
}

@layer utilities {
    .gradient {
        color: transparent;
        background-clip: text;
        background-image: linear-gradient(to right, #800a18, #a82044, #9e4a60);
        animation: gradient 5s ease infinite
    }
    
    @keyframes gradient {
        0%, 100% {
            background-size: 200%;
            background-position: left center;
        }
    
        50% {
            background-size: 200%;
            background-position: right center;
        }
    }
}