$color-wing: green;
$color-sub-wing: lighten(green, 10%);
$color-background: #d6c18b;
$color-twitter: #4099FF;

html {
    box-sizing: border-box;  
}


*, *:before, *:after {
    box-sizing: inherit;
}
*:focus {
    outline: 0 !important;
}

.btn{
   z-index:50;
   cursor:pointer;
   position:absolute;
  top:50px;
  border:none;
  background-color:transparent;
  background-image:none;
 box-shadow:none;
 outline:none;
width:40px;
}

.btn:hover {
-webkit-filter: grayscale(50%) invert(100%);
   filter: grayscale(50%) invert(100%);
}

#pause_play{
   position:relative;
    left:2%;
    height:auto;
   border:none;
   background-color:transparent;
   background-image:none;
   box-shadow:none;
}
.butterfly_container{
    position:absolute;
    top: 11%;
   right: 2%;
}
.butterfly {
    animation: hover 250ms cubic-bezier(.48,.01,.54,1) infinite;
    animation-direction: alternate;
    animation-fill-mode: reverse;
    position: relative;
    transform-style: preserve-3d;
    transform: rotateX(50deg) rotateY(20deg) rotateZ(-50deg) translateY(0px);
    width: 30px;
    
    &::before {
        background: darken($color-background,55%);
        border-radius: 50%;
        content: '';
        display: block;
        height: 110px;
        left: 50%;
        margin-left:-10px;
        outline: 1px solid transparent;
        position: absolute;
        top: -15px;
        transform: rotatey(100deg);
        width: 20px;
        z-index: 2;
    }
}

.shadow {
    animation: shadow 250ms cubic-bezier(.48,.01,.54,1) infinite;
    animation-direction: alternate;
    animation-fill-mode: reverse;
    background: #000;
    border-radius: 50%;
    display: block;
    height: 10px;
    opacity: 0.1;
    transform-origin: 50% 50%;
    transform: translateX(-40px) translateY(100px);
    width: 100px;

}

.wing {
    background: #888;
    display: block;
    opacity: 0.7;
    outline: 1px solid transparent;
    position: absolute;
    top: 0;
    
    &:first-child {
        animation: leftflap 250ms cubic-bezier(.48,.01,.54,1) infinite;
        animation-direction: alternate;
        animation-fill-mode: reverse;
        height: 1px;
        left: 0;
        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;
        right:0;
        transform: rotateY(200deg);
        z-index: 1;
    }
    
    .bit {
        background: green;
    }
    .bit::after {
        background: $color-sub-wing;
    }
    
    .bit, .bit::after {
        border-radius: 50%;
        overflow: hidden;
        position: absolute;
        right: 0;
        top: 0;
        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 hover {
    0% {
        transform: rotateX(50deg) rotateY(20deg) rotateZ(-50deg) translateZ(0px);
    }

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

@keyframes shadow {
    0% {
        transform: translateX(-40px) translateY(100px) scale(1,1);
    }

    100% {
        transform: translateX(-40px) translateY(100px) scale(1.1,1.1);
    }
}

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

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

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

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


.twitter {    
    background: $color-twitter;
    border-radius: 5px;
    bottom: 5px;
    color: #fff;
    font-family: sans-serif;
    font-size: 13px;
    padding: 5px 10px;
    position: absolute;
    right: 5px;
    text-decoration: none;
    
    &:hover {
        background: lighten($color-twitter,3%);
    }
}