@font-face { font-family: sweetheart monospace; src: url('../../fonts/sweetheart.ttf'); } 
  s1 {
         color: #00DDEE; 
         opacity:1;
         font-size: 38px; 
         font-weight: 600;
         font-family: sweetheart monospace; 
         text-shadow: 3px 2px 1px #EEEEEE, 3px 2px 1px #88009E;
        }
	
 
 @font-face { font-family: butterflies monospace; src: url('../fonts/butterflies.ttf'); }      
       e {
         color: #00FF00; 
         font-size: 100px; 
         font-family: butterflies monospace; 
         text-shadow: 3px 2px 1px #000000, 3px 2px 1px #88009E;
         animation-name: fly0; 
         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'); }      
       e1 {
         color: #00FF00; 
         font-size: 100px; 
         font-family: butterflies monospace; 
         text-shadow: 3px 2px 1px #000000, 3px 2px 1px #88009E;
         animation-name: fly1; 
         transform-origin: 70% 70%;  
         animation-duration: 5s;
         animation-iteration-count: 3;
         animation-direction: alternate;
         animation-timing-function: linear;
         display: inline-block;
      }     
      
 @keyframes fly {
	
0%{
top: -90%;
left:10%;
opacity:.2;
transform:scale(1.046) rotate3d(-88,.90,.175,0deg) translateX(120px); 
  }

90%{
left: 120%;
top: 190%;
opacity:1;
transform:scale(1.046) rotate3d(188, 90,175, 20deg) translateX(-120px) translateY(620px); 
  }

100%{
left: 20%;
top: 150%;
opacity:1;
transform:scale(1.2) rotateZ(-90deg) 
   }
}


  @keyframes  fly0 {
  0% {
   color: #ee6055;
  }
  25% {
    color: #60d394; 
    transform:   rotate(35deg)  scale(66px) translateX (-120px) translateY(90px);
  }
  50% {
    color: #FF00FF;opacity:80%;font-size:90px; 
  }
  60% { 
  	color: #FFFF00;
      transform:   rotate (35deg)  translateX(320px) translateY(90px)
   }
  75% {
    color: #00FFFF;  
    transform: rotate(30deg)  translateY(-50px)
  }
 100% {
    color:: #0000FF;
    
  }
}    
 



@keyframes fly1{
	
0%{
top: -90%;
left:10%;
opacity:.2;
transform:scale(1.046) rotate3d(-88,.90,.15,0deg) translateX(10px); 
  }

60%{
left: 150%;
top: 190%;
opacity:1;
transform:scale(1.046) rotate3d(188, 90,175, 20deg) translateX(-120px) translateY(320px); 
  }
  
 70%{
left: 150%;
top: 190%;
opacity:1;
transform:scale(1.046) rotate3d(188, 60,175, 120deg) translateX(-150px) translateY(350px); 
  }
  
90%{
left: 120%;
top: 120%;
opacity:1;
transform:scale(1.046) rotate3d(188, 90,175, 20deg) translateX(-120px) translateY(320px); 
  }

100%{
left: 20%;
top: 150%;
opacity:1;
transform:scale(1.2) rotateZ(90deg) 
   }
}