| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background-color: #000; | |
| color: #fff; | |
| overscroll-behavior: none; | |
| } | |
| #threejs-container { | |
| position: relative; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| /* Custom scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| height: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: #0f0f0f; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: #4a4a4a; | |
| border-radius: 4px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: #5a5a5a; | |
| } | |
| /* Animation classes */ | |
| @keyframes float { | |
| 0%, 100% { | |
| transform: translateY(0); | |
| } | |
| 50% { | |
| transform: translateY(-10px); | |
| } | |
| } | |
| .float-animation { | |
| animation: float 6s ease-in-out infinite; | |
| } | |
| .glow { | |
| filter: drop-shadow(0 0 8px currentColor); | |
| } | |
| /* Responsive tweaks */ | |
| @media (max-width: 768px) { | |
| #threejs-container { | |
| height: 60vh; | |
| } | |
| } |