#jar {
    width: 30%;
    margin: 50px auto;
    display: block;
    border-image: url("/Art_Storage/Pixel_Art/32bit_Cafe_Default_Jar.png") 32 fill / 96px / 32px;
    padding-top: 2em;
    image-rendering: pixelated;
}

/* Butterflies and Moths */
.insect {
    image-rendering: pixelated;
    overflow: hidden;
    width: 100%;
}

.insect img { margin: 0; }

.moth { aspect-ratio: 74 / 36 !important; }
.moth .wing { aspect-ratio: 37 / 36 !important; }
.butterfly { aspect-ratio: 76 / 47 !important; }
.butterfly .wing { aspect-ratio: 38 / 47 !important; }


.insect .body {
    z-index: 6;
    width: 100%;
}

.insect .wings {
    position: relative;
    top: -106%;

    display: grid;
    width: 100%;
    height: 100%;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
}

.insect .left,
.insect .right {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}

.insect .wing {
    width: 100%;
}
.insect .top {
    z-index: 8;
    position: relative;
}
.insect .bottom {
    z-index: 7;
    position: relative;
    top: calc(100% * -1);
}

.insect .left .wing { transform-origin: right center;}
.insect .right .wing { transform-origin: left center; }
.insect .top {
    animation: flutter 300ms infinite;
}
.insect .bottom {
    animation: flutter_offset 300ms infinite;
}

@keyframes flutter {
  0% { transform: rotateY(0); }
  45% { transform: rotateY(70deg); }
  95%, 100% { transform: rotateY(0); }
}

@keyframes flutter_offset {
  0%, 5% { transform: rotateY(0); }
  50% { transform: rotateY(70deg); }
  100% { transform: rotateY(0); }
}