body {
  background-color: #fffaf0;
}

ul {
  padding: 0;
}

li {
  list-style: none;
}

.container {
  background-image: linear-gradient(to top, #fcf3d8 30%, #eaafc8, #654ea3);
  background-image: -webkit-linear-gradient(to bottom, #fcf3d8 30%, #eaafc8, #654ea3);
  background-color: #654ea3;
  height: 450px;
  width: 450px;
  border-radius: 100%;
  position: absolute;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
  overflow: hidden;
}

.mountain-range {
  position: absolute;
  width: 100%;
  height: 100px;
  top: 50%;
  display: flex;
  justify-content: center;
  padding: 0;
}
.mountain-range .mountain:nth-child(1) {
  width: 0;
  height: 0;
  margin-top: 32px;
  margin-left: -60%;
  border-left: 183px solid transparent;
  border-right: 183px solid transparent;
  border-bottom: 91.5px solid #75bbff;
}
.mountain-range .mountain:nth-child(2) {
  width: 0;
  height: 0;
  margin-top: 27px;
  margin-left: -60%;
  border-left: 195px solid transparent;
  border-right: 195px solid transparent;
  border-bottom: 97.5px solid #75bbff;
}
.mountain-range .mountain:nth-child(3) {
  width: 0;
  height: 0;
  margin-top: 24px;
  margin-left: -60%;
  border-left: 198px solid transparent;
  border-right: 198px solid transparent;
  border-bottom: 99px solid #75bbff;
}
.mountain-range .mountain:nth-child(4) {
  width: 0;
  height: 0;
  margin-top: 35px;
  margin-left: -60%;
  border-left: 154px solid transparent;
  border-right: 154px solid transparent;
  border-bottom: 77px solid #75bbff;
}
.mountain-range .mountain:nth-child(5) {
  width: 0;
  height: 0;
  margin-top: 20px;
  margin-left: -60%;
  border-left: 150px solid transparent;
  border-right: 150px solid transparent;
  border-bottom: 75px solid #75bbff;
}
.mountain-range .mountain:nth-child(6) {
  width: 0;
  height: 0;
  margin-top: 33px;
  margin-left: -60%;
  border-left: 198px solid transparent;
  border-right: 198px solid transparent;
  border-bottom: 99px solid #75bbff;
}
.mountain-range .mountain:nth-child(7) {
  width: 0;
  height: 0;
  margin-top: 37px;
  margin-left: -60%;
  border-left: 152px solid transparent;
  border-right: 152px solid transparent;
  border-bottom: 76px solid #75bbff;
}
.mountain-range .mountain:nth-child(8) {
  width: 0;
  height: 0;
  margin-top: 27px;
  margin-left: -60%;
  border-left: 166px solid transparent;
  border-right: 166px solid transparent;
  border-bottom: 83px solid #75bbff;
}

.forest {
  position: absolute;
  width: 100%;
  height: 100px;
  top: 65%;
}
.forest .hill {
  position: absolute;
  background-color: #82d9a2;
}
.forest .hill:nth-child(1) {
  width: 600px;
  height: 300px;
  top: -10px;
  left: -150px;
  border-top-left-radius: 300px 150px;
  border-top-right-radius: 300px 150px;
  border-bottom-left-radius: 300px 150px;
  border-bottom-right-radius: 300px 150px;
  box-shadow: inset 20px 30px 50px #2d79a0;
}
.forest .hill:nth-child(2) {
  width: 500px;
  height: 250px;
  top: -5px;
  left: 100px;
  border-top-left-radius: 250px 125px;
  border-top-right-radius: 250px 125px;
  border-bottom-left-radius: 250px 125px;
  border-bottom-right-radius: 250px 125px;
  box-shadow: inset 20px 30px 50px #2d79a0;
}
.forest .hill:nth-child(3) {
  width: 500px;
  height: 250px;
  top: 17px;
  left: -180px;
  border-top-left-radius: 250px 125px;
  border-top-right-radius: 250px 125px;
  border-bottom-left-radius: 250px 125px;
  border-bottom-right-radius: 250px 125px;
  box-shadow: inset 20px 30px 50px #2d79a0;
}

.grass {
  position: absolute;
  width: 600px;
  height: 300px;
  border-radius: 300px / 150px;
  top: 75%;
  left: -100px;
  background: #82d9a2;
  box-shadow: inset 20px 30px 60px #2d79a0;
}

.pokemon {
  position: absolute;
  width: 300px;
  height: 110px;
  left: calc(53% - 150px);
}

.poke {
  position: absolute;
  width: 100px;
  height: 100px;
}

#bulbasaur:before {
  content: '';
  position: absolute;
  width: 100px;
  height: 50px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 100%;
  top: 50px;
  left: 15px;
  transform: rotate(-15deg);
}
#bulbasaur .head {
  position: absolute;
  width: 60px;
  height: 45px;
  background-color: #00efd0;
  border-top-left-radius: 50% 25px;
  border-top-right-radius: 50% 25px;
  border-bottom-left-radius: 18px;
  border-bottom-right-radius: 18px;
  left: 55px;
}
#bulbasaur .ear {
  position: absolute;
  height: 20px;
  width: 23px;
  background-color: #00efd0;
  border-top-left-radius: 50px 90px;
  border-top-right-radius: 50px 90px;
  transform-origin: center bottom;
}
#bulbasaur .ear:nth-child(1) {
  transform: rotate(-45deg);
  left: 52px;
  top: -5px;
  animation: rotateLeftBulbEar 2s alternate infinite;
}
#bulbasaur .ear:nth-child(2) {
  transform: rotate(45deg);
  left: 87px;
  top: -5px;
  animation: rotateRightBulbEar 2s alternate infinite;
}
#bulbasaur .bulba-body {
  position: relative;
  width: 65px;
  height: 55px;
  background-color: #00efd0;
  left: 42px;
  top: 20px;
  border-radius: 100%;
  box-shadow: inset 10px -10px #00dbbe;
  animation: bodyBreathe 2s alternate infinite;
}
#bulbasaur .bulba-body:before, #bulbasaur .bulba-body:after {
  content: '';
  position: absolute;
}
#bulbasaur .bulba-body:before {
  width: 10px;
  height: 13px;
  top: 33px;
  left: 8px;
  background-color: #00c6ac;
  border-bottom-left-radius: 100%;
  border-bottom-right-radius: 30%;
  border-top-right-radius: 30%;
  border-top-left-radius: 50%;
  transform: rotate(-45deg);
}
#bulbasaur .bulba-body:after {
  width: 8px;
  height: 8px;
  top: 30px;
  left: 53px;
  background-color: #00dbbe;
  border-bottom-left-radius: 100%;
  border-bottom-right-radius: 30%;
  border-top-right-radius: 30%;
  border-top-left-radius: 50%;
  transform: rotate(65deg);
}
#bulbasaur .leg {
  position: absolute;
  width: 20px;
  height: 40px;
  background-color: #00efd0;
  border-bottom-left-radius: 35px 110%;
  border-bottom-right-radius: 35px 110%;
  box-shadow: inset 10px -20px #00d6ba;
  left: 90px;
  top: 30px;
}
#bulbasaur .bulbs {
  position: absolute;
  top: -1px;
  width: 55px;
  height: 55px;
  left: 50px;
  transform-origin: center;
  transform: rotate(45deg);
  z-index: 3;
  animation: bulbaBreathe 2s alternate infinite;
}
#bulbasaur .bulbs:before, #bulbasaur .bulbs:after {
  content: '';
  position: absolute;
  height: 45px;
  width: 45px;
  border-radius: 0 50% 50% 50%;
}
#bulbasaur .bulbs:before {
  transform: translate(-5px, 10px) rotate(7deg);
  background-color: #007061;
}
#bulbasaur .bulbs:after {
  transform: translate(10px, -5px) rotate(-7deg);
  background-color: #008a78;
}
#bulbasaur .bulb {
  position: absolute;
  top: 10px;
  right: 2px;
  left: 3px;
  width: 90%;
  height: 90%;
  border-radius: 0 50% 100% 50%;
  background-color: #00a38e;
  z-index: 4;
  box-shadow: inset 1px -5px #009480;
}

