@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

body {
    @apply bg-white dark:bg-[#0f0f10] text-gray-900 dark:text-white;
}

input,
textarea {
    @apply bg-gray-100 dark:bg-[#ababab33] text-gray-900 dark:text-white;
}

/* For Webkit browsers (Chrome, Safari, Edge) */
*::-webkit-scrollbar {
    display: none;
    /* Hide scrollbar for Webkit browsers */
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}

/* Custom animations */
@keyframes float {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-1px);
    }

    100% {
        transform: translateY(0px);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.animate-float {
    animation: float 3s ease-in-out infinite;
}

.animate-fadeIn {
    animation: fadeIn 1s ease-out forwards;
}

.animate-gradient {
    background-size: 200% auto;
    animation: gradient 3s linear infinite;
}

@keyframes spin-slow {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes spin-slow-reverse {
    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }
}

.animate-spin-slow {
    animation: spin-slow 8s linear infinite;
}

.animate-spin-slow-reverse {
    animation: spin-slow-reverse 8s linear infinite;
}