.outer_wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  width: 100%;
  height: 500px;
  overflow: hidden;
  border-top: 40px solid transparent;
}

.wrapper {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
}

.cat {
  position: absolute;
  bottom: 150px;
  left: 100px;
  height: 30px;
  width: 60px;
  transition: 1.5s;
  transform-origin: center;
  background-color: transparent;
}


/* body */

.body {
  position: absolute;
  height: 30px;
  width: 60px;
}

.face_left .body {
  animation: turn_body_left forwards 0.5s;
}

@keyframes turn_body_left {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(0.5, 1);
  }
}

.face_right .body {
  animation: turn_body_right forwards 0.5s;
}

@keyframes turn_body_right {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(0.5, 1);
  }
}

/* head */
.cat_head {
  position: absolute;
  height: 40px;
  width: 48px;
  right: -10px;
  top: -30px;
  transition: 0.5s;
  z-index: 50;
}

.first_pose .cat_head,
.face_left .cat_head {
  right: 22px;
}

/* tail */
.tail {
  position: absolute;
  top: -25px;
  height: 36px;
  width: 15px;
  animation: tail_motion forwards 2s;
  transform-origin: bottom right;
}

@keyframes tail_motion {

  0%,
  100% {
    left: -5px;
    transform: rotate(0deg) scale(1);
  }

  50% {
    left: -10px;
    transform: rotate(-50deg) scale(-1, 1);
  }
}

.first_pose .tail,
.face_left .tail {
  left: 45px;
  animation: tail_motion_alt forwards 2s;
}

@keyframes tail_motion_alt {

  0%,
  100% {
    left: 45px;
    transform: rotate(0deg) scale(1);
  }

  50% {
    left: 40px;
    transform: rotate(50deg) scale(-1, 1);
  }
}

/* legs */
.leg {
  position: absolute;
  height: 20px;
  width: 10px;
  transform-origin: top center;
}

.front_legs,
.back_legs {
  position: absolute;
  height: 30px;
  transition: 0.7s;
}

.front_legs {
  width: 30px;
  right: 0;
}

.back_legs {
  width: 25px;
  left: 0;
}

.face_left .leg svg {
  transform: scale(-1, 1);
}

.face_right .front_legs {
  right: 0;
}

.first_pose .front_legs,
.face_left .front_legs {
  right: 30px;
}

.face_right .back_legs {
  left: 0;
}

.first_pose .back_legs,
.face_left .back_legs {
  left: 35px;
}

.one,
.three {
  bottom: -15px;
  right: 0;
}

.two,
.four {
  bottom: -15px;
  left: 0px;
}

.one.walk,
.three.walk {
  animation: infinite 0.3s walk;
}

.two.walk,
.four.walk {
  animation: infinite 0.3s walk_alt;
}

@keyframes walk {

  0%,
  100% {
    transform: rotate(-10deg);
  }

  50% {
    transform: rotate(10deg);
  }
}

@keyframes walk_alt {

  0%,
  100% {
    transform: rotate(10deg);
  }

  50% {
    transform: rotate(-10deg);
  }
}

/* jump */
.cat_wrapper {
  position: absolute;
  bottom: 0;
  z-index: 10;
}

.cat_wrapper.jump .one {
  animation: infinite 0.3s walk;
}

.cat_wrapper.jump .two {
  animation: infinite 0.3s walk_alt;
}

.cat_wrapper.jump .three,
.cat_wrapper.jump .four {
  animation: none;
}

.cat_wrapper.jump .cat.face_right .back_legs {
  transform-origin: center;
  transform: rotate(50deg);
}

.cat_wrapper.jump .cat.face_left .back_legs {
  transform-origin: center;
  transform: rotate(-50deg);
}

.cat_wrapper.jump .cat.face_right .front_legs {
  transform-origin: center;
  transform: rotate(-60deg);
}

.cat_wrapper.jump .cat.face_left .front_legs {
  transform-origin: center;
  transform: rotate(60deg);
}

.cat_wrapper.jump {
  animation: jump forwards 1s;
}

@keyframes jump {

  0% {
    bottom: 0px;
  }
  
  100% {
    bottom: 0px;
  }

  50% {
    bottom: 200px;
  }
}

.jump .face_left {
  animation: forwards 1s body_stand_left;
  transform-origin: right bottom;
}

.jump .face_right {
  animation: forwards 1s body_stand_right;
  transform-origin: left bottom;
}

@keyframes body_stand_right {
  0% {
    transform: rotate(0deg);
  }

  75% {
    transform: rotate(-45deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

@keyframes body_stand_left {
  0% {
      transform: rotate(0deg);
    }
  
    75% {
      transform: rotate(45deg);
    }
  
    100% {
      transform: rotate(0deg);
    }
}

svg {
  height: 100%;
  width: 100%;
}

polygon.eyes {
  fill: rgb(20, 170, 193);
}

polygon,
path {
  fill: white;
}

.sign {
  position: absolute;
  color: white;
  bottom: 10px;
  right: 10px;
  font-size: 10px;
}

a {
  color: white;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.heart-div {
  height: 20px;
  width: 20px;
  visibility: hidden;
  color: white;
  font-size: 16px;
  font-family: Pixelify Sans;
  position: relative;
}

.heart-div-visible {
  position: absolute;
  display: flex;
  align-items: center;
  pointer-events: none;
  visibility: visible;
  z-index: 10000;
  width: fit-content;
  height: fit-content;
  top: -30px;
  pointer-events: none;
  animation: bounceup 1s ease forwards;
}

#heart-icon-plusone {
  width: 20px;
  height: 20px;
}

@keyframes bounceup {
  0% {
    top: -30px;
  }

  100% {
    top: -100px;
    opacity: 0;
  }
}

.ground {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 150px;
  background-color: rgb(13, 16, 18);
}