Spaces:
Running
Running
| :root { | |
| --paper: #fcfdfe; | |
| --tint: #f3f6fa; | |
| --ink: #1f2937; | |
| --text: #465261; | |
| --blue: #7592aa; | |
| --deep-blue: #315f84; | |
| --line: #dde5ec; | |
| --surface: #fff; | |
| --serif: "PT Serif", Georgia, "Times New Roman", serif; | |
| --comic: "Comic Sans MS", "Comic Sans", "Comic Neue", cursive; | |
| --sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; | |
| } | |
| * { box-sizing: border-box; } | |
| body { margin: 0; color: var(--text); background: #eef1f5; font: 16px/1.7 var(--sans); -webkit-font-smoothing: antialiased; } | |
| h1, h2, h3, p, figure { margin: 0; } | |
| h1, h2, h3 { color: var(--ink); font-family: var(--serif); font-weight: 700; } | |
| button, a { -webkit-tap-highlight-color: transparent; } | |
| button { font: inherit; } | |
| button:not(:disabled) { cursor: pointer; } | |
| a { color: var(--deep-blue); text-decoration: none; } | |
| a:hover { text-decoration: underline; text-underline-offset: 4px; } | |
| button, a { touch-action: manipulation; } | |
| :focus-visible { outline: 3px solid var(--deep-blue); outline-offset: 5px; } | |
| [hidden] { display: none ; } | |
| .container { width: min(100%, 1200px); padding-inline: 28px; margin-inline: auto; } | |
| .wide-container { width: min(100%, 1460px); } | |
| .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } | |
| .space-heading { text-align: center; padding: 22px 16px 8px; } | |
| .space-heading h1 { font: 700 30px var(--serif); color: var(--deep-blue); margin: 0 0 8px; } | |
| .space-heading p { margin: 0; font-size: 14px; } | |
| .space-heading a { font-size: 13px; } | |
| .space-links { display: flex; justify-content: center; gap: 20px; margin-top: 12px; } | |
| #teaser { min-height: 0; padding: 20px 12px 28px; border: 0; } | |
| #teaser .wide-container { width: 100%; max-width: 1500px; padding: 0; } | |
| .demo-view > figcaption > span { font-family: var(--comic); } | |
| @media (prefers-reduced-motion: reduce) { | |
| *, *::before, *::after { transition: none ; } | |
| } | |