Attach a Fallback value to a CSS Variable - This Test Won't Pass

Not sure how to come out of this.

This statement is unclear to me from the challenge - This style will be applied because of a typo in the variable name.

If the variable, --penguin-skin is misspelt, then the black color is getting applied. Is that the way to verify the fallback color. However, the test fails.

Could anyone help fix this. Appreciate the help!

Code so far:

.penguin-top {
    top: 10%;
    left: 25%;
    /* change code below */
    background: var(--penguin-skin, black);
    /* change code above */
    width: 50%;
    height: 45%;
    border-radius: 70% 70% 60% 60%;
  }
  
  .penguin-bottom {
    top: 40%;
    left: 23.5%;
    /* change code below */
    background: var(--penguin-skin, black);
    /* change code above */
    width: 53%;
    height: 45%;
    border-radius: 70% 70% 100% 100%;
  }

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/basic-css/attach-a-fallback-value-to-a-css-variable

The test passes with misspelled --pengiun-skin, so it applies the fallback color black.
I tried with the also misspelled --pengin-skin and that didn’t pass the test. Maybe the test checks just if you add , black after --pengiun-skin.
I’m not sure if that’s what you were asking, though.

1 Like

I passed this lesson by changing --pengUIn-skinto --pengIUn-skin. But, I didn’t really like with this lesson, because in the guide only tall about --pengUIn-skin, and it’s rather difficult to look at. I think that, maybe add a new guideline such as “you should check your variable again” in this case.