:root {
    --primeDuration: 8s;
}

.textSlider, .rotateBottle, #leftHand > i, #rightHand > i{
    animation-duration: var(--primeDuration);
    animation-iteration-count: infinite;

    /*
    animation-play-state: paused;
     */
    animation-timing-function: linear;
}

.textSlider {
    animation-name: bottleSlider;
    text-align: right;
}

.rotateBottle{
    animation-name: bottleSpinner;

}

#leftHand > i {
    margin-left: -50px;
    animation-name: leftHand;
}

#rightHand > i {
    margin-right: -50px;
    animation-name: rightHand;
}

@keyframes bottleSlider {
    0% {
        width: 0;
    }

    47.5% {
        width: 100%;
    }
    50% {
        width: 100%;
    }
    100% {
        width: 0;
    }
}

@keyframes bottleSpinner {
    0% {
        transform: rotate(-30deg);
    }

    50% {
        transform: rotate(720deg);
    }

    100% {
        transform: rotate(720deg);
    }
}

@keyframes leftHand {
    0% {
        margin-left: -50px;
    }
    1% {
        transform: rotate(67.5deg);
    }
    5% {
        margin-left: 0;
        transform: rotate(0deg);

    }
    6% {
        transform: rotate(0deg);
    }
    30% {
        margin-left: -50px;
    }
}

@keyframes rightHand {
    0% {
       margin-right: -50px;
    }

    50% {
        margin-right: -50px;
    }

    53% {
        margin-right: 0;
    }

    80% {
        margin-right: -50px;
    }
}