Funcionalidade :root

Olá Guilherme! Tudo bem?

A pseudo-classe :root é utilizada para selecionar o elemento raiz do documento HTML, ou seja, o elemento HTML. Ela é útil para definir variáveis CSS globais, que podem ser utilizadas em todo o documento.

Por exemplo, se você quiser definir uma cor padrão para o fundo de todo o seu site, você pode utilizar a pseudo-classe :root para definir uma variável CSS global:

:root {
  --cor-fundo: #f2f2f2;
}

E então, em qualquer parte do seu CSS, você pode utilizar essa variável:

body {
  background-color: var(--cor-fundo);
}

Dessa forma, se você precisar mudar a cor de fundo do seu site, basta alterar o valor da variável definida na pseudo-classe :root.

Espero ter ajudado e bons estudos!

Entendido!! Ficou bem claro! Muito obrigado!

Fico feliz em ajudar! Valeu o feedback :)