@import url('https://fonts.googleapis.com/css?family=Poppins');
@import url('https://fonts.googleapis.com/css?family=Pangolin');
@import url('https://fonts.googleapis.com/css?family=Sniglet');

/*** Clouds ***/
#clouds {
    position: absolute;
}

#c1{
    top: 80px;
  z-index: 100;
  -webkit-animation: move 15s linear infinite backwards;
  -moz-animation: move 15s linear infinite backwards;
  -o-animation: move 15s linear infinite backwards;
  animation: move 15s linear infinite backwards;
}	

#c2 {
	top: 240px;
  z-index: 200;
  -webkit-animation: move 30s linear  infinite backwards;
  -moz-animation: move 30s linear  infinite backwards;
  -o-animation: move 30s linear  infinite backwards;
  animation: move 30s linear  infinite backwards;
}

#c3 {
	top: 240px;
  z-index: 200;
  -webkit-animation: move 35s linear  infinite backwards;
  -moz-animation: move 35s linear  infinite backwards;
  -o-animation: move 35s linear  infinite backwards;
  animation: move 35s linear  infinite backwards;

}

#c4{
    top: 80px;
  z-index: 100;
  -webkit-animation: move 25s linear infinite;
  -moz-animation: move 25s linear infinite;
  -o-animation: move 25s linear infinite;
  animation: move 25s linear infinite;
}

@-webkit-keyframes move {
  from {-webkit-transform: translateX(-400px);}
  to {-webkit-transform: translateX(2048px);}
}

/*** STARS ***/
#ys11,#ys9,#ys7,#ys5,#ys3,#ys1,#ys2,#ys4,#ys6 {
    animation: float 2s infinite ease-out;
}

@keyframes float {
    0% {
        transform: translateY(0px);
    }
    100% {
        opacity: 0;
        transform: translateY(-15px);
    }
}

 

#ys8,#ys10 {
    animation: popup2 5s infinite;
}


@keyframes popup2 {
    0% {
        opacity: 0;
        transform: translateY(0px);
    }
    50% {
        opacity: 1;
        transform: translateY(-50px);
    }
    100% {
        opacity: 0;
        
    }
}
/*redstars*/
#redstars {
    animation: popup2 2s ease-in infinite;
}


@keyframes popup2 {
    0% {
        opacity: 0;
        
    }
    50% {
        opacity: 1;
        
        
    }
    100% {
        opacity: 0;
        
    }
}
/*planet &eggs*/

@-webkit-keyframes rotate {
    
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(360deg);}
    
}

@-moz-keyframes rotate {
    from {-moz-transform: rotate(0deg);}
    to {-moz-transform: rotate(360deg);}
    
}

@keyframes rotate {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
    
}

#planetring  {
      -webkit-animation-name: rotate; 
    -webkit-animation-duration: 25s; 
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: rotate; 
    -moz-animation-duration: 25s; 
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    animation-name: rotate; 
    animation-duration: 25s; 
    animation-iteration-count: infinite;
    animation-timing-function: linear;
     transform-origin:50%;
    
}
/*bigrabbitRotate*/
@-webkit-keyframes rotateanticlockwise {
    
    0% {-webkit-transform: rotate(360deg);}
    100% {-webkit-transform: rotate(0deg);}
    
}

@-moz-keyframes rotateanticlockwise {
    0% {-moz-transform: rotate(360deg);}
     100% {-moz-transform: rotate(0deg);}
    
}

@keyframes rotateanticlockwise {
    0% {transform: rotate(360deg);}
     100% {transform: rotate(0deg);}
    
}

#Bigrabbit {
      -webkit-animation-name: rotateanticlockwise; 
    -webkit-animation-duration: 15s; 
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: rotate; 
    -moz-animation-duration: 15s; 
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    animation-name: rotateanticlockwise; 
    animation-duration: 15s; 
    animation-iteration-count: infinite;
    animation-timing-function: linear;
     transform-origin:50%;
    
}

/*rabbitwobble*/
@-webkit-keyframes hvr-wobble-top {
  16.65% {
    -webkit-transform: skew(-12deg);
    transform: skew(-12deg);
  }
  33.3% {
    -webkit-transform: skew(10deg);
    transform: skew(10deg);
  }
  49.95% {
    -webkit-transform: skew(-6deg);
    transform: skew(-6deg);
  }
  66.6% {
    -webkit-transform: skew(4deg);
    transform: skew(4deg);
  }
  83.25% {
    -webkit-transform: skew(-2deg);
    transform: skew(-2deg);
  }
  100% {
    -webkit-transform: skew(0);
    transform: skew(0);
  }
}
@keyframes hvr-wobble-top {
  16.65% {
    -webkit-transform: skew(-5deg);
    transform: skew(-5deg);
  }
  33.3% {
    -webkit-transform: skew(6deg);
    transform: skew(6deg);
  }
  49.95% {
    -webkit-transform: skew(-3deg);
    transform: skew(-3deg);
  }
  66.6% {
    -webkit-transform: skew(4deg);
    transform: skew(4deg);
  }
  83.25% {
    -webkit-transform: skew(-2deg);
    transform: skew(-2deg);
  }
  100% {
    -webkit-transform: skew(0);
    transform: skew(0);
  }
}

#Bigrabbit:hover, #Bigrabbit:focus, #Bigrabbit:active {
  -webkit-animation-name: hvr-wobble-top;
  animation-name: hvr-wobble-top;
  -webkit-animation-duration: .5s;
  animation-duration: .5s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
  cursor: pointer;
}


/*eyeblink*/
#lefteye, #righteye {
  -webkit-animation-name: blink;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite; 
  -webkit-transform-origin: center;
  
  animation-name: blink;
  animation-duration: 2s;
  animation-iteration-count: infinite; 
  
}

@-webkit-keyframes blink { 
  0% { -webkit-transform: scaleX(1) scaleY(1); } 
  1% { -webkit-transform: scaleX(1.3) scaleY(0.1); } 
  2% { -webkit-transform: scaleX(1) scaleY(1); } 
  60% { -webkit-transform: scaleX(1) scaleY(1); } 
  61% { -webkit-transform: scaleX(1.3) scaleY(0.1);} 
  62% { -webkit-transform: scaleX(1) scaleY(1); } 
  100% { -webkit-transform: scaleX(1) scaleY(1); }
    
}


@keyframes blink { 
  0% { transform: scaleX(1) scaleY(1); } 
  1% { transform: scaleX(1.3) scaleY(0.1); } 
  2% { transform: scaleX(1) scaleY(1); } 
  60% { transform: scaleX(1) scaleY(1); } 
  61% { transform: scaleX(1.3) scaleY(0.1);} 
  62% { transform: scaleX(1) scaleY(1); } 
  100% { transform: scaleX(1) scaleY(1); }
}

/*carrot*/

#carrots_1_ {
	will-change: transform;
	transform: translateY(-1800px);
	animation: fall 20s infinite linear;
    cursor: pointer;
}

@keyframes fall {
	
	100% {
		transform: translateY(0);
	}
}

.popup{
  position:fixed;
  left:50vw;
  margin-left:35px;
  top:50vh;
  margin-top:-210px;
  opacity:0;
  transition:all 1s;
  -webkit-transition:all 1s;
}


.popup div
{
  width:120px;
  font-size:20px;
}

.popup div
{
  padding:50px;
  background-color:black;
  border-radius:40px;
  color:white;
  text-align:center;
}