*,
*:before,
*:after {
  box-sizing: border-box;
}
.ground{
  position: absolute;
  width: 100%;
  height: 10%;
  top:0;
  z-index: 12;
  text-align: center;
  font-size: 2vh;
  color: #fff;
}
body {
  padding: 0;
  margin: 0;
  font-family: sans-serif;
  background-color: #63ec85;
  background: url(../../bg5.jpg) no-repeat;
  height: 100%;
  width: 100%;
  background-size: cover;
  overflow: hidden;
}

.outer_wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
}

.wrapper {
  position: absolute;
  height: calc(100vh - 100px);
  width: 100%;
  top: 0;
}


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

/* 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;
}

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

.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%, 100%  {bottom: 0px;}
  50% {bottom: 200px;}
}

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

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

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

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

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

polygon.eyes {
  fill: rgb(1, 143, 96);
}

polygon,
path {
  fill: white;
}

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






h1 {
  font-size: 2.0rem;
  color: #fff;
  position: relative;
  position: absolute;
  left: 50%;
  top: 25%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  white-space: nowrap;
}
h1:after {
  content: "";
  position: absolute;
  width: 0;
  height: 4px;
  left: 0;
  bottom: -8px;
  background: #fff;
  transition: 500ms all ease-in-out;
}

a.cta {
  display: block;
  position: absolute;
  height: 50px;
  line-height: 50px;
  width: 120px;
  text-align: center;
  color: #fff;
  text-decoration: none;
  left: 50%;
  bottom: 10%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  border: 2px solid #fff;
  font-size: 0.75em;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  z-index: 10;
}
a.cta:before {
  content: "";
  background: #fff;
  height: 0;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  transition: 300ms all ease-in-out;
}
a.cta:hover:before {
  height: 4px;
}

.container {
  background: #09f;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 11;
  opacity: 0.8;
}
.container .one-half {
  position: absolute;
  width: 50%;
  height: 100%;
  overflow: hidden;
}
.container .one-half.left {
  left: 0;
  background-size: cover;
}
.container .one-half.left:before {
  content: "";
  width: 100%;
  height: 100%;
  background: rgba(255, 0, 120, 0.5);
  position: absolute;
}
.container .one-half.right {
  right: 0;
  background-size: cover;
}
.container .one-half.right:before {
  content: "";
  width: 100%;
  height: 100%;
  background: rgba(25, 120, 220, 0.5);
  position: absolute;
}
.container .one-half.left, .container .one-half.right {
  transition: 500ms all ease-in-out;
}
.container .one-half.left:before, .container .one-half.right:before {
  transition: 500ms all ease-in-out;
}
.container.left-is-hovered .left {
  width: 85%;
}
.container.left-is-hovered .left h1:after {
  width: 100%;
}
.container.left-is-hovered .right {
  width: 15%;
}
.container.left-is-hovered .right:before {
  background: rgba(0, 0, 0, 0.65);
  z-index: 2;
}
.container.right-is-hovered .right {
  width: 85%;
}
.container.right-is-hovered .right h1:after {
  width: 100%;
}
.container.right-is-hovered .left {
  width: 15%;
}
.container.right-is-hovered .left:before {
  background: rgba(0, 0, 0, 0.65);
  z-index: 2;
}




/* defaults */
/* =============================================== */
*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}



/* modal */
/* =============================================== */
.modal-container {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;

  display: none;
  justify-content: center;
  align-items: center;

  width: 100%;
  height: 100%;

  background: hsla(0, 0%, 40%, .6);
}

/* using :target */
.modal-container:target {
  display: flex;
}

.modal {
  width: 90rem;
  padding: 4rem 2rem;
  border-radius: .8rem;

  color: var(--light);
  background: var(--background);
  box-shadow: .4rem .4rem 2.4rem .2rem hsla(236, 50%, 50%, 0.3);
  position: relative;

  overflow: hidden;
  
}

.modal__details {
  text-align: center;

  margin-bottom: 4rem;
  padding-bottom: 4rem;
  border-bottom: 1px solid hsla(0, 0%, 100%, .4);
}

.modal__title {
  font-size: 1.5rem;
  top:150px;
  left: 350px;
}

.modal__description {
  margin-top: 2rem;

  font-size: 1.6rem;
  font-style: italic;
}

.modal__text {
  padding: 0 4rem;
  margin-bottom: 4rem;

  font-size: 1.6rem;
  line-height: 2;
}

.modal__text::before {
  content: '';

  position: absolute;
  top: 0%;
  left: 100%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);

  width: 18rem;
  height: 18rem;
  border: 1px solid hsla(0, 0%, 100%, .2);
  border-radius: 100rem;

  pointer-events: none;
}

.modal__btn {
  padding: 1rem 1.6rem;
  border: 1px solid hsla(0, 0%, 100%, .4);
  border-radius: 100rem;

  color: inherit;
  background: transparent;
  font-size: 1.4rem;
  font-family: inherit;
  letter-spacing: .2rem;

  transition: .2s;
  cursor: pointer;
}

.modal__btn:hover,
.modal__btn:focus {
  border-color: hsla(0, 0%, 100%, .6);
  -webkit-transform: translateY(-.2rem);
          transform: translateY(-.2rem);
}

/* links */
/* =============================================== */
.link-1 {
  font-size: 1.8rem;

  color: var(--light);
  background: var(--background);
  box-shadow: .4rem .4rem 2.4rem .2rem hsla(236, 50%, 50%, 0.3);
  border-radius: 100rem;
  padding: 1.4rem 3.2rem;

  transition: .2s;
}

.link-1:hover,
.link-1:focus {
  -webkit-transform: translateY(-.2rem);
          transform: translateY(-.2rem);
  box-shadow: 0 0 4.4rem .2rem hsla(236, 50%, 50%, 0.4);
}

.link-2 {
  width: 4rem;
  height: 4rem;
  border: 1px solid hsla(0, 0%, 100%, .4);
  border-radius: 100rem;

  color: white;
  font-size: 2.2rem;

  position: absolute;
  top: 12rem;
  right: 6rem;

  display: flex;
  justify-content: center;
  align-items: center;

  transition: .2s;
  z-index: 51;
}

.link-2::before {
  content: '×';

  -webkit-transform: translateY(-.1rem);

          transform: translateY(-.1rem);
}

.link-2:hover,
.link-2:focus {
  border-color: hsla(0, 0%, 100%, .6);
  -webkit-transform: translateY(-.2rem);
          transform: translateY(-.2rem);
}