/* Dark mode: follows the system setting. Every page (home, blog, /bachelor) * shares the same Tailwind utilities and inline colours, so this one stylesheet * remaps them instead of adding dark: variants to every component. It is linked * in each page so dark pages never flash light while scripts load. */ @media (prefers-color-scheme: dark) { :root { color-scheme: dark; } html, body { background-color: #0e0f11 !important; } [style*="rgb(240, 240, 238)"] { background-color: #0e0f11 !important; } [style*="rgb(237, 237, 237)"] { background-color: #1d1f23 !important; } [style*="rgba(240, 240, 238"] { background: linear-gradient(180deg, rgba(14, 15, 17, 0.45) 0%, rgba(14, 15, 17, 0.72) 50%, rgba(14, 15, 17, 0.97) 100%) !important; } .bg-white { background-color: #17191c !important; } .bg-\[\#EDEDED\], .bg-gray-100, .bg-gray-50 { background-color: #1d1f23 !important; } .bg-\[\#EDEDED\]\/40 { background-color: rgba(29, 31, 35, 0.4) !important; } .bg-gray-900 { background-color: #e5e7eb !important; color: #111827 !important; } .text-gray-900 { color: #f3f4f6 !important; } .text-gray-800 { color: #e5e7eb !important; } .text-gray-700 { color: #d1d5db !important; } .text-gray-600 { color: #b6bcc6 !important; } .text-gray-500, .text-gray-500 { color: #9aa1ab !important; } .border-gray-100, .border-gray-200, .border-gray-300 { border-color: #2b2e33 !important; } .text-blue-500, .text-blue-600 { color: #6ea8fe !important; } .bg-blue-600 { background-color: #2563eb !important; } .hover\:text-gray-900:hover { color: #ffffff !important; } .hover\:text-white:hover { color: #ffffff !important; } .shadow-sm { box-shadow: none !important; } svg path[fill="rgb(84, 84, 84)"] { fill: #d1d5db; } .bprose { color: #d1d5db !important; } .bprose h2, .bprose h3, .bprose h4, .bprose h5, .bprose h6, .bprose strong { color: #f3f4f6 !important; } .bprose a { color: #6ea8fe !important; } .bprose code { background: #26282c !important; color: #e5e7eb !important; } .bprose pre { background: #15171a !important; } .bg-blue-50 { background-color: rgba(59, 130, 246, 0.16) !important; } .bg-green-50 { background-color: rgba(34, 197, 94, 0.14) !important; } .bg-red-50 { background-color: rgba(239, 68, 68, 0.14) !important; } .bg-amber-50 { background-color: rgba(245, 158, 11, 0.14) !important; } .text-blue-700, .text-blue-800 { color: #93c5fd !important; } .text-green-700, .text-green-800 { color: #86efac !important; } .text-red-700, .text-red-800 { color: #fca5a5 !important; } .text-amber-700, .text-amber-800 { color: #fcd34d !important; } .bg-gray-200, .bg-gray-300 { background-color: #2b2e33 !important; } /* Static fallback content shown before React renders */ .bfallback, .sfallback, #root > div[style*="color:#1a1a1a"] { color: #d1d5db !important; } .bfallback h1, .bfallback h2, .bfallback h3, .bfallback h4, .sfallback h1, .sfallback h2, .sfallback h3, #root h1 { color: #f3f4f6; } .bfallback a, .sfallback a, #root a[style*="color:#2563eb"] { color: #6ea8fe !important; } #root p[style*="color:#444"], #root p[style*="color:#666"] { color: #b6bcc6 !important; } .bfallback td, .bfallback th { border-color: #2b2e33 !important; } }