Learn CSS Transforms by Building a Penguin - Step 54

Tell us what’s happening:
I’m not sure if I’m doing something wrong here… Can anybody tell me what I did wrong?

   **Your code so far**
/* file: index.html */
<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="UTF-8" />
   <link rel="stylesheet" href="./styles.css" />
   <title>Penguin</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 </head>

 <body>
   <div class="left-mountain"></div>
   <div class="back-mountain"></div>
   <div class="sun"></div>
   <div class="penguin">
     <div class="penguin-head">
       <div class="face left"></div>
       <div class="face right"></div>
       <div class="chin"></div>
     </div>
     <div class="penguin-body"></div>
   </div>

   <div class="ground"></div>
 </body>
</html>
/* file: styles.css */
--penguin-face:root{
 background-color: white;
}

body {
 background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
 margin: 0;
 padding: 0;
 width: 100%;
 height: 100vh;
 overflow: clip;
}

.left-mountain {
 width: 300px;
 height: 300px;
 background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
 position: absolute;
 transform: skew(0deg, 44deg);
 z-index: 2;
 margin-top: 100px;
}

.back-mountain {
 width: 300px;
 height: 300px;
 background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
 position: absolute;
 z-index: 1;
 transform: rotate(45deg);
 left: 110px;
 top: 225px;
}

.sun {
 width: 200px;
 height: 200px;
 background-color: yellow;
 position: absolute;
 border-radius: 50%;
 top: -75px;
 right: -75px;
}

.penguin {
 width: 300px;
 height: 300px;
 margin: auto;
 margin-top: 75px;
 z-index: 4;
 position: relative;
}

.penguin * {
 position: absolute;
}

.penguin-head {
 width: 50%;
	height: 45%;
 background: linear-gradient(
   45deg,
		gray,
		rgb(239, 240, 228)
	);
	border-radius: 70% 70% 65% 65%;
 top: 10%;
 left: 25%;
 z-index: 1;
}

.face {
 width: 60%;
 height: 70%;
 background-color: white;
 border-radius: 70% 70% 60% 60%;
 top: 15%;
}

.face.left {
 left: 5%;
}

.face.right {
 right: 5%;
}

.chin {
 width: 90%;
 height: 70%;
 background-color: white;
 top: 25%;
 left: 5%;
 border-radius: 70% 70% 100% 100%;
}

.penguin-body {
 width: 53%;
 height: 45%;
 background: linear-gradient(
   45deg,
		rgb(134, 133, 133) 0%,
		rgb(234, 231, 231) 25%,
		white 67%
	);
 border-radius: 80% 80% 100% 100%;
 top: 40%;
 left: 23.5%;
}

.penguin-body::before {
 content: "";
 position: absolute;
 width: 50%;
 height: 45%;
 background-color: gray;
 top: 10%;
 left: 25%;
 border-radius: 0% 0% 100% 100%;
 opacity: 70%;
}

.ground {
 width: 100vw;
 height: 400px;
 background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
 z-index: 3;
 position: absolute;
 margin-top: -58px;
}
   **Your browser information:**

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

Challenge: Learn CSS Transforms by Building a Penguin - Step 54

Link to the challenge:

Almost get it, you’re right with the root just a bit messed up with they syntax
please visit the link below and see the example.

Hope this will help. Happy coding

Thank you for letting me know.