:root {
  --size:250px;
}

body {
  background: linear-gradient(to bottom, #3298fd 0%, #89c4ff 60%, #c9dfff 60%, white 80%);
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  padding:0;
  margin:0;
}

.penguin {
  width: var(--size);
  height: var(--size);
  background: #000;
  position: absolute;
  top: calc( 50% - var(--size) / 2 );
  left: calc(50% - var(--size) / 2 );
  border-radius: 50% 50% 30% 30%;
  z-index: 10;
}
.penguin .body {
  width: 70%;
  height: 70%;
  position: absolute;
  left: 15%;
  top: 15%;
  border-radius: 50% 50% 30% 30%;
  background: linear-gradient(to bottom, black 49%, white 49%);
}
.penguin .body::before, .penguin .body::after {
  content: '';
  display: block;
  width: 60%;
  height: 25%;
  background: #000;
  position: absolute;
  top: 40%;
}
.penguin .body::after {
  right: 0;
  border-radius: 100% 81% 77% 100% / 62% 30% 78% 100%;
  -webkit-transform: rotate(-120deg);
          transform: rotate(-120deg);
  -webkit-animation: right-wing 7s infinite;
          animation: right-wing 7s infinite;
  -webkit-transform-origin: top right;
          transform-origin: top right;
}
.penguin .body::before {
  left: 0%;
  border-radius: 81% 100% 100% 77% / 30% 62% 100% 78%;
  -webkit-transform: rotate(120deg);
          transform: rotate(120deg);
  -webkit-animation: left-wing 10s infinite;
          animation: left-wing 10s infinite;
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
}
.penguin .body .eye {
  background: #fff;
  border-radius: 83% 36% 0% 0% / 99% 79% 0% 0%;
  width: 45%;
  height: 50%;
  position: absolute;
}
.penguin .body .eye:after {
  content: '';
  display: block;
  height: 30%;
  width: 50%;
  border-top: calc(var(--size) / 30) solid #000;
  border-radius: 50%;
  position: absolute;
  top: 40%;
  left: 30%;
  -webkit-animation: eyes 4s infinite;
          animation: eyes 4s infinite;
}
.penguin .body .eye + .eye {
  border-radius: 36% 83%  0% 0% / 79% 99% 0% 0%;
  left: 55%;
}
.penguin .body .eye + .eye:after {
  left: 20%;
}
.penguin .body .beak {
  content: '';
  width: 30%;
  height: 30%;
  position: absolute;
  left: 35%;
  top: 30%;
  border-radius: 15%;
  background: linear-gradient(225deg, orange 0%, #a96500 130%);
  border-radius: 50% 50% 50% 0;
  -webkit-transform-origin: center center;
          transform-origin: center center;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  transition: 1s all;
  z-index: 5;
}
.penguin .foot {
  background: orange;
  width: 50%;
  height: 8%;
  position: absolute;
  bottom: -2%;
  left: -1%;
  border-radius: 100% 15% 8% 4% / 100% 30% 35% 14%;
  -webkit-animation: foot-left 1s infinite;
          animation: foot-left 1s infinite;
  -webkit-transform-origin: top right;
          transform-origin: top right;
}
.penguin .foot + .foot {
  left: 51%;
  border-radius: 15% 100% 4% 8% / 30% 100% 14% 35%;
  -webkit-transform-origin: top left;
          transform-origin: top left;
  -webkit-animation: foot-right 1s infinite .5s;
          animation: foot-right 1s infinite .5s;
}

.cloud {
  position: absolute;
  width: 150px;
  height: 30px;
  background: #fff;
  border-radius: 100px 255px 63px 50px / 75px 75px 8px 8px;
  top: 10%;
  -webkit-filter: blur(5px);
          filter: blur(5px);
  z-index: 5;
}
.cloud:nth-child(1) {
  top: 17vh;
  -webkit-transform: scale(2.3);
          transform: scale(2.3);
  left: 56vw;
  -webkit-animation: cloud 60s infinite;
          animation: cloud 60s infinite;
}
.cloud:nth-child(2) {
  top: 34vh;
  -webkit-transform: scale(1.7);
          transform: scale(1.7);
  left: 55vw;
  -webkit-animation: cloud 34s infinite;
          animation: cloud 34s infinite;
}
.cloud:nth-child(3) {
  top: 17vh;
  -webkit-transform: scale(1.4);
          transform: scale(1.4);
  left: -42vw;
  -webkit-animation: cloud 32s infinite;
          animation: cloud 32s infinite;
}
.cloud:nth-child(4) {
  top: 26vh;
  -webkit-transform: scale(1.8);
          transform: scale(1.8);
  left: 62vw;
  -webkit-animation: cloud 46s infinite;
          animation: cloud 46s infinite;
}
.cloud:nth-child(5) {
  top: 19vh;
  -webkit-transform: scale(0.8);
          transform: scale(0.8);
  left: 14vw;
  -webkit-animation: cloud 60s infinite;
          animation: cloud 60s infinite;
}
.cloud:nth-child(6) {
  top: 24vh;
  -webkit-transform: scale(1.5);
          transform: scale(1.5);
  left: -17vw;
  -webkit-animation: cloud 59s infinite;
          animation: cloud 59s infinite;
}
.cloud:nth-child(7) {
  top: 22vh;
  -webkit-transform: scale(2.2);
          transform: scale(2.2);
  left: 29vw;
  -webkit-animation: cloud 44s infinite;
          animation: cloud 44s infinite;
}
.cloud:nth-child(8) {
  top: 19vh;
  -webkit-transform: scale(2.3);
          transform: scale(2.3);
  left: 45vw;
  -webkit-animation: cloud 38s infinite;
          animation: cloud 38s infinite;
}
.cloud:nth-child(9) {
  top: 16vh;
  -webkit-transform: scale(2.3);
          transform: scale(2.3);
  left: -8vw;
  -webkit-animation: cloud 38s infinite;
          animation: cloud 38s infinite;
}
.cloud:nth-child(10) {
  top: 13vh;
  -webkit-transform: scale(0.9);
          transform: scale(0.9);
  left: 40vw;
  -webkit-animation: cloud 58s infinite;
          animation: cloud 58s infinite;
}
.cloud:nth-child(11) {
  top: 3vh;
  -webkit-transform: scale(2.4);
          transform: scale(2.4);
  left: -9vw;
  -webkit-animation: cloud 55s infinite;
          animation: cloud 55s infinite;
}
.cloud:nth-child(12) {
  top: 33vh;
  -webkit-transform: scale(0.7);
          transform: scale(0.7);
  left: 31vw;
  -webkit-animation: cloud 36s infinite;
          animation: cloud 36s infinite;
}
.cloud:nth-child(13) {
  top: 27vh;
  -webkit-transform: scale(0.7);
          transform: scale(0.7);
  left: 40vw;
  -webkit-animation: cloud 45s infinite;
          animation: cloud 45s infinite;
}
.cloud:nth-child(14) {
  top: 26vh;
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
  left: -12vw;
  -webkit-animation: cloud 42s infinite;
          animation: cloud 42s infinite;
}
.cloud:nth-child(15) {
  top: 4vh;
  -webkit-transform: scale(0.8);
          transform: scale(0.8);
  left: -8vw;
  -webkit-animation: cloud 44s infinite;
          animation: cloud 44s infinite;
}
.cloud:nth-child(16) {
  top: 17vh;
  -webkit-transform: scale(2.5);
          transform: scale(2.5);
  left: 4vw;
  -webkit-animation: cloud 53s infinite;
          animation: cloud 53s infinite;
}
.cloud:nth-child(17) {
  top: 31vh;
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
  left: 64vw;
  -webkit-animation: cloud 57s infinite;
          animation: cloud 57s infinite;
}
.cloud:nth-child(18) {
  top: 15vh;
  -webkit-transform: scale(1.4);
          transform: scale(1.4);
  left: -39vw;
  -webkit-animation: cloud 48s infinite;
          animation: cloud 48s infinite;
}
.cloud:nth-child(19) {
  top: 1vh;
  -webkit-transform: scale(2.3);
          transform: scale(2.3);
  left: 2vw;
  -webkit-animation: cloud 55s infinite;
          animation: cloud 55s infinite;
}
.cloud:nth-child(20) {
  top: 27vh;
  -webkit-transform: scale(1.6);
          transform: scale(1.6);
  left: 52vw;
  -webkit-animation: cloud 45s infinite;
          animation: cloud 45s infinite;
}
.cloud:before, .cloud:after {
  content: '';
  width: 50px;
  height: 50px;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  left: 20px;
  top: -10px;
  display: block;
}
.cloud:before {
  top: -20px;
  left: 50px;
  width: 70px;
  height: 70px;
}

.sun {
  width: 200px;
  height: 200px;
  background: radial-gradient(yellow 30%, transparent 70%, transparent 100%);
  -webkit-filter: blur(10px);
          filter: blur(10px);
  border-radius: 50%;
}

.rock {
  position: absolute;
  width: 480px;
  height: 150px;
  margin-top: -75px;
  background: #ccc;
  border-radius: 50%;
  top: 120%;
  z-index: 5;
}
.rock:nth-child(1) {
  background: #dbe2f0;
  -webkit-transform: scale(0.7);
          transform: scale(0.7);
  left: 35vw;
  -webkit-animation: rock 10s infinite;
          animation: rock 10s infinite;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}
.rock:nth-child(2) {
  background: #d5e0f6;
  -webkit-transform: scale(0.8);
          transform: scale(0.8);
  left: -43vw;
  -webkit-animation: rock 10s infinite;
          animation: rock 10s infinite;
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}
.rock:nth-child(3) {
  background: #e1e4ea;
  -webkit-transform: scale(0.7);
          transform: scale(0.7);
  left: -9vw;
  -webkit-animation: rock 10s infinite;
          animation: rock 10s infinite;
  -webkit-animation-delay: 3s;
          animation-delay: 3s;
}
.rock:nth-child(4) {
  background: #d8e1f3;
  -webkit-transform: scale(1);
          transform: scale(1);
  left: -28vw;
  -webkit-animation: rock 10s infinite;
          animation: rock 10s infinite;
  -webkit-animation-delay: 4s;
          animation-delay: 4s;
}
.rock:nth-child(5) {
  background: #dde3ee;
  -webkit-transform: scale(0.6);
          transform: scale(0.6);
  left: 87vw;
  -webkit-animation: rock 10s infinite;
          animation: rock 10s infinite;
  -webkit-animation-delay: 5s;
          animation-delay: 5s;
}
.rock:nth-child(6) {
  background: #d8e1f3;
  -webkit-transform: scale(0.8);
          transform: scale(0.8);
  left: -42vw;
  -webkit-animation: rock 10s infinite;
          animation: rock 10s infinite;
  -webkit-animation-delay: 6s;
          animation-delay: 6s;
}
.rock:nth-child(7) {
  background: #dce2ef;
  -webkit-transform: scale(0.7);
          transform: scale(0.7);
  left: 61vw;
  -webkit-animation: rock 10s infinite;
          animation: rock 10s infinite;
  -webkit-animation-delay: 7s;
          animation-delay: 7s;
}
.rock:nth-child(8) {
  background: #d0defb;
  -webkit-transform: scale(0.9);
          transform: scale(0.9);
  left: 39vw;
  -webkit-animation: rock 10s infinite;
          animation: rock 10s infinite;
  -webkit-animation-delay: 8s;
          animation-delay: 8s;
}
.rock:nth-child(9) {
  background: #e1e4ea;
  -webkit-transform: scale(1);
          transform: scale(1);
  left: 59vw;
  -webkit-animation: rock 10s infinite;
          animation: rock 10s infinite;
  -webkit-animation-delay: 9s;
          animation-delay: 9s;
}
.rock:nth-child(10) {
  background: #d6e0f5;
  -webkit-transform: scale(0.6);
          transform: scale(0.6);
  left: -8vw;
  -webkit-animation: rock 10s infinite;
          animation: rock 10s infinite;
  -webkit-animation-delay: 10s;
          animation-delay: 10s;
}
.rock:nth-child(11) {
  background: #dce2ef;
  -webkit-transform: scale(0.7);
          transform: scale(0.7);
  left: -39vw;
  -webkit-animation: rock 10s infinite;
          animation: rock 10s infinite;
  -webkit-animation-delay: 11s;
          animation-delay: 11s;
}
.rock:nth-child(12) {
  background: #e5e5e6;
  -webkit-transform: scale(1);
          transform: scale(1);
  left: 4vw;
  -webkit-animation: rock 10s infinite;
          animation: rock 10s infinite;
  -webkit-animation-delay: 12s;
          animation-delay: 12s;
}
.rock:nth-child(13) {
  background: #dbe2f0;
  -webkit-transform: scale(0.7);
          transform: scale(0.7);
  left: 52vw;
  -webkit-animation: rock 10s infinite;
          animation: rock 10s infinite;
  -webkit-animation-delay: 13s;
          animation-delay: 13s;
}
.rock:nth-child(14) {
  background: #e4e5e7;
  -webkit-transform: scale(1);
          transform: scale(1);
  left: -44vw;
  -webkit-animation: rock 10s infinite;
          animation: rock 10s infinite;
  -webkit-animation-delay: 14s;
          animation-delay: 14s;
}
.rock:nth-child(15) {
  background: #cedefd;
  -webkit-transform: scale(0.8);
          transform: scale(0.8);
  left: 73vw;
  -webkit-animation: rock 10s infinite;
          animation: rock 10s infinite;
  -webkit-animation-delay: 15s;
          animation-delay: 15s;
}
.rock:nth-child(16) {
  background: #cfdefc;
  -webkit-transform: scale(0.9);
          transform: scale(0.9);
  left: 85vw;
  -webkit-animation: rock 10s infinite;
          animation: rock 10s infinite;
  -webkit-animation-delay: 16s;
          animation-delay: 16s;
}
.rock:nth-child(17) {
  background: #dee3ed;
  -webkit-transform: scale(1);
          transform: scale(1);
  left: 68vw;
  -webkit-animation: rock 10s infinite;
          animation: rock 10s infinite;
  -webkit-animation-delay: 17s;
          animation-delay: 17s;
}
.rock:nth-child(18) {
  background: #d5e0f6;
  -webkit-transform: scale(1);
          transform: scale(1);
  left: 32vw;
  -webkit-animation: rock 10s infinite;
          animation: rock 10s infinite;
  -webkit-animation-delay: 18s;
          animation-delay: 18s;
}
.rock:nth-child(19) {
  background: #e3e5e8;
  -webkit-transform: scale(0.6);
          transform: scale(0.6);
  left: 12vw;
  -webkit-animation: rock 10s infinite;
          animation: rock 10s infinite;
  -webkit-animation-delay: 19s;
          animation-delay: 19s;
}
.rock:nth-child(20) {
  background: #dde3ee;
  -webkit-transform: scale(0.9);
          transform: scale(0.9);
  left: -24vw;
  -webkit-animation: rock 10s infinite;
          animation: rock 10s infinite;
  -webkit-animation-delay: 20s;
          animation-delay: 20s;
}

@-webkit-keyframes eyes {
  0% {
    border-top-width: calc(var(--size) / 30);
  }
  50% {
    border-top-width: calc(var(--size) / 10);
  }
  100% {
    border-top-width: calc(var(--size) / 30);
  }
}

@keyframes eyes {
  0% {
    border-top-width: calc(var(--size) / 30);
  }
  50% {
    border-top-width: calc(var(--size) / 10);
  }
  100% {
    border-top-width: calc(var(--size) / 30);
  }
}
@-webkit-keyframes left-wing {
  0% {
    -webkit-transform: rotate(120deg);
            transform: rotate(120deg);
  }
  50% {
    -webkit-transform: rotate(100deg);
            transform: rotate(100deg);
  }
  100% {
    -webkit-transform: rotate(120deg);
            transform: rotate(120deg);
  }
}
@keyframes left-wing {
  0% {
    -webkit-transform: rotate(120deg);
            transform: rotate(120deg);
  }
  50% {
    -webkit-transform: rotate(100deg);
            transform: rotate(100deg);
  }
  100% {
    -webkit-transform: rotate(120deg);
            transform: rotate(120deg);
  }
}
@-webkit-keyframes right-wing {
  0% {
    -webkit-transform: rotate(-120deg);
            transform: rotate(-120deg);
  }
  50% {
    -webkit-transform: rotate(-100deg);
            transform: rotate(-100deg);
  }
  100% {
    -webkit-transform: rotate(-120deg);
            transform: rotate(-120deg);
  }
}
@keyframes right-wing {
  0% {
    -webkit-transform: rotate(-120deg);
            transform: rotate(-120deg);
  }
  50% {
    -webkit-transform: rotate(-100deg);
            transform: rotate(-100deg);
  }
  100% {
    -webkit-transform: rotate(-120deg);
            transform: rotate(-120deg);
  }
}
@-webkit-keyframes foot-left {
  20% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  50% {
    -webkit-transform: rotate(5deg);
            transform: rotate(5deg);
  }
  80% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
}
@keyframes foot-left {
  20% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  50% {
    -webkit-transform: rotate(5deg);
            transform: rotate(5deg);
  }
  80% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
}
@-webkit-keyframes foot-right {
  20% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  50% {
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg);
  }
  80% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
}
@keyframes foot-right {
  20% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  50% {
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg);
  }
  80% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
}
@-webkit-keyframes cloud {
  0% {
    margin-left: 0;
  }
  50% {
    margin-left: 20vw;
  }
  100% {
    margin-left: 0;
  }
}
@keyframes cloud {
  0% {
    margin-left: 0;
  }
  50% {
    margin-left: 20vw;
  }
  100% {
    margin-left: 0;
  }
}
@-webkit-keyframes rock {
  0% {
    top: 120%;
    -webkit-transform: scaley(1);
            transform: scaley(1);
    -webkit-filter: blur(10px);
            filter: blur(10px);
  }
  100% {
    top: 60%;
    -webkit-transform: scaley(0);
            transform: scaley(0);
    -webkit-filter: blur(20px);
            filter: blur(20px);
  }
}
@keyframes rock {
  0% {
    top: 120%;
    -webkit-transform: scaley(1);
            transform: scaley(1);
    -webkit-filter: blur(10px);
            filter: blur(10px);
  }
  100% {
    top: 60%;
    -webkit-transform: scaley(0);
            transform: scaley(0);
    -webkit-filter: blur(20px);
            filter: blur(20px);
  }
}