Why the answer correct but cannot pass below? Please help!

Tell us what’s happening:
Describe your issue in detail here.

  **Your code so far**

<style>
.penguin {
--penguin-skin: black;
--penguin-belly: gray;
--penguin-beak: yellow;
position: relative;
margin: auto;
display: block;
margin-top: 5%;
width: 300px;
height: 300px;
}

.penguin-top {
top: 10%;
left: 25%;

/* Change code below this line */
background: var(--penguin-skin, black);
/* Change code above this line */

width: 50%;
height: 45%;
border-radius: 70% 70% 60% 60%;
}

.penguin-bottom {
top: 40%;
left: 23.5%;

/* Change code below this line */
background: var(--penguin-skin, black);
/* Change code above this line */

width: 53%;
height: 45%;
border-radius: 70% 70% 100% 100%;
}

.right-hand {
top: 0%;
left: -5%;
background: var(--penguin-skin, black);
width: 30%;
height: 60%;
border-radius: 30% 30% 120% 30%;
transform: rotate(45deg);
z-index: -1;
}

.left-hand {
top: 0%;
left: 75%;
background: var(--penguin-skin, black);
width: 30%;
height: 60%;
border-radius: 30% 30% 30% 120%;
transform: rotate(-45deg);
z-index: -1;
}

.right-cheek {
top: 15%;
left: 35%;
background: var(--penguin-belly, white);
width: 60%;
height: 70%;
border-radius: 70% 70% 60% 60%;
}

.left-cheek {
top: 15%;
left: 5%;
background: var(--penguin-belly, white);
width: 60%;
height: 70%;
border-radius: 70% 70% 60% 60%;
}

.belly {
top: 60%;
left: 2.5%;
background: var(--penguin-belly, white);
width: 95%;
height: 100%;
border-radius: 120% 120% 100% 100%;
}

.right-feet {
top: 85%;
left: 60%;
background: var(--penguin-beak, orange);
width: 15%;
height: 30%;
border-radius: 50% 50% 50% 50%;
transform: rotate(-80deg);
z-index: -2222;
}

.left-feet {
top: 85%;
left: 25%;
background: var(--penguin-beak, orange);
width: 15%;
height: 30%;
border-radius: 50% 50% 50% 50%;
transform: rotate(80deg);
z-index: -2222;
}

.right-eye {
top: 45%;
left: 60%;
background: black;
width: 15%;
height: 17%;
border-radius: 50%;
}

.left-eye {
top: 45%;
left: 25%;
background: black;
width: 15%;
height: 17%;
border-radius: 50%;
}

.sparkle {
top: 25%;
left: 15%;
background: white;
width: 35%;
height: 35%;
border-radius: 50%;
}

.blush-right {
top: 65%;
left: 15%;
background: pink;
width: 15%;
height: 10%;
border-radius: 50%;
}

.blush-left {
top: 65%;
left: 70%;
background: pink;
width: 15%;
height: 10%;
border-radius: 50%;
}

.beak-top {
top: 60%;
left: 40%;
background: var(--penguin-beak, orange);
width: 20%;
height: 10%;
border-radius: 50%;
}

.beak-bottom {
top: 65%;
left: 42%;
background: var(--penguin-beak, orange);
width: 16%;
height: 10%;
border-radius: 50%;
}

body {
background:#c6faf1;
}

.penguin * {
position: absolute;
}
</style>
<div class="penguin">
<div class="penguin-bottom">
<div class="right-hand"></div>
<div class="left-hand"></div>
<div class="right-feet"></div>
<div class="left-feet"></div>
</div>
<div class="penguin-top">
<div class="right-cheek"></div>
<div class="left-cheek"></div>
<div class="belly"></div>
<div class="right-eye">
  <div class="sparkle"></div>
</div>
<div class="left-eye">
  <div class="sparkle"></div>
</div>
<div class="blush-right"></div>
<div class="blush-left"></div>
<div class="beak-top"></div>
<div class="beak-bottom"></div>
</div>
</div>
  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.55 Safari/537.36 Edg/96.0.1054.34

Challenge: Attach a Fallback value to a CSS Variable

Link to the challenge:

Its very hard to see what might be throwing off the test, but I would just reset it, and only change the lines that are meant to be changed

@neilkcl, use the Reset All Code button to reset this challenge.

The instructions say “Rather than fix the typo…

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.