Problem Improve Compatibility with Browser Fallbacks

Tell us what’s happening:
just don’t understand what this challenge wants me to do!
I trid to write another background property with red above original background
But it didn’t work

Your code so far


<style>
  :root {
    --red-color: red;
  }
  .red-box {
    
    background: var(--red-color);
    height: 200px;
    width:200px;
  }
</style>
<div class="red-box"></div>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.131 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/basic-css/improve-compatibility-with-browser-fallbacks/

You are welcome to the community!

You have to specify one more declaration of background property and this time you have to set it to be just red.

And you have to specify it just above the already existing specification:

.red-box {
    // <--------- set up beckground property to be equal to red here
    background: var(--red-color);
    height: 200px;
    width:200px;
  }