The :root CSS pseudo-class matches the root element of the document. In HTML, :root represents the HTML element and is identical to the selector HTML, except that its specificity is higher. so, for example if want to change the background of our complete page to black. We can do it by the CSS : 
 
:root{
 background: black
}
:root is also used for declaring global CSS variables, for example : 

:root {
  --main-color: hotpink;
  --pane-padding: 5px 42px;
}