* {
box-sizing: border-box;
}
html {
font-family: var(--ff-primary);
scroll-behavior: smooth;
/* Account for sticky header */
/* https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-top */
scroll-padding-top: calc(var(--top-offset) + var(--scroll-offset-padding));
scroll-padding-bottom: var(--scroll-offset-padding);
}
body {
/*
This is necessary to accommodate situations where certain changes to the tag can create a new stacking
context. This can cause elements, depending on how they internally calculate their positions, to become positioned
out of place.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
For example:
The "Invert Colors" extension applies an "invert" filter on the body, which creates a new stacking context on
the body. This causes tippy tooltips that are children of the body to become positioned out of place.
Therefore, by setting the body as a positioned element, these kinds of tooltips will always position themselves
against the body element.
*/
position: relative;
color: var(--color-fg-default);
}
a {
color: var(--link-color-fg);
text-decoration: none;
cursor: pointer;
}
a:focus-visible {
outline: 1px solid var(--red-2);
}
ul, ol {
margin: 0;
padding-left: var(--space-8);
}
dl, dt, dd {
margin: 0;
}
fieldset {
padding: 0;
margin: 0;
border: none;
}
h1, h2, h3, h4, h5, h6, p, small {
font-family: var(--ff-primary);
margin: 0;
}
h1 {
font-size: var(--fs-h1);
line-height: var(--fs-h1-lh);
}
h2 {
font-size: var(--fs-h2);
line-height: var(--fs-h2-lh);
}
h3 {
font-size: var(--fs-h3);
line-height: var(--fs-h3-lh);
}
h4 {
font-size: var(--fs-h4);
line-height: var(--fs-h4-lh);
}
body {
font-size: var(--fs-f4);
line-height: var(--fs-f4-lh);
}
small {
font-size: var(--fs-f5);
line-height: var(--fs-f5-lh);
}
pre {
margin: 0;
}