---
id: 5d822fd413a79914d39e98e1
title: Step 25
challengeType: 0
dashedName: step-25
---
# --description--
That one used the fallback value as well? I see the problem now! The variables you declared in `.bb1` do not cascade to the `.bb2` and `.bb3` sibling elements. That's just how CSS works. Because of this, variables are often declared in the `:root` selector. This is the highest level selector in CSS; putting your variables there will make them usable everywhere. Add the `:root` selector to the top of your stylesheet, and move all your variable declarations there.
# --hints--
You should declare a `:root` selector at the top of the stylesheet.
```js
assert.exists(new __helpers.CSSHelp(document).getStyle(':root'));
```
You should define `--building-color1` with a value of `#aa80ff` in the `:root` selector.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--building-color1')?.trim(), '#aa80ff');
```
You should define `--building-color2` with a value of `#66cc99` in the `:root` selector.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--building-color2')?.trim(), '#66cc99');
```
You should define `--building-color3` with a value of `#cc6699` in the `:root` selector.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--building-color3')?.trim(), '#cc6699');
```
You should remove the custom property variables from `.bb1`.
```js
assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color1'));
assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color2'));
assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color3'));
```
# --seed--
## --seed-contents--
```html
City Skyline