Spaces:
Sleeping
Sleeping
| :root { | |
| --primary: #6366f1; | |
| --primary-glow: rgba(99, 102, 241, 0.4); | |
| --bg-dark: #070b14; | |
| --bg-card: rgba(15, 23, 42, 0.7); | |
| --text-main: #f8fafc; | |
| --text-muted: #64748b; | |
| --border: rgba(255, 255, 255, 0.08); | |
| --anomaly: #f43f5e; | |
| --normal: #10b981; | |
| --warning: #fbbf24; | |
| --font-title: 'Outfit', sans-serif; | |
| --font-body: 'Inter', sans-serif; | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: var(--font-body); | |
| background-color: var(--bg-dark); | |
| color: var(--text-main); | |
| overflow: hidden; | |
| height: 100vh; | |
| width: 100vw; | |
| } | |
| /* Background Animated Blobs */ | |
| .bg-blobs { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: -1; | |
| overflow: hidden; | |
| background: radial-gradient(circle at 50% 50%, #0f172a 0%, #070b14 100%); | |
| } | |
| .blob { | |
| position: absolute; | |
| width: 400px; | |
| height: 400px; | |
| background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(192, 132, 252, 0.15) 100%); | |
| filter: blur(80px); | |
| border-radius: 50%; | |
| animation: float 20s infinite alternate ease-in-out; | |
| } | |
| .blob-1 { | |
| top: -100px; | |
| right: -100px; | |
| background-color: rgba(99, 102, 241, 0.1); | |
| } | |
| .blob-2 { | |
| bottom: -150px; | |
| left: -100px; | |
| background-color: rgba(167, 139, 250, 0.1); | |
| animation-delay: -5s; | |
| } | |
| .blob-3 { | |
| top: 40%; | |
| left: 30%; | |
| width: 300px; | |
| height: 300px; | |
| background-color: rgba(79, 70, 229, 0.05); | |
| animation-delay: -10s; | |
| } | |
| @keyframes float { | |
| 0% { | |
| transform: translate(0, 0) scale(1); | |
| } | |
| 50% { | |
| transform: translate(100px, 50px) scale(1.1); | |
| } | |
| 100% { | |
| transform: translate(-50px, 100px) scale(0.9); | |
| } | |
| } | |
| .glass { | |
| background: var(--bg-card); | |
| backdrop-filter: blur(20px) saturate(180%); | |
| -webkit-backdrop-filter: blur(20px) saturate(180%); | |
| border: 1px solid var(--border); | |
| border-radius: 20px; | |
| } | |
| .gradient-text { | |
| font-family: var(--font-title); | |
| background: linear-gradient(135deg, #fff 0%, #94a3b8 100%); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| font-weight: 800; | |
| letter-spacing: -0.02em; | |
| } | |
| /* Custom Scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 4px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: transparent; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: rgba(255, 255, 255, 0.1); | |
| border-radius: 10px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: rgba(255, 255, 255, 0.2); | |
| } | |
| h1, | |
| h2, | |
| h3 { | |
| font-family: var(--font-title); | |
| } | |
| /* Markdown Content Styling */ | |
| .markdown-content h1, | |
| .markdown-content h2, | |
| .markdown-content h3 { | |
| margin: 12px 0 8px 0; | |
| color: var(--text-main); | |
| font-size: 1.1rem; | |
| } | |
| .markdown-content p { | |
| margin-bottom: 8px; | |
| line-height: 1.5; | |
| } | |
| .markdown-content table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| margin: 12px 0; | |
| border-radius: 8px; | |
| overflow: hidden; | |
| font-size: 0.85rem; | |
| background: rgba(255, 255, 255, 0.03); | |
| } | |
| .markdown-content th { | |
| background: rgba(99, 102, 241, 0.2); | |
| color: #fff; | |
| padding: 8px 12px; | |
| text-align: left; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .markdown-content td { | |
| padding: 8px 12px; | |
| border-bottom: 1px solid var(--border); | |
| color: #94a3b8; | |
| } | |
| .markdown-content tr:last-child td { | |
| border-bottom: none; | |
| } | |
| .markdown-content ul, | |
| .markdown-content ol { | |
| padding-left: 1.5rem; | |
| margin-bottom: 8px; | |
| } | |
| .markdown-content li { | |
| margin-bottom: 4px; | |
| } |