| :root { |
| --text: #555; |
| --text-h: #111; |
| --bg: #fff; |
| --border: #ddd; |
| --code-bg: #f5f5f5; |
| --accent: #333; |
| --accent-bg: #f0f0f0; |
| --accent-border: #bbb; |
| --social-bg: #f5f5f5; |
| --shadow: |
| rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.05) 0 4px 6px -2px; |
|
|
| --sans: system-ui, 'Segoe UI', Roboto, sans-serif; |
| --heading: system-ui, 'Segoe UI', Roboto, sans-serif; |
| --mono: ui-monospace, Consolas, monospace; |
|
|
| font: 18px/145% var(--sans); |
| letter-spacing: 0.18px; |
| color-scheme: light; |
| color: var(--text); |
| background: var(--bg); |
| font-synthesis: none; |
| text-rendering: optimizeLegibility; |
| -webkit-font-smoothing: antialiased; |
| -moz-osx-font-smoothing: grayscale; |
|
|
| @media (max-width: 1024px) { |
| font-size: 16px; |
| } |
| } |
|
|
| body { |
| margin: 0; |
| } |
|
|
| #root { |
| width: 100%; |
| max-width: 100%; |
| margin: 0 auto; |
| min-height: 100svh; |
| display: flex; |
| flex-direction: column; |
| box-sizing: border-box; |
| } |
|
|
| h1, |
| h2 { |
| font-family: var(--heading); |
| font-weight: 500; |
| color: var(--text-h); |
| } |
|
|
| h1 { |
| font-size: 56px; |
| letter-spacing: -1.68px; |
| margin: 32px 0; |
| @media (max-width: 1024px) { |
| font-size: 36px; |
| margin: 20px 0; |
| } |
| } |
| h2 { |
| font-size: 24px; |
| line-height: 118%; |
| letter-spacing: -0.24px; |
| margin: 0 0 8px; |
| @media (max-width: 1024px) { |
| font-size: 20px; |
| } |
| } |
| p { |
| margin: 0; |
| } |
|
|
| code, |
| .counter { |
| font-family: var(--mono); |
| display: inline-flex; |
| border-radius: 4px; |
| color: var(--text-h); |
| } |
|
|
| code { |
| font-size: 15px; |
| line-height: 135%; |
| padding: 4px 8px; |
| background: var(--code-bg); |
| } |
|
|
