body{
    counter-reset:birds;
    -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
    overflow:hidden;
  }
  /*hide checkbox*/
  input{position:fixed; left:-10px; top:-10px;}
  
  h1{margin:0; text-align:center;}
  h2{position:fixed; right:20px; bottom:0; font-size:18px; color:red;}
  
  /*play area*/
  .wrapper{  
    height:500px;
    background: -webkit-linear-gradient(top, hsla(210,70%,80%,1) 0%,hsla(210,50%,100%,1) 100%);
    position:relative;
    cursor:crosshair;
  }
  /*count dead birds*/
  .input-circle:checked{
    counter-increment:birds;
  }
  
  .sum{position:fixed; left:45%; top:60px; font-size:24px; fonot-weight:bold;}
  
  /*print to screen dead birds*/
  .sum:after{
    content: counter(birds);
  }
  
  .input-circle ~ .pajaro{
    opacity:0;
    transition:0.3s  cubic-bezier(0,.43,1,0);
    animation: move 8s infinite alternate;
  }
  .input-circle1:not(:checked) ~ .pajaro1,
  .input-circle2:not(:checked) ~ .pajaro2,
  .input-circle3:not(:checked) ~ .pajaro3,
  .input-circle4:not(:checked) ~ .pajaro4,
  .input-circle5:not(:checked) ~ .pajaro5,
  .input-circle6:not(:checked) ~ .pajaro6
  {
    opacity:1; 
  }
  
  
  .input-circle1:checked ~ .pajaro1 span,
  .input-circle2:checked ~ .pajaro2 span,
  .input-circle3:checked ~ .pajaro3 span,
  .input-circle4:checked ~ .pajaro4 span,
  .input-circle5:checked ~ .pajaro5 span,
  .input-circle6:checked ~ .pajaro6 span
  {
    display:block;
    
  }
  
  .pajaro{   
    position:absolute;
    left:0;  
    cursor:crosshair;
  }
  .pajaro>span{
    display:none;position:absolute; z-index:2; left:-250%;bottom:-50%;  
    background-color:white; border:solid 2px #000; width:80px; height:30px; padding:10px; border-radius:50%;
  }
  .pajaro>span:before{
    content:"I'm Dead!"; color:red; font-weight:bold;
  }
  
  .pajaro1{top:50px;
    animation-delay: -2s!important;
    transform:scale(0.9);
  }
  .pajaro2{
    top:100px;
    animation-delay: -1s!important;
    transform:scale(0.8); 
  }
  .pajaro3{
    top:200px;
    animation-delay: -3s!important;
    transform:scale(1.4); 
  }
  
  .pajaro4{top:50px;
    animation-delay: -12s!important;
    transform:scale(0.9);
  }
  .pajaro5{
    top:100px;
    animation-delay: -16s!important;
    transform:scale(0.5); 
  }
  .pajaro6{
    top:200px;
    animation-delay: -20s!important;
    transform:scale(1.4); 
  }
  
  @keyframes move{
  0%{left:0%;}
  20%{left:20%;top:50%; }
  40%{top:30%; left:60%;}
  60%{top:80%;left:80%;}
  80%{top:10%; left:20%:}
  100%{top:30%; left:20%; }
  }
  
  
  .timer{
    background-color:#333; width:300px;height:50px;
    position:fixed;
  }
  
  
  .timer span{
    display:block;
    background:repeating-linear-gradient(-45deg, #000, rgba(0, 0, 0, 0) 25px, #FFF 25px, #FFF 50px);
    width:300px; height:50px;
    animation:timer 20s linear;
  }
  
  .timer span:before{  
    content:"TIME LEFT";
    display:block;
    position:absolute; z-index:3;
    left:0; 
    right:0;
    top:0;
    bottom:0;
    text-align:center;
    line-height:50px;
    font-size:25px;
    color:red;
  }
  @keyframes timer{
  0%{width:10px;}
  100%{width:300px; display:block;}
  }
  
  
  .gameover{
    position:fixed; z-index:100000; left:0; top:0; bottom:0; right:0; background-color:rgba(0,0,0,0.8);
    animation:gameover 20s linear forwards;
    font-size:80px; color:white; font-weight:bold; text-align:center; 
    text-indent:0;  
    line-height:500px;
  }
  
  @keyframes gameover{
  0%{left:-5000px;bottom:100%;}
  97%{left:-5000px;bottom:100%;}
  100%{ left:0px;}
  }
  
  footer{position:fixed; left:0; bottom:0; padding:10px 20px;}
  footer svg{vertical-align:middle;}
  footer a{text-decoration:none;  font-size:20px; color:rgba(29,161,242,1.00); vertical-align:middle;}
  
  
  
  
  /*------------------------------------------------------ body of the bird
  */
  
  .pajaro{
    background:black;
    border-radius: 50% 50% 20% 20%;
    color:white;
    line-height:20px;
    letter-spacing: 2px;
    font-size:0.8em;
    text-align:center;
    position:absolute;
   
    margin-top:-20px; margin-left:-10px;
    width:15px; height:15px;
    animation:planeo 0.8s linear infinite;
    z-index:999;
  }
  
  .pajaro:after,
  .pajaro:before{
    content:"";
    position:absolute;
    top:50%; left:50%;
  }
  
  /*------------------------------------------------------ bird wings
  */
  
  .pajaro:after{
    border-radius: 100% 100% 0 0;
    box-shadow: inset 0px 5px 0 black;
    width:100px; height:100px;
    margin-top:-7px; margin-left:-50px;
    transform-origin: 100% 0%;
    animation:alas 3s linear infinite;
  }
  
  /*------------------------------------------------------ bird beak
  */
  
  .pajaro:before{
    background:#FFC37F;
    border-radius: 100% 0% 20% 0%;
    margin-top:3px; margin-left:-4px;
    width:6px; height:6px;
    transform:rotateZ(45deg);
  }
  
  /*------------------------------------------------------ wings animation
  */
  
  @keyframes alas {
    50%{
      transform:rotateX(-1440deg);
    }
  }
  
  /*------------------------------------------------------ bird animation
  */
  
  @keyframes planeo {
    40%{
      transform:rotateZ(2deg) translateX(2px) translateY(10px) translateZ(0);
      line-height:16px;
      font-size:0.6em;
    }
    80%{
      transform:rotateZ(-2deg) translateX(5px) translateY(8px) translateZ(0);
    }
  }