.mosquito {
    position: absolute;
    width: 7vw;
    height: 10vw;
    object-fit: contain;
    z-index: 100;
    transform: translate(-50%,-50%) rotateY(0deg);
    pointer-events: none;
}


.fly {
    animation-name: fly;
    animation-duration: 0.05s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes fly {
    0% {
       transform: translate(-50%,-50%) rotateY(0deg);
    }

    50% {
        transform: translate(-50%,-50%) rotateY(40deg);
    }

    100% {
        transform: translate(-50%,-50%) rotateY(0deg);
    }

}

.flyAway {
    animation-name: fly,flyAway;
    animation-duration: 0.05s,2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite,1;
    animation-fill-mode: none,forwards;
}

@keyframes flyAway {
    /* 0% {
        width: 7vw;
        height: 10vw;
        opacity: 1;
    } */

    100% {
        width: 70vw;
        height: 100vw;
        opacity: 0;
    }

}

.flyBack {
    animation-name: fly,flyBack;
    animation-duration: 0.05s,2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite,1;
    animation-fill-mode: none,backwards;
}

@keyframes flyBack {
    100% {
        width: 7vw;
        height: 10vw;
        opacity: 1;
    }

    0% {
        width: 70vw;
        height: 100vw;
        opacity: 0;
    }

}