style.css

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap");

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

@layer components {

    ::-webkit-scrollbar {
        @apply w-0 border-0;
    }

    ::-webkit-scrollbar-thumb {
        @apply bg-transparent;
    }

    .cell {
        @apply h-[calc(100%_/_9)] w-[calc(100%_/_9)] text-xl sm:text-3xl font-bold flex justify-center items-center text-gray-900 focus:outline-none bg-white border border-gray-400 hover:bg-gray-100 hover:text-blue-700 cursor-pointer;
    }

    .input-cell {
        @apply bg-amber-300 hover:bg-amber-300 hover:text-black;
    }

    .number-button {
        @apply px-3 py-1 sm:px-5 sm:py-3 text-xl sm:text-3xl font-bold text-blue-600 focus:outline-none bg-white rounded-lg text-center border border-gray-200 hover:bg-amber-300 hover:text-gray-900 transition-all duration-500 ease-in-out hover:scale-110 cursor-pointer  disabled:opacity-50 disabled:pointer-events-none disabled:cursor-not-allowed;
    }

    .number-button-selected {
        @apply text-black bg-green-300 hover:bg-green-300 scale-110;
    }

    .action-button {
        @apply py-3 px-6 m-2 flex justify-center items-center text-lg sm:text-2xl font-medium rounded-3xl text-gray-900 bg-gradient-to-r from-amber-300 to-orange-300  hover:transition-all duration-700 ease-in-out hover:scale-110 disabled:opacity-50 disabled:cursor-not-allowed;
    }

    .tooltip-element {
        @apply absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm opacity-0 transition-opacity delay-500;
    }
}