:root { --navbar-height: 140px; --primary-color: #1343F0; --text-color: #111827; --muted-color: #6b7280; --surface: #ffffff; --background: rgba(246, 249, 255, 0.5); --background-opaque: #00000033; --background-header: rgba(249, 249, 249, 0.5); --lateral-margin: 12rem; } /* Fix mobile overscroll area color (rubber-band / bounce effect) */ html { background-color: #f6f9ff; } /* Dark theme overrides (toggle by setting attribute on ) */ :root[data-theme='dark'], html[data-theme='dark'] { --primary-color: #4983F2; --text-color: #e6eef8; --muted-color: #9ca3af; --surface: #000; --background: rgba(0, 0, 0, 0.8); --background-opaque: rgba(255, 255, 255, 0.2); --background-header: rgba(51, 51, 51, 0.5); background-color: #000; } @media (max-width: 900px) { :root { --navbar-height: 110px; --lateral-margin: 1.5rem; } } * { box-sizing: border-box; transition: color 0.2s; } body { margin: 0; padding: 0; font-family: Helvetica, 'Segoe UI'; color: var(--text-color); background-color: var(--surface); background-image: linear-gradient(var(--background), var(--background)), url('/images/background/paper.png'); background-repeat: repeat; position: relative; } html, body, #app { position: relative; z-index: 1; } main { min-height: 100vh; min-height: 100dvh; display: flow-root; } /* Reusable theme asset helpers: add theme-light-only / theme-dark-only to any paired element (images, icons, labels). */ .theme-light-only { display: inline-block; } .theme-dark-only { display: none; } html[data-theme='dark'] .theme-light-only { display: none; } html[data-theme='dark'] .theme-dark-only { display: inline-block; } .theme-difference { filter: invert(var(--icon-invert)); transition: filter 0.3s ease; } :root { --icon-invert: 0; } html[data-theme='dark'] { --icon-invert: 1; } h1 { margin: 0; font-size: 3rem; font-family: 'IBM Plex Mono', monospace; } h2 { font-family: 'IBM Plex Mono', monospace; } p, a { font-family: Helvetica, 'Segoe UI', sans-serif; } /* SVG Mask utility: responsive to theme */ .svg-mask { background-color: var(--text-color); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain; mask-repeat: no-repeat; mask-position: center; mask-size: contain; transition: background-color 0.2s ease; } .divider { display: block; position: relative; width: 50%; height: 5px; background-color: var(--primary-color); margin-top: 8px; } /* ============================================================ MEDIA QUERIES ============================================================ */ @media (max-width: 1280px) { :root { --lateral-margin: 8rem; } } @media (max-width: 1024px) { :root { --lateral-margin: 5rem; } } @media (max-width: 900px) { :root { --lateral-margin: 1.5rem; } } @media (max-width: 480px) { } @media (max-width: 360px) { }