/* Where hanging-punctuation is not supported: */ @supports not (hanging-punctuation: first) { /* Set a baseSize to use in calculating negative indent :root { --baseSize: 2rem; } /* Apply negative indent */ html { text-indent: calc((var(--baseSize) / 2) * -1); } } /* Where hanging-punctuation is supported: */ @supports (hanging-punctuation: first) { /* Remove text-indent and apply hanging-punctuation */ html { text-indent: 0; hanging-punctuation: first last; /* Although "last" isn't handled by an indentation if unsupported, we'll just try our luck here */ } } /* Use a more-intuitive box-sizing model. */ *, *::before, *::after { box-sizing: border-box; } * { line-height: calc(1em + 0.5rem); /* Calculate optimal line-height (This may break things; see https://www.joshwcomeau.com/css/custom-css-reset/#three-tweaking-line-height-4) */ margin: 0; /* Remove default margin */ } /* Apply curly quotes to blockquote */ blockquote { &::before { content: open-quote; } &::after { content: close-quote; } } body { -webkit-font-smoothing: antialiased; /* Improve text rendering for modern high-dpi screens */ } /* Improve media defaults */ img, picture, video, canvas, svg { display: block; max-width: 100%; } /* Remove built-in form typography styles */ input, button, textarea, select { font: inherit; } /* Avoid text overflows */ p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; hyphens: auto; }