/* PacMan */

/* Pacman Ghost */
@keyframes feet {
    0% {
        box-shadow:
        4px 0 white,
        8px 0 white,
        12px 0 white,

        4px 4px white,
        8px 4px white,

        20px 0 white,
        24px 0 white,
        28px 0 white,
        32px 0 white,

        24px 4px white,
        28px 4px white,

        40px 0 white,
        44px 0 white,
        48px 0 white,
        52px 0 white,

        44px 4px white,
        48px 4px white
    ;
    }
    50% {
        box-shadow:
        0 4px white,
        4px 0 white,

        12px 0 white,
        16px 0 white,
        20px 0 white,
        16px 4px white,
        20px 4px white,

        32px 0 white,
        36px 0 white,
        40px 0 white,
        32px 4px white,
        36px 4px white,

        48px 0 white,
        52px 0 white,
        52px 4px white
    ;
    }
    100% {
        box-shadow:
        4px 0 white,
        8px 0 white,
        12px 0 white,

        4px 4px white,
        8px 4px white,

        20px 0 white,
        24px 0 white,
        28px 0 white,
        32px 0 white,

        24px 4px white,
        28px 4px white,

        40px 0 white,
        44px 0 white,
        48px 0 white,
        52px 0 white,

        44px 4px white,
        48px 4px white
    ;
    }
}

body {
    background: #000;
}

.ghost {
    position: absolute;
    top: 0;
    left: 0;
    width: 56px;
    height: 56px;

    animation-name: move;
    animation-duration: 6s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
}
.ghost__feet {
    animation-name: feet;
    animation-duration: .4s;
    animation-fill-mode: forwards;
    animation-timing-function: steps(1);
    animation-iteration-count: infinite;

    background: white;
    content: '';
    display: block;
    position: absolute;
    top: 48px;
    left: 0;
    width: 4px;
    height: 4px;
    z-index: 1;
}
.ghost__body {
    fill: white;
}

.ghost__eye {
    fill: #4B29FC;
    position: absolute;
    top: 16px;
    width: 16px;
    height: 20px;

    animation-name: eyes;
    animation-duration: 6s;
    animation-fill-mode: forwards;
    animation-timing-function: steps(1);
    animation-iteration-count: infinite;
}