day11.html

<style>
    :root {
      --penguin-size: 300px;
      --penguin-skin: gray;
      --penguin-belly: white;
      --penguin-beak: orange;
    }
    
    @media (max-width: 350px) {
      :root {
        
        /* add code below */
        --penguin-size:200px;
        --penguin-skin:black;
        /* add code above */
        
      }
    }
    
    .penguin {
      position: relative;
      margin: auto;
      display: block;
      margin-top: 5%;
      width: var(--penguin-size, 300px);
      height: var(--penguin-size, 300px);
    }
    
    .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, gray);
      width: 50%;
      height: 45%;
      border-radius: 70% 70% 60% 60%;
    }
    
    .penguin-bottom {
      top: 40%;
      left: 23.5%;
      background: var(--penguin-skin, gray);
      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);
        }  
      }
    
    .left-hand {
      top: 0%;
      left: 75%;
      background: var(--penguin-skin, gray);
      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%;
    }
    
    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>