:root {
    --penguin-size: 10em;/*changethis*/
    --penguin-skin: black;
    --penguin-belly: white;
    --penguin-beak: brown;
}

.penguin{
    position: absolute;
    display: flex;
    margin: auto;
    top: 50%;
    left: 0px;
    right: 0px;
    width: var(--penguin-size, 10em);
    height: var(--penguin-size, 10em);
    border-radius: 50%;
    animation-name: comedown;
    animation-iteration-count: 1;
    animation-duration: 1s;
  }

.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%;
  }

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

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

.right-hand {
    top: 5%;
    left: 25%;
    background: var(--penguin-skin, black);
    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);
      }
/*              you can delete the code below this one*/
      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, black);
    width: 30%;
    height: 60%;
    border-radius: 30% 30% 30% 120%;
    transform: rotate(-45deg);
/*    z-index: -1;*/
  }

.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:-23%;
    background: white;
    width: 150%;
    height: 100%;
    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%;
  }

.penguin * {
    position: absolute;
}

.penguin:hover{
    box-shadow: 0px 0px 1px 10px rgba(0, 0, 0, 0.2);
}