example.css

@import url('https://rsms.me/inter/inter.css');
@import url('https://fonts.googleapis.com/css?family=IBM+Plex+Mono');

/* ------------------------------------------------------------------------- */
/* reset */

* {
  font: inherit;
  line-height: inherit;
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: inherit;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
a, a:active, a:visited {
  text-decoration: none;
  color: inherit;
}


/* ------------------------------------------------------------------------- */

:root {
  /*--fontSize: 12px;*/
  /* OR */
  --emsAcrossViewport: 80;
  --fontSize: calc(100vw / var(--emsAcrossViewport));

  --lineHeight: calc(var(--fontSize) * 1.5);

  --spacing: 2rem;
  --spacingv: calc(var(--lineHeight) / 2);

  --gridGapCol: var(--spacing);
  --gridGapRow: calc(var(--spacing) / 2);

  /* colors */
  --red: #E13A27;
  --blue: #2F80ED;
  --green: #27AE60;
  --yellow: #F2C12B;
  --grey: #666;
}

@media only screen and (max-width: 600px) { :root {
  --emsAcrossViewport: 30;
  --spacing: 1rem;
}}

@media only screen and (max-device-width: 812px) and (orientation: landscape) { :root {
  --fontSize: 1.7vw;
}}

html { font-family: 'Inter', -system-ui, system-ui, sans-serif; }
@supports (font-variation-settings: normal) {
  html { font-family: 'Inter var', -system-ui, system-ui, sans-serif; }
}

html {
  font-size: var(--fontSize);
  line-height: var(--lineHeight);
  background: #fff;
  color: #000;
  letter-spacing: -0.01em;
  font-variant-ligatures: common-ligatures;
  font-feature-settings:
    'cv01' 1 /* 1 */,
    /*'cv02' 1 4, */
    'cv06' 1 /* r */,
    'cv09' 1 /* 3 */,
    'cv10' 1 /* G */;
}

body {
  overflow-x: hidden;
  scroll-behavior: smooth;
  margin: calc(var(--spacing) * 1.5);
}

grid {
  grid-column-gap: var(--spacingv);
  grid-row-gap: var(--spacingv);
}

b, strong, .bold { font-weight: 600; }
i, em, .italic { font-style: italic; }

h1, .h1 {
  margin-left: calc(3rem / -20);
  font-weight: 700; font-size: 3rem; letter-spacing: -0.07em;
  line-height: calc(var(--spacingv) * 4);
  margin-bottom: calc(var(--spacingv) * 2);
}
h2, .h2 {
  font-weight: 700; font-size: 2rem; letter-spacing: -0.03em;
  line-height: calc(var(--spacingv) * 3);
  margin-bottom: calc(var(--spacingv) * 2);
}
h3, h4, h5, h6, .h3, .h4, .h5, .h6 {
  font-weight: 600; letter-spacing: -0.015em;
}
p + h1, p + .h1 { margin-top: calc(var(--spacingv) * 6); }
p + h2, p + .h2 { margin-top: calc(var(--spacingv) * 4); }
p + h3, p + .h3 { margin-top: calc(var(--spacingv) * 4); }
h3 + p, .h3 + p { margin-top: calc(var(--spacingv) * 2); }

p, pre, p + grid, pre + grid {
  margin-bottom: var(--lineHeight);
}

pre, code, tt, textarea.code {
  font-family: 'IBM Plex Mono', monospace;
}
pre {
  white-space: pre-wrap;
}
code {
  color: #222;
  white-space: nowrap;
}

a:hover {
  color: var(--blue);
}

hr {
  border: none;
  height:0.1rem;
  background: black;
}