@tailwind base; @tailwind components; @tailwind utilities; @keyframes expandFromLeft { 0% { width: 0; } 100% { width: 100%; } } /* Hide scrollbar for Chrome, Safari and Opera */ .no-scrollbar::-webkit-scrollbar { display: none; } /* Hide scrollbar for IE, Edge and Firefox */ .no-scrollbar { -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } .fade-out { animation: fadeOut 0.5s forwards; } @layer base { :root { --background: 200 20% 98%; --btn-background: 200 10% 91%; --btn-background-hover: 200 10% 89%; --foreground: 200 50% 3%; } @media (prefers-color-scheme: dark) { :root { --background: 200 50% 3%; --btn-background: 200 10% 9%; --btn-background-hover: 200 10% 12%; --foreground: 200 20% 96%; } } } .animate-in { animation: animateIn 0.3s ease 0.15s both; } @keyframes animateIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }