Coding with Rumaysa

Talking Penguin

:root {
 --penguin-size: 500px;
 --penguin-skin: gray;
 --penguin-belly: white;
 --penguin-beak: orange;
}

@media (max-width: 350px) {
 :root {
  --penguin-size: 200px;
 }
}

.penguin {
  position: relative;
  margin: auto;
  display: block;
  margin-top: 5%;
  width: var(--penguin-size);
  height: var(--penguin-size);
}

.penguin * {
 position: absolute;
}

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

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

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

.penguin-top {
  top: 10%;
  left: 25%;
  background: var(--penguin-skin);
  width: 50%;
  height: 45%;
  border-radius: 70% 70% 60% 60%;
}

.penguin-bottom {
  top: 40%;
  left: 23.5%;
  background: var(--penguin-skin);
  width: 53%;
  height: 45%;
  border-radius: 70% 70% 100% 100%;
}

.right-hand {
  top: 5%;
  left: 25%;
  background: var(--penguin-skin);
  width: 30%;
  height: 60%;
  border-radius: 30% 30% 120% 30%;
  transform: rotate(130deg);
  z-index: -1;
  animation-duration: 3s;
  animation-name: wave;
  animation-iteration-count: infinite;
  transform-origin: 0% 0%;
  animation-timing-function: linear;
}

@keyframes wave {
 10% { transform: rotate(110deg); }
 20% { transform: rotate(130deg); }
 30% { transform: rotate(110deg); }
 40% { transform: rotate(130deg); }
 50% { transform: rotate(110deg); }
 60% { transform: rotate(130deg); }
 70% { transform: rotate(110deg); }
 80% { transform: rotate(130deg); }
 90% { transform: rotate(110deg); }
 100% { transform: rotate(130deg); }
}

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

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

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

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

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

.sparkle {
 top: 25%;
 left: -23%;
 background-color: white;
 width: 150%;
 height: 100%;
 border-radius: 50%;
}

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

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

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

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

body {
 background-color: #c88cff;
}

@keyframes open {
 0% { top: 72%; }
 100% { top: 65%; }
}

@keyframes foot {
 0% { top: 75%; }
 100% { top: 85%; }
}