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

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

#1

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


#2

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.