| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap'); |
|
|
| *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } |
|
|
| body { |
| font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; |
| background: #f5f7fa; |
| color: #0f172a; |
| height: 100vh; |
| overflow: hidden; |
| -webkit-font-smoothing: antialiased; |
| } |
|
|
| #root { width: 100%; height: 100vh; } |
|
|
| button { font-family: inherit; } |
| input, textarea { font-family: inherit; } |
|
|
| |
| *::-webkit-scrollbar { width: 9px; height: 9px; } |
| *::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; } |
| *::-webkit-scrollbar-thumb:hover { background: #94a3b8; } |
| *::-webkit-scrollbar-track { background: transparent; } |
|
|
| |
| @keyframes pop { 0% { opacity: 0; transform: scale(.9) } 100% { opacity: 1; transform: scale(1) } } |
| @keyframes popBig { 0% { opacity: 0; transform: scale(.4) } 60% { transform: scale(1.12) } 100% { opacity: 1; transform: scale(1) } } |
| @keyframes floatUp { |
| 0% { opacity: 0; transform: translate(-50%, 6px) scale(.8); } |
| 15% { opacity: 1; transform: translate(-50%, -2px) scale(1.05); } |
| 100% { opacity: 0; transform: translate(-50%, -42px) scale(1); } |
| } |
| @keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } } |
| @keyframes slideUp { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: translateY(0) } } |
| @keyframes bounce { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-5px) } } |
| @keyframes spin { to { transform: rotate(360deg) } } |
| @keyframes confettiFall { |
| 0% { opacity: 1; transform: translateY(-10vh) rotate(0deg); } |
| 100% { opacity: 0; transform: translateY(90vh) rotate(720deg); } |
| } |
| @keyframes badgeSpin { |
| 0% { transform: rotate(-12deg) scale(.4); opacity: 0; } |
| 55% { transform: rotate(6deg) scale(1.15); opacity: 1; } |
| 100% { transform: rotate(0deg) scale(1); opacity: 1; } |
| } |
|
|
| .dm-fade-in { animation: fadeIn .3s ease both; } |
| .dm-slide-up { animation: slideUp .35s ease both; } |
|
|
