.content {
    position: absolute;
    overflow: hidden;
    width: inherit;
    height: inherit;
    padding: 0;
    margin: 0;
}

.butterfly {
    position: absolute;
    top: -200px;
    left: -200px;
    width: fit-content;
    margin: 0;
    offset-path: path('M1 69C22.3333 44 79.4 -4.59999 137 1.00001C209 8.00001 285 93 269 132C253 171 72 186 92 288C112 390 186 477 306 436C426 395 308 138 420 112C532 86 556 96 597 165C638 234 480 303 535 407C590 511 707 558 779 504C851 450 881 239 860 198C839 157 855 144 805 138C755 132 700 134 691 175C682 216 651 218 691 253C731 288 765 328 779 299C793 270 800 215 798 190C796 165 802 128 831 120C860 112 874 100 909 127C944 154 962 143 962 184C962 225 927 245 982 269C1026 288.2 1064.33 297 1078 299');
    animation: wave 5s forwards;
    opacity: 0;
    animation-delay: 2s;
    overflow: hidden;
}

.butterfly img {
    width: 80px;
}

.wrapper {
    animation: y-axis 5s forwards cubic-bezier(.73,0,.33,1);
}

@keyframes wave {
    0% {
        opacity: 1;
        offset-distance: 0%;
        transform: scaleX(-1);
    }
    1% {
        transform: scaleX(-1);
    }
    10% {
        offset-distance: 10%;
    }
    50% {
        offset-distance: 30%;
        transform: scaleX(-1);
    }
    51% {
        transform: scaleX(1);
    }
    52% {
        transform: scaleX(-1);
    }
    70% {
        offset-distance: 70%;
    }
    70% {
        transform: scaleX(-1);
    }
    71% {
        transform: scaleX(1);
    }
    72% {
        transform: scaleX(-1);
    }
    73% {
        transform: scaleX(1);
    }
    74% {
        transform: scaleX(-1);
    }
    99%{
        transform: scaleX(-1);
    }
    100% {
        offset-distance: 100%;
        transform: scaleX(1);
        opacity: 1;
    }
}

@keyframes x-axis {
    50% {
        transform: translateX(200px);
    }
}
@keyframes y-axis {
    50% {
        transform: translateY(90px);
    }
}

@media (max-width: 1600px) {
    .butterfly {
        display: none;
    }
}