body
{
		background-image: url("webbg.jpg");
		 height:5000px;
background-color: black; color:red;
	}



 h2:hover, p:hover {
 /* background-color: lightpink; 
 */
 opacity:0.5;


}


 /* objects
 */

.stick {
 
  height: 500px;
 content: url('stick.png');
  background-size: contain; 
  background-repeat: no-repeat;
  
}



.face {
 
  height: 50px;
 content: url('face.png');
  background-size: contain; 
  background-repeat: no-repeat;
  
}






 /* animation functions
 */
 
   .hover-face {
 

    /* This makes the movement smooth */
    transition: transform 0.5s ease; 
  }
 
  .hover-face:hover {
 transform: scale(1.35) rotate(360deg); 
     opacity: 0.3; 
  }
  
  




   .hover-zoom {
 

    /* This makes the movement smooth */
    transition: transform 0.3s ease; 
  }
 
  .hover-zoom:hover {
 transform: scale(1.35) ; 
     opacity: 0.7; 
  }


 
 
  .hover-icon {
     padding:25px ;

    /* This makes the movement smooth */
    transition: transform 0.3s ease; 
  }

  .hover-icon:hover {
    /* This is the animation action */
    transform: scale(1.1) rotate(36deg); 
  }
  
  
  
  
  .hover-iconrev {
     padding:25px ;
    width: 420px;
    height: 420px;
    /* This makes the movement smooth */
    transition: transform 0.3s ease; 
  }

  .hover-iconrev:hover {
    /* This is the animation action */
    transform: scale(1.1) rotate(-36deg); 
  }
  
  
  
  
  
  
  
  @keyframes announcement{
   
    
    
    25% {
      
       transform: rotate(5deg);
                  margin-left: 800px;
    }
    
    
    50% {
      margin-top: 100px;
    }
    
     
    75% {
      
       transform: rotate(-5deg);
                  margin-left: 600px;
    }
    
    
    90% {
       margin-top: 200px;
      
    }

    

100% {
      
       transform: rotate(0deg);
                  margin-left: 700px;
    }


}






@keyframes fadeIn {
  from {opacity: 0}
  to {opacity: 1}
}

.fadeInAnimated {
  opacity: 0;
  animation: fadeIn 2s forwards; /* forwards (animation-fill-mode) retains the style from the last keyframe when the animation ends */
}
#first {
  animation-delay: .5s;
}

#second {
  animation-delay: 1.3s;
}


	
	
	
	
	
		.div2 {
  width: 220px;
  height: 200px;
  padding: 50px;
  border: 0px solid red;
}