/* BODY */
body {
  text-align: center;

}
::selection {
  background: transparent;
}


/* JUMP */
#congra {
  cursor: default;
  position: absolute;
  top: 15%;
  left: 0;
  right: 0;
  width: 100%;
  height: 100px;
  margin: auto;
  display: block;

  text-align: center;
}
#congra span {
  position: relative;
  top: 20px;
  display: inline-block;

  -webkit-animation: bounce .3s ease infinite alternate;

  font-family: 'Coiny', cursive;
  font-size: 1.8em;
  color: #ffd7e0;
  text-shadow: 0 1px 0 #7f5d38,
               0 2px 0 #7f5d38,
               0 3px 0 #7f5d38,
               0 4px 0 #7f5d38,
               0 5px 0 #7f5d38,
               0 6px 0 transparent,
               0 7px 0 transparent,
               0 8px 0 transparent,
               0 9px 0 transparent,
               0 10px 10px rgba(0, 0, 0, .4);
}
#congra span:nth-child(2) {
  -webkit-animation-delay: .1s;
}
#congra span:nth-child(3) {
  -webkit-animation-delay: .2s;
}
#congra1 span:nth-child(4) {
  -webkit-animation-delay: .3s;
}
#congra span:nth-child(5) {
  -webkit-animation-delay: .4s;
}
#congra span:nth-child(6) {
  -webkit-animation-delay: .5s;
}
#congra span:nth-child(7) {
  -webkit-animation-delay: .6s;
}
#congra span:nth-child(8) {
  -webkit-animation-delay: .7s;
}
#congra span:nth-child(9) {
  -webkit-animation-delay: .8s;
}

#congra span:nth-child(10) {
  -webkit-animation-delay: .9s;
}

#congra span:nth-child(11) {
  -webkit-animation-delay: 1s;
}

#congra span:nth-child(12) {
  -webkit-animation-delay: 1.1s;
}
#congra span:nth-child(13) {
  -webkit-animation-delay: 1.2s;
}
#congra span:nth-child(14) {
  -webkit-animation-delay: 1.3s;
}
#congra span:nth-child(15) {
  -webkit-animation-delay: 1.4s;
}



/* ANIMATION */
@-webkit-keyframes bounce {
  100% {
    top: -20px;

    text-shadow: 0 1px 0 #7f5d38,
                 0 2px 0 #7f5d38,
                 0 3px 0 #7f5d38,
                 0 4px 0 #7f5d38,
                 0 5px 0 #7f5d38,
                 0 6px 0 #7f5d38,
                 0 7px 0 #7f5d38,
                 0 8px 0 #7f5d38,
                 0 9px 0 #7f5d38,
                 0 50px 25px rgba(0, 0, 0, .2);
  }
}


.congra_btn{
    width: 200px;
    height: 40px;
    font-size: 1.9em;

}



.btn_container {
    width: 100%;
    height: 30vh;
    position: absolute;
    right: 0;
    left: 0;
    margin: auto;
    bottom: -5%;
}



.happy_character{
    width: 17%;
    position:absolute;
    bottom: 30%;
    right: 0;
    left: 0;
    margin: auto;
    z-index: 999;
}

.happy_animals {
    width: 17%;
    position:absolute;
    bottom: 25%;
}

.happy_panda {
    animation: HappyPanda .4s ease infinite alternate;
}

@keyframes HappyPanda{
    100%{transform: translate(0,-100px);}
}

.happy_lion {
    animation: HappyLion .8s ease infinite alternate;
}

@keyframes HappyLion{
    0%{transform: translate(0,0px);}
    50%{transform: translate(0,-8px);}
    100%{transform: translate(0,0px);}
}


.happy_penguin {
    animation: HappyPenguin 1s ease infinite alternate;
}

@keyframes HappyPenguin{
    0%{transform: translate(0,0px);}
    30%{transform: translate(0,-30px);}
    50%{transform: translate(0,0px);}
    70%{transform: translate(0,-30px);}
    90%{transform: translate(0,0px);}
    100%{transform: translate(0,0px);}
}


.happy_right {
   right: 5%;
   animation: HappyRight .8s ease-in-out infinite alternate;
}

@keyframes HappyRight{
    0%{transform: rotate(0deg);}
    100%{transform: rotate(4deg);}
}


.happy_left {
   left: 5%;
    animation: HappyLeft .8s ease-in-out infinite alternate;
}

@keyframes HappyLeft{
    0%{transform: rotate(0deg);}
    100%{transform: rotate(-4deg);}
}



/* FOR MOBILE  */

@media screen and (max-width:812px){

    #congra span  {
        font-size: 0.8em;

    }

    #congra {
        top: 5%;
    }

    .congra_btn{
        width: 150px;
        height: 20px;
        font-size: 1em;

    }

    .happy_character{
        width: 12%;
    }

    .happy_animals {
        width: 28%;
        bottom: 20%;
    }

    .happy_right {
       right: 10%;
    }

    .happy_left {
       left: 10%;
    }

}