@font-face { font-family: butterflies monospace; src: url('../../fonts/flowers1.ttf'); }      
       f {
         color: #00FF00; 
         font-size: 100px; 
         font-family: butterflies monospace; 
         text-shadow: 3px 2px 1px #000000, 3px 2px 110px #0000FF; 
         animation-name: flyy; 
         transform-origin: 70% 70%;  
         animation-duration: 5s;
         animation-iteration-count: 3;
         animation-direction: alternate;
         animation-timing-function: linear;
         display: inline-block;
      }     

@font-face { font-family: butterflies monospace; src: url('../../fonts/butterflies.ttf'); }           
     g {
         color: #FF5500; 
         font-size: 100px; 
         font-family: butterflies monospace; 
         text-shadow: 3px 2px 1px #000000, 100px 2px 100px #FFFF00;
         animation-name: fly; 
         transform-origin: 70% 70%;  
         animation-duration: 5s;
         animation-iteration-count: 3;
         animation-direction: alternate;
         animation-timing-function: linear;
         display: inline-block;
      }     


    .f {
         color:#FF5500; 
         font-size:78px; 
         text-shadow: 2px 1px 1px #000000, 100px 2px 100px #FFFF00;
         animation-name: wave1;
         animation-duration: 10s;        
         animation-iteration-count: infinite;  
         transform-origin: 70% 70%;     
        display: inline-block;
    }

@keyframes fly {
	
    0% { transform: rotate( 0.0deg) }
   10% { transform: rotate(14.0deg) }  
   
   30% { transform: rotate(14.0deg) translateY(-60px)  translate(50px) }
   40% { transform: rotate(20.0deg) translateY(-50px)  translate(58px) }
   
   45% { transform: rotate(14.0deg) translateY(-60px)  translate(40px) }
   50% { transform: rotate(20.0deg) translateY(-50px)  translate(48px) }
   
   55% { transform: rotate(14.0deg) translateY(-60px)  translate(50px) }
   60% { transform: rotate(20.0deg) translateY(-50px)  translate(58px) }
   
   65% { transform: rotate(14.0deg) translateY(-60px)  translate(60px) }
   70% { transform: rotate(20.0deg) translateY(-50px)  translate(60px) }
   
   75% { transform: rotate( 30.0deg) }  
   
   80% { transform: rotate( 280.0deg) }
   90% { transform: rotate( 360.0deg) }
  100% { transform: rotate( 0.0deg) translateY(-20px) translate(90px) }
}