.wrapper {
    min-width: 200px;
    width: 100%;
    max-width: 500px;
    height: auto;
    margin: auto;
}

/* Fall */
#fallArrow {
    fill: red;
    animation: fadeInOut 3s linear 0.2s infinite,
        fallPoint 3s linear 0.2s infinite;
}

#fallSubject {
    transform-origin: 100% 100%;
    transform-box: fill-box;
    animation: teeter 1.5s ease-in-out 0.2s infinite alternate backwards;
}

#fallMotion {
    transform-origin: 0% 100%;
    transform-box: fill-box;
    animation: teeter 1.5s ease-in-out 0.2s infinite alternate backwards;
}

@keyframes fallPoint {
    0% {
        transform: translateY(-5%);
    }
    100% {
        transform: translateY(15%);
    }
}

@keyframes teeter {
    0% {
        transform: rotateZ(5deg);
    }
    100% {
        transform: rotateZ(-15deg);
    }
}

/* Fling */
#flingArrow {
    fill: red;
    animation: fadeInOut 3s linear 0.2s infinite,
        flingPoint 3s linear 0.2s infinite;
}

#flingSubject {
    transform-origin: 100% 100%;
    transform-box: fill-box;
    animation: fly 2s linear 0.2s infinite backwards;
}

#flingMotion {
    transform-origin: 0% 100%;
    transform-box: fill-box;
    animation: fly 2s linear 0.2s infinite backwards,
        fadeInOut 2s linear 0.2s infinite;
}

@keyframes flingPoint {
    0% {
        transform: translateX(5%);
    }
    100% {
        transform: translateX(-20%);
    }
}

@keyframes fly {
    from {
        transform: translateX(50%);
    }
    to {
        transform: translateX(-200%);
    }
}

/* Dropper */
#dropArrow {
    fill: red;
    animation: fadeInOut 2s linear 0.2s infinite,
        dropPoint 2s linear 0.2s infinite;
}

#cube {
    transform-origin: 100% 100%;
    transform-box: fill-box;
    animation: drop 1.5s linear 0.2s infinite backwards;
}

#dropMotion {
    transform-origin: 0% 100%;
    transform-box: fill-box;
    animation: drop 1.5s linear 0.2s infinite backwards,
        fadeOut 1.5s linear 0.2s infinite forwards;
}

@keyframes dropPoint {
    0% {
        transform: translateY(-5%);
    }
    100% {
        transform: translateY(15%);
    }
}

@keyframes fadeOut {
    0%,
    40% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes drop {
    0% {
        transform: translateY(-400%);
    }
    50%,
    100% {
        transform: translateY(0%);
    }
}

/* Receiver */
#receiveArrow {
    fill: red;
    animation: fadeInOut 3s linear 0.2s infinite, down 3s linear 0.2s infinite;
}

#pellet {
    fill: gold;
    transform-origin: 100% 100%;
    transform-box: fill-box;
    animation: down 1.5s ease-in-out 0.2s infinite alternate backwards;
}

#receiveMotion {
    transform-origin: 0% 100%;
    transform-box: fill-box;
    animation: down 1.5s ease-in-out 0.2s infinite alternate backwards;
}

@keyframes down {
    0% {
        transform: translateY(-15%);
    }
    100% {
        transform: translateY(5%);
    }
}

/* Goo */
#squiggles {
    fill: darkred;
    transform-origin: 50% 50%;
    animation: gooFadeInOut 1.5s linear 0.2s infinite alternate forwards,
        rotate 1.5s linear 0.2s infinite alternate;
}

#armL {
    transform-origin: 100% 100%;
    transform-box: fill-box;
    animation: flail 3s ease-in-out 0.2s infinite alternate both;
}

#armR {
    transform-origin: 0% 100%;
    transform-box: fill-box;
    animation: flail 3s ease-in-out 0.2s infinite alternate-reverse both;
}

#head {
    animation: bobbing 3s ease-in-out 0.2s infinite alternate both;
}

@keyframes rotate {
    0% {
        transform: rotateZ(0deg);
    }
    100% {
        transform: rotateZ(5deg);
    }
}

@keyframes flail {
    0% {
        transform: rotateZ(-10deg);
    }
    100% {
        transform: rotateZ(10deg);
    }
}

@keyframes bobbing {
    0% {
        transform: translateY(2%);
    }
    100% {
        transform: translateY(0%);
    }
}

@keyframes gooFadeInOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

/* Cake */
#star1 {
    transform-origin: 50% 50%;
    animation: fadeInOut 10s linear 0.2s infinite forwards,
        cakeRotate 10s linear 0.2s infinite;
}

#star2 {
    transform-origin: 50% 50%;
    animation: fadeInOut 10s linear 0.2s infinite forwards,
        cakeRotate 10s linear 0.2s infinite reverse;
}

#cherry {
    fill: rgb(175, 0, 0);
    transform-origin: 50% 80%;
    transform-box: fill-box;
    animation: wiggle 5s ease-in-out 0.2s infinite;
}

@keyframes cakeRotate {
    0% {
        transform: rotateZ(0deg);
    }
    100% {
        transform: rotateZ(360deg);
    }
}

@keyframes wiggle {
    0% {
        transform: rotateZ(0deg);
    }
    25% {
        transform: rotateZ(-10deg);
    }
    50% {
        transform: rotateZ(0deg);
    }
    75% {
        transform: rotateZ(-10deg);
    }
    100% {
        transform: rotateZ(0deg);
    }
}

/* Common Animations */
@keyframes fadeInOut {
    0% {
        opacity: 0;
    }
    30% {
        opacity: 1;
    }
    70% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}