In CSS you might see people write their global variables/styles in either :root or html.

The pseudo selector :root has greater specificity than html. Because of this, you'll often see :root to define global variables.

:root {
  font-size: calc(1rem + 0.25vw);
}

Why that font-size calc? It's a responsive font-size that grows with the viewport width. The 1rem is the base font-size and the 0.25vw is the growth rate. The calc function is used to add the two values together.

This comes from Jim Fisher.