#pikachu {
  left: -.1em;
}
#pikachu:before {
  content: '';
  position: absolute;
  width: 60px;
  height: 80px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 100%;
  top: 50px;
  left: 115px;
  transform: rotate(40deg);
}
#pikachu .ear {
  position: absolute;
  height: 40px;
  width: 18px;
  background-color: #fff069;
  border-top-left-radius: 60px 150px;
  border-top-right-radius: 60px 150px;
  transform-origin: center bottom;
  overflow: hidden;
}
#pikachu .ear:nth-child(1) {
  transform: rotate(-35deg);
  left: 125px;
  top: -35px;
  animation: rotateLeftEar 1s alternate infinite;
}
#pikachu .ear:nth-child(1):after {
  content: '';
  position: absolute;
  background-color: #444;
  width: 150%;
  height: 15px;
  left: -8px;
  transform: rotate(-30deg);
}
#pikachu .ear:nth-child(2) {
  transform: rotate(50deg);
  left: 157px;
  top: -30px;
  animation: rotateRightEar 1s alternate infinite;
}
#pikachu .ear:nth-child(2):after {
  content: '';
  position: absolute;
  background-color: #444;
  width: 150%;
  height: 15px;
  left: 2px;
  transform: rotate(30deg);
}
#pikachu .hand {
  position: absolute;
  height: 38px;
  width: 15px;
  background-color: #fff069;
  border-top-left-radius: 60px 150px;
  border-top-right-radius: 60px 150px;
  transform-origin: center bottom;
  left: 123px;
  top: 5px;
  z-index: 5;
  transform: rotate(-40deg);
  animation: pikaPat .7s alternate infinite;
}
#pikachu .head {
  position: absolute;
  width: 60px;
  height: 45px;
  background-color: #fff069;
  border-top-left-radius: 50% 25px;
  border-top-right-radius: 50% 25px;
  border-bottom-left-radius: 18px;
  border-bottom-right-radius: 18px;
  left: 120px;
  width: 60px;
  height: 55px;
  top: -12px;
}
#pikachu .pika-body {
  position: absolute;
  width: 55px;
  height: 55px;
  background-color: #fff069;
  left: 122px;
  top: 20px;
  border-radius: 22px;
}
#pikachu .pika-body:before, #pikachu .pika-body:after {
  content: '';
  position: absolute;
  background-color: #9c5200;
  width: 70%;
  height: 7px;
  left: 13px;
  border-radius: 100%;
}
#pikachu .pika-body:before {
  top: 15px;
  z-index: 2;
}
#pikachu .pika-body:after {
  top: 30px;
}
#pikachu .pika-tail {
  position: absolute;
  height: 25px;
  width: 16px;
  background: #9c5200;
  border-radius: 5px;
  left: 150px;
  top: 40px;
  transform-origin: bottom center;
  transform: rotate(55deg);
  box-shadow: -2px 2px 1px rgba(68, 68, 68, 0.2);
  z-index: 2;
  animation: rotateTail 2s alternate infinite;
}
#pikachu .pika-tail:before, #pikachu .pika-tail:after {
  content: '';
  transform-origin: bottom center;
  position: absolute;
  background-color: #fff069;
}
#pikachu .pika-tail:before {
  height: 1.45rem;
  width: 1.4rem;
  top: -2rem;
  left: 0.25rem;
  transform: rotate(-90deg);
  border: 1px solid #9c5200;
  border-bottom-right-radius: 5px;
  z-index: 4;
  border-top: 1px solid #fff069;
}
#pikachu .pika-tail:after {
  background: #fff069;
  height: 3rem;
  width: 2rem;
  top: -2.8rem;
  left: -2.5rem;
  border-radius: 5px 5px 0 5px;
  border: 1px solid #9c5200;
}

