Basic CSS: Cascading CSS variables

Hey im stuck on declare the --penguin-belly variable in the :root and assign it to pink.
when i press ask for help it comes up with this.

The webpage at https://forum.freecodecamp.org/new-topic?category=help&title=Cascading%20CSS%20variables&body=Tell%20us%20what%27s%20happening%3A%0A%0A%0A%0AYour%20code%20so%20far%0A%0A%60%60%60html%0A%0A%0A%20%20%3Aroot%20%7B%0A%20%20%20%20var(–penguin-belly%3A%20pink)%3B%0A%20%20%7D%0A%20%20%0A%20%20body%20%7B%0A%20%20%20%20background%3A%20var(–penguin-belly%2C%20%23c6faf1)%3B%0A%20%20%7D%0A%20%20%0A%20%20.penguin%20%7B%0A%20%20%20%20–penguin-skin%3A%20gray%3B%0A%20%20%20%20–penguin-beak%3A%20orange%3B%0A%20%20%20%20position%3A%20relative%3B%0A%20%20%20%20margin%3A%20auto%3B%0A%20%20%20%20display%3A%20block%3B%0A%20%20%20%20margin-top%3A%205%25%3B%0A%20%20%20%20width%3A%20300px%3B%0A%20%20%20%20height%3A%20300px%3B%0A%20%20%7D%0A%20%20%0A%20%20.right-cheek%20%7B%0A%20%20%20%20top%3A%2015%25%3B%0A%20%20%20%20left%3A%2035%25%3B%0A%20%20%20%20background%3A%20var(–penguin-belly%2C%20white)%3B%0A%20%20%20%20width%3A%2060%25%3B%0A%20%20%20%20height%3A%2070%25%3B%0A%20%20%20%20border-radius%3A%2070%25%2070%25%2060%25%2060%25%3B%0A%20%20%7D%0A%20%20%0A%20%20.left-cheek%20%7B%0A%20%20%20%20top%3A%2015%25%3B%0A%20%20%20%20left%3A%205%25%3B%0A%20%20%20%20background%3A%20var(–penguin-belly%2C%20white)%3B%0A%20%20%20%20width%3A%2060%25%3B%0A%20%20%20%20height%3A%2070%25%3B%0A%20%20%20%20border-radius%3A%2070%25%2070%25%2060%25%2060%25%3B%0A%20%20%7D%0A%20%20%0A%20%20.belly%20%7B%0A%20%20%20%20top%3A%2060%25%3B%0A%20%20%20%20left%3A%202.5%25%3B%0A%20%20%20%20background%3A%20var(–penguin-belly%2C%20white)%3B%0A%20%20%20%20width%3A%2095%25%3B%0A%20%20%20%20height%3A%20100%25%3B%0A%20%20%20%20border-radius%3A%20120%25%20120%25%20100%25%20100%25%3B%0A%20%20%7D%0A%20%20%0A%20%20.penguin-top%20%7B%0A%20%20%20%20top%3A%2010%25%3B%0A%20%20%20%20left%3A%2025%25%3B%0A%20%20%20%20background%3A%20var(–penguin-skin%2C%20gray)%3B%0A%20%20%20%20width%3A%2050%25%3B%0A%20%20%20%20height%3A%2045%25%3B%0A%20%20%20%20border-radius%3A%2070%25%2070%25%2060%25%2060%25%3B%0A%20%20%7D%0A%20%20%0A%20%20.penguin-bottom%20%7B%0A%20%20%20%20top%3A%2040%25%3B%0A%20%20%20%20left%3A%2023.5%25%3B%0A%20%20%20%20background%3A%20var(–penguin-skin%2C%20gray)%3B%0A%20%20%20%20width%3A%2053%25%3B%0A%20%20%20%20height%3A%2045%25%3B%0A%20%20%20%20border-radius%3A%2070%25%2070%25%20100%25%20100%25%3B%0A%20%20%7D%0A%20%20%0A%20%20.right-hand%20%7B%0A%20%20%20%20top%3A%200%25%3B%0A%20%20%20%20left%3A%20-5%25%3B%0A%20%20%20%20background%3A%20var(–penguin-skin%2C%20gray)%3B%0A%20%20%20%20width%3A%2030%25%3B%0A%20%20%20%20height%3A%2060%25%3B%0A%20%20%20%20border-radius%3A%2030%25%2030%25%20120%25%2030%25%3B%0A%20%20%20%20transform%3A%20rotate(45deg)%3B%0A%20%20%20%20z-index%3A%20-1%3B%0A%20%20%7D%0A%20%20%0A%20%20.left-hand%20%7B%0A%20%20%20%20top%3A%200%25%3B%0A%20%20%20%20left%3A%2075%25%3B%0A%20%20%20%20background%3A%20var(–penguin-skin%2C%20gray)%3B%0A%20%20%20%20width%3A%2030%25%3B%0A%20%20%20%20height%3A%2060%25%3B%0A%20%20%20%20border-radius%3A%2030%25%2030%25%2030%25%20120%25%3B%0A%20%20%20%20transform%3A%20rotate(-45deg)%3B%0A%20%20%20%20z-index%3A%20-1%3B%0A%20%20%7D%0A%20%20%0A%20%20.right-feet%20%7B%0A%20%20%20%20top%3A%2085%25%3B%0A%20%20%20%20left%3A%2060%25%3B%0A%20%20%20%20background%3A%20var(–penguin-beak%2C%20orange)%3B%0A%20%20%20%20width%3A%2015%25%3B%0A%20%20%20%20height%3A%2030%25%3B%0A%20%20%20%20border-radius%3A%2050%25%2050%25%2050%25%2050%25%3B%0A%20%20%20%20transform%3A%20rotate(-80deg)%3B%0A%20%20%20%20z-index%3A%20-2222%3B%0A%20%20%7D%0A%20%20%0A%20%20.left-feet%20%7B%0A%20%20%20%20top%3A%2085%25%3B%0A%20%20%20%20left%3A%2025%25%3B%0A%20%20%20%20background%3A%20var(–penguin-beak%2C%20orange)%3B%0A%20%20%20%20width%3A%2015%25%3B%0A%20%20%20%20height%3A%2030%25%3B%0A%20%20%20%20border-radius%3A%2050%25%2050%25%2050%25%2050%25%3B%0A%20%20%20%20transform%3A%20rotate(80deg)%3B%0A%20%20%20%20z-index%3A%20-2222%3B%0A%20%20%7D%0A%20%20%0A%20%20.right-eye%20%7B%0A%20%20%20%20top%3A%2045%25%3B%0A%20%20%20%20left%3A%2060%25%3B%0A%20%20%20%20background%3A%20black%3B%0A%20%20%20%20width%3A%2015%25%3B%0A%20%20%20%20height%3A%2017%25%3B%0A%20%20%20%20border-radius%3A%2050%25%3B%0A%20%20%7D%0A%20%20%0A%20%20.left-eye%20%7B%0A%20%20%20%20top%3A%2045%25%3B%0A%20%20%20%20left%3A%2025%25%3B%0A%20%20%20%20background%3A%20black%3B%0A%20%20%20%20width%3A%2015%25%3B%0A%20%20%20%20height%3A%2017%25%3B%0A%20%20%20%20border-radius%3A%2050%25%3B%0A%20%20%7D%0A%20%20%0A%20%20.sparkle%20%7B%0A%20%20%20%20top%3A%2025%25%3B%0A%20%20%20%20left%3A%2015%25%3B%0A%20%20%20%20background%3A%20white%3B%0A%20%20%20%20width%3A%2035%25%3B%0A%20%20%20%20height%3A%2035%25%3B%0A%20%20%20%20border-radius%3A%2050%25%3B%0A%20%20%7D%0A%20%20%0A%20%20.blush-right%20%7B%0A%20%20%20%20top%3A%2065%25%3B%0A%20%20%20%20left%3A%2015%25%3B%0A%20%20%20%20background%3A%20pink%3B%0A%20%20%20%20width%3A%2015%25%3B%0A%20%20%20%20height%3A%2010%25%3B%0A%20%20%20%20border-radius%3A%2050%25%3B%0A%20%20%7D%0A%20%20%0A%20%20.blush-left%20%7B%0A%20%20%20%20top%3A%2065%25%3B%0A%20%20%20%20left%3A%2070%25%3B%0A%20%20%20%20background%3A%20pink%3B%0A%20%20%20%20width%3A%2015%25%3B%0A%20%20%20%20height%3A%2010%25%3B%0A%20%20%20%20border-radius%3A%2050%25%3B%0A%20%20%7D%0A%20%20%0A%20%20.beak-top%20%7B%0A%20%20%20%20top%3A%2060%25%3B%0A%20%20%20%20left%3A%2040%25%3B%0A%20%20%20%20background%3A%20var(–penguin-beak%2C%20orange)%3B%0A%20%20%20%20width%3A%2020%25%3B%0A%20%20%20%20height%3A%2010%25%3B%0A%20%20%20%20border-radius%3A%2050%25%3B%0A%20%20%7D%0A%20%20%0A%20%20.beak-bottom%20%7B%0A%20%20%20%20top%3A%2065%25%3B%0A%20%20%20%20left%3A%2042%25%3B%0A%20%20%20%20background%3A%20var(–penguin-beak%2C%20orange)%3B%0A%20%20%20%20width%3A%2016%25%3B%0A%20%20%20%20height%3A%2010%25%3B%0A%20%20%20%20border-radius%3A%2050%25%3B%0A%20%20%7D%0A%20%20%0A%20%20.penguin%20*%20%7B%0A%20%20%20%20position%3A%20absolute%3B%0A%20%20%7D%0A<%2Fstyle>%0A<div%20class%3D"penguin">%0A%20%20<div%20class%3D"penguin-bottom">%0A%20%20%20%20<div%20class%3D"right-hand"><%2Fdiv>%0A%20%20%20%20<div%20class%3D"left-hand"><%2Fdiv>%0A%20%20%20%20<div%20class%3D"right-feet"><%2Fdiv>%0A%20%20%20%20<div%20class%3D"left-feet"><%2Fdiv>%0A%20%20<%2Fdiv>%0A%20%20<div%20class%3D"penguin-top">%0A%20%20%20%20<div%20class%3D"right-cheek"><%2Fdiv>%0A%20%20%20%20<div%20class%3D"left-cheek"><%2Fdiv>%0A%20%20%20%20<div%20class%3D"belly"><%2Fdiv>%0A%20%20%20%20<div%20class%3D"right-eye">%0A%20%20%20%20%20%20<div%20class%3D"sparkle"><%2Fdiv>%0A%20%20%20%20<%2Fdiv>%0A%20%20%20%20<div%20class%3D"left-eye">%0A%20%20%20%20%20%20<div%20class%3D"sparkle"><%2Fdiv>%0A%20%20%20%20<%2Fdiv>%0A%20%20%20%20<div%20class%3D"blush-right"><%2Fdiv>%0A%20%20%20%20<div%20class%3D"blush-left"><%2Fdiv>%0A%20%20%20%20<div%20class%3D"beak-top"><%2Fdiv>%0A%20%20%20%20<div%20class%3D"beak-bottom"><%2Fdiv>%0A%20%20<%2Fdiv>%0A<%2Fdiv>%0A%60%60%60%0A%0AYour%20browser%20information%3A%0A%0AUser%20Agent%20is%3A%20Mozilla%2F5.0%20(Macintosh%3B%20Intel%20Mac%20OS%20X%2010_10_5)%20AppleWebKit%2F537.36%20(KHTML%2C%20like%20Gecko)%20Chrome%2F67.0.3396.87%20Safari%2F537.36<%2Fcode>.%0A%0ALink%20to%20the%20challenge%3A%0Ahttps%3A%2F%2Flearn.freecodecamp.org%2Fresponsive-web-design%2Fbasic-css%2Fcascading-css-variables%2F might be temporarily down or it may have moved permanently to a new web address.
ERR_FAILED

Okay so I would delete this post and make another post where you copy and paste the code that you have into the post, select the code you pasted, and click </> in the style bar to format it to code. Then I would provide a link to the lesson that you are on, and describe what the problem is. (I think you actually basically did this but you didn’t format the code correctly.)

1 Like