/* 1. Use a more-intuitive box-sizing model */ *, *::before, *::after { box-sizing: border-box; } /* Prevent font size inflation */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; } /* 2. Remove default margin */ * { margin: 0; } /* 3. Enable keyword animations */ @media (prefers-reduced-motion: no-preference) { html { interpolate-size: allow-keywords; } } body { /* 5. Improve text rendering */ -webkit-font-smoothing: antialiased; min-height: 100vh; overflow-x: hidden; } /* 6. Improve media defaults */ img, picture, video, canvas, svg { display: block; max-width: 100%; } /* 7. Inherit fonts for form controls */ input, button, textarea, select { font: inherit; } /* 8. Avoid text overflows */ p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; } /* 9. Improve line wrapping */ /* Add space between paragraphs */ p { text-wrap: pretty; overflow-wrap: break-word; hyphens: auto; max-width: 50ch; margin-bottom: var(--space-paragraph); } h1, h2, h3, h4, h5, h6 { text-wrap: balance; } /* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */ ul[role="list"], ol[role="list"], li[role="list"], li { list-style: none; } /* All links without a class get the default styling */ a:not([class]) { text-decoration-skip-ink: auto; color: currentColor; } /* Make sure textarea without a rows attribute are not tiny */ textarea:not([rows]) { min-height: 10em; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ /* input, textarea { -webkit-user-select: auto; } */ /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable="true"]) { -webkit-user-drag: element; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Anything that has been anchored to should have extra scroll margin */ :target { scroll-margin-block: 5ex; } /* Accessability */ .visually-hidden { border-width: 0 !important; clip: rect(1px, 1px, 1px, 1px) !important; height: 1px !important; overflow: hidden !important; padding: 0 !important; position: absolute !important; white-space: nowrap !important; width: 1px !important; } @media (prefers-reduced-motion: no-preference) { html { interpolate-size: allow-keywords; } }