h1 {color:white; text-align:center;}
h1 {background: radial-gradient(blue,purple,pink);
  width: 320px;
  border: 12px groove cyan;
  padding: 30px;
  margin: 10px;
 border-radius: 10% 8%}
.box-shadow {box-shadow:-16px 8px 9px #5a1aad; border-radius: 12% 18%,}

a:link {color:#512e80}
a:visited {color:#380029}
a:hover {color:#35172d}
a:active {color:#1e1680}

.text-shadow {text-shadow: 4px 4px 4px green;}
body {background-color:#1fd1ad; font-family:kanit, sans-serif; font-weight:700; font-style:normal;}

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

html {
    box-sizing: border-box;  
}

*, *:before, *:after {
    box-sizing: inherit;
}

html, body {
    height: 100%;
}

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

.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: dodgerblue;
    }
    .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%);
    }
}