.moon {
  position: absolute;
  width: 75px;
  height: 75px;
  background: #FFEFBA;
  background: -webkit-linear-gradient(135deg, #FFFFFF, #FFEFBA);
  background: linear-gradient(135deg, #FFFFFF, #FFEFBA);
  border: 5px solid #fffaf0;
  top: 10%;
  left: calc(50% - 45px);
  padding: 0;
  border-radius: 100%;
}
.moon li {
  position: absolute;
  border-radius: 100%;
}
.moon li:nth-child(1) {
  background: #ffe691;
  background: -webkit-linear-gradient(45deg, rgba(255, 250, 240, 0.1), #ffe691);
  background: linear-gradient(45deg, rgba(255, 250, 240, 0.1), #ffe691);
  width: 20px;
  height: 20px;
  left: 5px;
  top: 30px;
}
.moon li:nth-child(2) {
  background: #ffe691;
  background: -webkit-linear-gradient(to left, rgba(255, 250, 240, 0.1), #ffe691);
  background: linear-gradient(to left, rgba(255, 250, 240, 0.1), #ffe691);
  width: 35px;
  height: 35px;
  left: 35px;
  top: 35px;
}
.moon li:nth-child(3) {
  background: #ffe691;
  background: -webkit-linear-gradient(-120deg, rgba(255, 250, 240, 0.1), #ffe691);
  background: linear-gradient(-120deg, rgba(255, 250, 240, 0.1), #ffe691);
  width: 25px;
  height: 25px;
  left: 25px;
  top: 5px;
}

.sparkles {
  position: absolute;
  width: 120%;
  height: 190px;
  top: 30%;
  left: -45px;
}
.sparkles .sparkle {
  position: absolute;
  width: 11px;
  height: 11px;
  border-radius: 100%;
}
.sparkles .sparkle:nth-child(1) {
  background-color: #e9fbff;
  box-shadow: 0px 0px 10px #e9fbff;
}
.sparkles .sparkle:nth-child(2) {
  background-color: #e9fbff;
  box-shadow: 0px 0px 10px #e9fbff;
}
.sparkles .sparkle:nth-child(3) {
  background-color: #fffce6;
  box-shadow: 0px 0px 10px #fffce6;
}
.sparkles .sparkle:nth-child(4) {
  background-color: #e9fbff;
  box-shadow: 0px 0px 10px #e9fbff;
}
.sparkles .sparkle:nth-child(5) {
  background-color: #f3ffe4;
  box-shadow: 0px 0px 10px #f3ffe4;
}
.sparkles .sparkle:nth-child(6) {
  background-color: #fffce6;
  box-shadow: 0px 0px 10px #fffce6;
}
.sparkles .sparkle:nth-child(7) {
  background-color: #f3ffe4;
  box-shadow: 0px 0px 10px #f3ffe4;
}
.sparkles .sparkle:nth-child(8) {
  background-color: #f3ffe4;
  box-shadow: 0px 0px 10px #f3ffe4;
}
.sparkles .sparkle:nth-child(9) {
  background-color: #ffeefc;
  box-shadow: 0px 0px 10px #ffeefc;
}
.sparkles .sparkle:nth-child(10) {
  background-color: #fffce6;
  box-shadow: 0px 0px 10px #fffce6;
}
.sparkles .sparkle:nth-child(11) {
  background-color: #ffeefc;
  box-shadow: 0px 0px 10px #ffeefc;
}
.sparkles .sparkle:nth-child(12) {
  background-color: #f3ffe4;
  box-shadow: 0px 0px 10px #f3ffe4;
}
.sparkles .sparkle:nth-child(13) {
  background-color: #e9fbff;
  box-shadow: 0px 0px 10px #e9fbff;
}
.sparkles .sparkle:nth-child(14) {
  background-color: #f3ffe4;
  box-shadow: 0px 0px 10px #f3ffe4;
}
.sparkles .sparkle:nth-child(15) {
  background-color: #ffeefc;
  box-shadow: 0px 0px 10px #ffeefc;
}
.sparkles .sparkle:nth-child(16) {
  background-color: #f3ffe4;
  box-shadow: 0px 0px 10px #f3ffe4;
}
.sparkles .sparkle:nth-child(17) {
  background-color: #f3ffe4;
  box-shadow: 0px 0px 10px #f3ffe4;
}
.sparkles .sparkle:nth-child(18) {
  background-color: #ffeefc;
  box-shadow: 0px 0px 10px #ffeefc;
}
.sparkles .sparkle:nth-child(19) {
  background-color: #f3ffe4;
  box-shadow: 0px 0px 10px #f3ffe4;
}
.sparkles .sparkle:nth-child(20) {
  background-color: #ffeefc;
  box-shadow: 0px 0px 10px #ffeefc;
}
.sparkles .sparkle:nth-child(21) {
  background-color: #fffce6;
  box-shadow: 0px 0px 10px #fffce6;
}
.sparkles .sparkle:nth-child(22) {
  background-color: #f3ffe4;
  box-shadow: 0px 0px 10px #f3ffe4;
}
.sparkles .sparkle:nth-child(23) {
  background-color: #e9fbff;
  box-shadow: 0px 0px 10px #e9fbff;
}
.sparkles .sparkle:nth-child(24) {
  background-color: #fffce6;
  box-shadow: 0px 0px 10px #fffce6;
}
.sparkles .sparkle:nth-child(25) {
  background-color: #e9fbff;
  box-shadow: 0px 0px 10px #e9fbff;
}
.sparkles .sparkle:nth-child(26) {
  background-color: #ffeefc;
  box-shadow: 0px 0px 10px #ffeefc;
}
.sparkles .sparkle:nth-child(27) {
  background-color: #fffce6;
  box-shadow: 0px 0px 10px #fffce6;
}
.sparkles .sparkle:nth-child(28) {
  background-color: #e9fbff;
  box-shadow: 0px 0px 10px #e9fbff;
}
.sparkles .sparkle:nth-child(29) {
  background-color: #e9fbff;
  box-shadow: 0px 0px 10px #e9fbff;
}
.sparkles .sparkle:nth-child(30) {
  background-color: #ffeefc;
  box-shadow: 0px 0px 10px #ffeefc;
}
.sparkles .sparkle:nth-child(31) {
  background-color: #f3ffe4;
  box-shadow: 0px 0px 10px #f3ffe4;
}
.sparkles .sparkle:nth-child(32) {
  background-color: #f3ffe4;
  box-shadow: 0px 0px 10px #f3ffe4;
}

.one {
  left: 0;
  top: 0;
}
@keyframes flyOne {
  95% {
    opacity: 1;
  }
  100% {
    transform: translate(270px, 75px) scale(0);
    opacity: 0;
  }
}
.one:nth-child(1) {
  animation: flyOne 15s 0s infinite;
}
.one:nth-child(2) {
  animation: flyOne 15s 6.44s infinite;
}
.one:nth-child(3) {
  animation: flyOne 15s 12.88s infinite;
}
.one:nth-child(4) {
  animation: flyOne 15s 19.32s infinite;
}

.two {
  right: 0;
}
@keyframes flyTwo {
  95% {
    opacity: 1;
  }
  100% {
    transform: translate(-270px, 75px) scale(0);
    opacity: 0;
  }
}
.two:nth-child(5) {
  animation: flyTwo 21s 2.7s infinite;
}
.two:nth-child(6) {
  animation: flyTwo 21s 8s infinite;
}
.two:nth-child(7) {
  animation: flyTwo 21s 13.3s infinite;
}
.two:nth-child(8) {
  animation: flyTwo 21s 18.6s infinite;
}

.three {
  left: 0;
  top: 100%;
}
@keyframes flyThree {
  95% {
    opacity: 1;
  }
  100% {
    transform: translate(270px, -75px) scale(0);
    opacity: 0;
  }
}
.three:nth-child(9) {
  animation: flyThree 17s 1.4s infinite;
}
.three:nth-child(10) {
  animation: flyThree 17s 9.9s infinite;
}
.three:nth-child(11) {
  animation: flyThree 17s 18.4s infinite;
}
.three:nth-child(12) {
  animation: flyThree 17s 26.9s infinite;
}

.four {
  right: 0;
  top: 100%;
}
@keyframes flyFour {
  95% {
    opacity: 1;
  }
  100% {
    transform: translate(-270px, -75px) scale(0);
    opacity: 0;
  }
}
.four:nth-child(13) {
  animation: flyFour 25s 5.8s infinite;
}
.four:nth-child(14) {
  animation: flyFour 25s 10.4s infinite;
}
.four:nth-child(15) {
  animation: flyFour 25s 15s infinite;
}
.four:nth-child(16) {
  animation: flyFour 25s 19.6s infinite;
}

.five {
  left: 0;
  top: 50%;
}
@keyframes flyFive {
  95% {
    opacity: 1;
  }
  100% {
    transform: translate(270px, 0px) scale(0);
    opacity: 0;
  }
}
.five:nth-child(17) {
  animation: flyFive 35s 8.7s infinite;
}
.five:nth-child(18) {
  animation: flyFive 35s 14.4s infinite;
}
.five:nth-child(19) {
  animation: flyFive 35s 20.1s infinite;
}
.five:nth-child(20) {
  animation: flyFive 35s 25.8s infinite;
}

.six {
  right: 0;
  top: 50%;
}
@keyframes flySix {
  95% {
    opacity: 1;
  }
  100% {
    transform: translate(-270px, 0px) scale(0);
    opacity: 0;
  }
}
.six:nth-child(21) {
  animation: flySix 23.5s 10.6s infinite;
}
.six:nth-child(22) {
  animation: flySix 23.5s 15s infinite;
}
.six:nth-child(23) {
  animation: flySix 23.5s 19.4s infinite;
}
.six:nth-child(24) {
  animation: flySix 23.5s 23.8s infinite;
}

.seven {
  left: 0;
  top: 25%;
}
@keyframes flySeven {
  95% {
    opacity: 1;
  }
  100% {
    transform: translate(270px, 37px) scale(0);
    opacity: 0;
  }
}
.seven:nth-child(25) {
  animation: flySeven 29s 5s infinite;
}
.seven:nth-child(26) {
  animation: flySeven 29s 12.67s infinite;
}
.seven:nth-child(27) {
  animation: flySeven 29s 20.34s infinite;
}
.seven:nth-child(28) {
  animation: flySeven 29s 28.01s infinite;
}

.eight {
  right: 0;
  top: 25%;
}
@keyframes flyEight {
  95% {
    opacity: 1;
  }
  100% {
    transform: translate(-270px, 37px) scale(0);
    opacity: 0;
  }
}
.eight:nth-child(29) {
  animation: flyEight 28.5s 1.6s infinite;
}
.eight:nth-child(30) {
  animation: flyEight 28.5s 5.34s infinite;
}
.eight:nth-child(31) {
  animation: flyEight 28.5s 9.08s infinite;
}
.eight:nth-child(32) {
  animation: flyEight 28.5s 12.82s infinite;
}

@keyframes pikaPat {
  from {
    transform: rotate(-40deg);
  }
  to {
    transform: rotate(-50deg);
  }
}
@keyframes rotateTail {
  from {
    transform: rotate(55deg);
  }
  to {
    transform: rotate(65deg);
  }
}
@keyframes rotateLeftEar {
  from {
    transform: rotate(-35deg);
  }
  to {
    transform: rotate(-40deg);
  }
}
@keyframes rotateRightEar {
  from {
    transform: rotate(50deg);
  }
  to {
    transform: rotate(60deg);
  }
}
@keyframes bulbaBreathe {
  from {
    transform: rotate(45deg) scale(1);
  }
  to {
    transform: rotate(45deg) scale(1.01);
  }
}
@keyframes bodyBreathe {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.05);
  }
}
@keyframes rotateLeftBulbEar {
  from {
    transform: rotate(-45deg);
  }
  to {
    transform: rotate(-55deg);
  }
}
@keyframes rotateRightBulbEar {
  from {
    transform: rotate(45deg);
  }
  to {
    transform: rotate(55deg);
  }
}