Custom variable vs :root?

HTML-CSS
#1

Not really sure I understand the difference between creating using a custom variable compared to a :root??? They do the same thing which turns the hand gray lol

 .penguin {
    --penguin-skin: gray;
    position: relative;
    margin: auto;
    display: block;
    margin-top: 5%;
    width: 300px;
    height: 300px;
  }

.left-hand {
    color: var(--penguin-skin);
}

:root {
--penguin-skin: gray;
}

.left-hand {
    color: var(--penguin-skin);
}
#2

here the variable is available to the whole page

here the variable is available only inside the .penguin element(s)

#3

I kind of get that for :root it affects the whole page and any declaration within a different selector would overwrite it (Am I correct here?)

Okay, but how come it can affect .left-hand? thats where I am lost…

#4

look at the html elements, is the element with class of left-hand inside the one with class of penguin?

#5

Yeah, I kinda realized that when I re-read your first response…Needed to look at the HTML code :sweat_smile:

#6