| 1 | /* 1. Use a more-intuitive box-sizing model */ |
| 2 | *, *::before, *::after { |
| 3 | box-sizing: border-box; |
| 4 | } |
| 5 | /* 2. Remove default margin */ |
| 6 | * { |
| 7 | margin: 0; |
| 8 | } |
| 9 | body { |
| 10 | /* 3. Add accessible line-height */ |
| 11 | line-height: 1.5; |
| 12 | /* 4. Improve text rendering */ |
| 13 | -webkit-font-smoothing: antialiased; |
| 14 | } |
| 15 | /* 5. Improve media defaults */ |
| 16 | img, picture, video, canvas, svg { |
| 17 | display: block; |
| 18 | max-width: 100%; |
| 19 | } |
| 20 | /* 6. Inherit fonts for form controls */ |
| 21 | input, button, textarea, select { |
| 22 | font: inherit; |
| 23 | } |
| 24 | /* 7. Avoid text overflows */ |
| 25 | p, h1, h2, h3, h4, h5, h6 { |
| 26 | overflow-wrap: break-word; |
| 27 | } |
| 28 | /* 8. Improve line wrapping */ |
| 29 | p { |
| 30 | text-wrap: pretty; |
| 31 | } |
| 32 | h1, h2, h3, h4, h5, h6 { |
| 33 | text-wrap: balance; |
| 34 | } |
| 35 | /* |
| 36 | 9. Create a root stacking context |
| 37 | */ |
| 38 | #root, #__next { |
| 39 | isolation: isolate; |
| 40 | } |