:root {
  --upper-wing-color: linear-gradient(90deg,#55274E,#55274E,#25c4ec,#25c4ec,#25c4ec);
  --lower-wing-color: linear-gradient(90deg,#55274E,#55274E,#25c4ec,#25c4ec,#25c4ec);
  --background-color: #25c4ec;;
}
#butterWrapper{
 position:absolute;
 top: 25vw;
 left:48%;
 margin-top:-5vw;
 margin-left:-5vw;
 width:5vw;
 height:5vw;
 transform:rotate(-35deg);
 z-index:2;
 transition:left 1500ms ease-in-out 0s,top 1500ms ease-in-out 0s,transform 600ms ease-in-out 0s
}
@media (max-width: 768px) {
  #butterWrapper{
  position:absolute;
  top: 25vw;
  left:48%;
  margin-top:-5vw;
  margin-left:-5vw;
  width:10vw;
  height:10vw;
  transform:rotate(-35deg);
  z-index:2;
  transition:left 1500ms ease-in-out 0s,top 1500ms ease-in-out 0s,transform 600ms ease-in-out 0s
 }
}

#innerWrapper{
 position:absolute;
 top:0;
 left:0;
 width:100%;
 height:100%;
 transition:all 200ms ease-in-out 0s
}
#butterWrapper .flipMe{
 position:absolute;
 height:100%;
 width:100%;
 top:0;
 left:0;
 transform-origin:center;
 transform:scaleX(-1)
}
#butterWrapper .wing{
 position:relative;
 height:75%;
 width:49%;
 float:left;
 box-shadow:0 0 0 .2vw #000000 inset,0 0 .2vw .4vw #000000 inset;
 border-radius:14% 86% 0% 100% / 18% 57% 43% 82%;
 background-color:rgb(37,196,236);
 transform:scaleY(.7);
 transform-origin:right;
 transform-style:preserve-3d;
 animation-name:wingAnim;
 animation-duration:800ms;
 animation-iteration-count:2;
 animation-play-state:paused
}
#butterWrapper .wing .downWing{
 content:'';
 position:absolute;
 box-shadow:0 0 0 .2vw #000000 inset,0 0 .2vw .4vw #000000 inset;
 bottom:-35%;
 height:50%;
 width:100%;
 border-radius:54% 46% 57% 43% / 46% 0% 100% 54%;
 background-color:#25c4ec
}
#butterWrapper .wing .downWing::after{
 content:'';
 position:absolute;
 width:100%;
 height:100%;
 top:0;
 left:0;
 border-radius:54% 46% 57% 43% / 46% 0% 100% 54%;
 transform-origin:top right;
 transform:scale(.96,.95);
 border-left:.6vw dotted black
}
#butterWrapper .wing .downWing::before{
 content:'';
 position:absolute;
 width:100%;
 height:50%;
 top:10%;
 border-bottom:.3vw solid rgba(0,0,0,.2);
 border-radius:54% 46% 57% 43% / 46% 0% 100% 54%;
 transform:rotate(-25deg)
}
#butterWrapper .wing::after{
 content:'';
 position:absolute;
 width:100%;
 height:100%;
 top:0;
 left:0;
 border-radius:14% 86% 0% 100% / 18% 57% 43% 60%;
 transform-origin:top right;
 transform:scale(.96,.95);
 border-left:.7vw dotted black
}
#butterWrapper .wing:nth-of-type(2){
 background-color:red;
 transform-origin:left
}
#butterWrapper .wing .innerWing,#butterWrapper .wing .innerWing::after{
 position:absolute;
 width:100%;
 height:50%;
 top:30%;
 right:5%;
 border-top:.2vw solid rgba(0,0,0,.2);
 border-radius:14% 86% 0% 100% / 18% 57% 43% 82%;
 transform:rotate(15deg)
}
#butterWrapper .wing .innerWing::after{
 content:'';
 top:50%;
 width:60%;
 right:0;
 transform:rotate(-25deg)
}
#butterWrapper .middle{
 position:absolute;
 top:25%;
 height:60%;
 width:10%;
 left:45%;
 border-radius:50% 50% 50% 50% / 29% 29% 75% 75%;
 background-color:#000000;
 z-index:-1
}
#butterWrapper .middle .antena{
 position:absolute;
 width:100%;
 height:30%;
 top:0;
 left:0;
 margin-top:-100%;
 margin-left:-80%;
 border-radius:100%;
 border-right:2px solid black;
 transform:rotate(-15deg)
}
#butterWrapper .middle .antena:nth-of-type(2){
 margin-left:60%;
 border-left:2px solid black;
 border-right:none;
 transform:rotate(15deg)
}
#butterWrapper .shade{
 position:absolute;
 margin-top:.5vw;
 margin-left:.5vw;
 width:100%;
 height:100%;
 z-index:-2;
 filter:blur(.2vw);
 opacity:.6;
 animation-name:shadeAnim;
 animation-duration:1500ms;
 animation-play-state:paused
}
#butterWrapper .shade .wing,#butterWrapper .shade .wing .downWing,#butterWrapper .shade .middle{
 background-color:black;
 box-shadow:none
}
@keyframes wingAnim{
 0%{
  transform:rotateY(0deg) scaleY(.8)
 }
 20%{
  transform:rotateY(88deg) scaleY(.8)
 }
 50%{
  transform:rotateY(0deg) scaleY(.8)
 }
 80%{
  transform:rotateY(88deg) scaleY(.8)
 }
 100%{
  transform:rotateY(0deg) scaleY(.8)
 }
}
@keyframes shadeAnim{
 0%{
  opacity:.6;
  filter:blur(.2vw)
 }
 10%{
  opacity:.2;
  filter:blur(.6vw)
 }
 90%{
  opacity:.2;
  filter:blur(.6vw)
 }
 100%{
  opacity:.6;
  filter:blur(.2vw)
 }
}