@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%; } } } .my-masonry-grid { display: -webkit-box; /* Not needed if autoprefixing */ display: -ms-flexbox; /* Not needed if autoprefixing */ display: flex; margin-left: -30px; /* gutter size offset */ width: auto; } .my-masonry-grid_column { padding-left: 30px; /* gutter size */ background-clip: padding-box; } /* Style your items */ .my-masonry-grid_column > div { /* change div to reference your elements you put in */ background: grey; margin-bottom: 30px; } .animate-in { animation: animateIn 0.3s ease 0.15s both; } @keyframes animateIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } button:disabled { filter: grayscale(50%); } :root { --color-primary: #201240; --color-primary-light: #403260; --color-primary-dark: #100120; --color-secondary: #4F3D70; --color-secondary-light: #6F5D90; --color-secondary-dark: #2F1D50; --color-error: #862117; --color-error-light: #C44C4C; --color-error-dark: #5C0D0D; --color-success: #00C9A6; --color-success-light: #20E9C6; --color-success-dark: #00A986; --color-warning: #E17558; --color-warning-light: #E39578; --color-warning-dark: #C15538; --color-info: #222140; --color-info-light: #424260; --color-info-dark: #020120; }