s1 {
         color: #0000FF; 
         opacity:1;
         font-size: 38px; 
         font-weight: 600;
         font-family: sweetheart monospace; 
         text-shadow: 2px 2px 2px #B9B9B9; 
       }

 s2 {
        width:500px; 
         color: #0000FF; 
         opacity:1;
         font-size: 26px; 
         font-weight: 500;
         font-family: arial; 
         text-shadow: 2px 2px 1px #B9B9B9; 
       }

 s3 {
 	    width:500px; 
 	    color:#000000; 
         font-weight:380;
         font-size:20px; 
         font-family:arial; 
         text-shadow: 2px 2px 1px #B9B9B9; 
         text-align:justify; 
         display: inline-block;
        }           
        
    @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'); }      
       e {
         color: #FF0000; 
         font-size: 100px; 
         font-family: butterflies monospace; 
         text-shadow: 3px 2px 1px #000000, 3px 1px 110px #EEEEEE; 
         animation-name: fly1; 
         transform-origin: 50% 50%;  
         animation-duration: 3s;
         animation-iteration-count: 2;
         animation-direction: alternate;
         animation-timing-function: linear;
         display: inline-block;
    }     
      
@keyframes fly1 {
	
0%{
top: -90%;
left:10%;
opacity:.2;
transform:scale(1.046) rotate3d(-88,.90,.175,-30deg) translateX(120px); 
  }

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

100%{
left: 10%;
top: 130%;
opacity:1;
transform:scale(1.2) rotateZ(-60deg) 
   }
}

body {
    align-items: center;
    background: $color-background;
    display: flex;
    justify-content: center;
    perspective-origin: 50% 50%;
    perspective: 800px;
}

.butterfly {
    animation: flutter 550ms cubic-bezier(.48,.01,.54,1) infinite;
    animation-direction: alternate;
    animation-fill-mode: reverse;
    position: relative;
    top: -300px;
    transform-style: preserve-3d;
    transform: rotateX(50deg) rotateY(20deg) rotateZ(-50deg) translateY(0px);
    width: 10px;
    
    &::before {
        background: darken($color-background,55%);
        background-color: #5B310B; 
        opacity:.8;
        border-radius: 50%;
        content: '()';
        display: block;
        height: 60px;
        left: 50%;
        margin-left: 0px;
        border-width:3px; 
        border-color: black; 
        outline: 3px solid #330000;
        position: absolute;
        top: 5px;
        transform: rotatey(100deg);
        width: 10px;
        z-index: 2;
    }
}



.wing {
    background: #FFFFFF;
    display: block;
    opacity: 0.7;
    outline: 2px solid black;
    border-radius:50%;
    position: absolute;
    top: 2px;
    
    &:first-child {
        animation: leftflap 250ms cubic-bezier(.48,.01,.54,1) infinite;
        animation-direction: alternate;
        animation-fill-mode: reverse;
        border-radius:50%;
        height: 1px;
        left: 2px;
        transform: rotateY(-20deg);
        transform-origin: 700% 50%;
        width: 1px;
        z-index: 3;
    }
    
    &:last-child {
        animation: rightflap 250ms cubic-bezier(.48,.01,.54,1) infinite;
        animation-direction: alternate;
        animation-fill-mode: reverse;
        border-radius:50%;
        right:0px;
        transform: rotateY(200deg);
        z-index: 1;
    }
    
    .bit {
        background: linear-gradient(25turn, #00FFFF, blue);
    }
    .bit::after {
        background: $color-sub-wing;
    }
    
    .bit, .bit::after {
        border-radius: 50%;
        overflow: hidden;
        position: absolute;
        right: 0px;
        top: 0px;
        transform-origin: 100% 50%;
    }
    
    .bit:first-child {
        height: 70px;
        text-align: center;
        top: 15px;
        transform: rotateZ(40deg);
        width: 130px;
        
        &::after {
            content: '';
            display: inline-block;
            height: 60px;
            left: -30px;
            top: 5px;
            width: 100px;
        }
    }
    
    .bit:last-child {
        height: 55px;
        transform: rotateZ(-40deg);
        width: 100px;
        
        &::after {
            content: '';
            display: inline-block;
            height: 45px;
            left: -24px;
            top: 5px;
            width: 60px;
            z-index:1;
        }
    }
}

@keyframes flutter {
    0% {
        transform: rotateX(50deg) rotateY(20deg) rotateZ(-50deg) translateZ(0px);
    }

    100% {
        transform: rotateX(50deg) rotateY(20deg) rotateZ(50deg) translateZ(-3px);
    }
}



@keyframes leftflap {
    0% {
        transform: rotateY(-20deg);
    }

    100% {
        transform: rotateY(90deg);
    }
}

@keyframes rightflap {
    0% {
        transform: rotateY(200deg);
    }

    100% {
        transform: rotateY(90deg);
    }
}
   
    &:flutter {
        background: lighten($color-twitter,53%);
    }
}