.man {
    width: 50px;
    margin-top: 10px;
    height: 100px;
    margin-left: 7rem;
    margin-right: auto;
}

.head {
    width: 35px;
    height: 35px;
    background-color: #f1c27d;
    border-radius: 50%;
    animation-name: body;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

.body {
    height: 70px;
    width: 30px;
    background-color: #880ED4;
    border-radius: 100% 20% 0 0;
    transform: skewX(-2deg);
    position: relative;
    left: -25px;
    animation-name: body;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

.foot {
    width: 20px;
    height: 7px;
    border-radius: 5px 40% 2px 2px;
    transform: skewX(5deg);
    background-color: black;
    display: inline-block;
    animation-name: foot;
    animation-duration: 1.8s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    &:last-child {
        margin-left: -20px;
        animation-delay: .9s;
    }
}

.feet {
    text-align: left;
    position: relative;
    top: 40px;
    left: -33px;
    &:before {
        width: 60px;
        height: 4px;
        border-radius: 50%;
        content: "";
        background: rgba(#000, .1);
        position: absolute;
        bottom: -1px;
        left: -8px;
        animation-name: shadow;
        animation-duration: 3s;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in-out;
    }
}

@keyframes foot {
    20% {
        transform: translate3d(17px, -8px, 0) rotate(4deg);
    }
    26% {
        transform: translate3d(17px, -5px, 4px) rotate(0deg);
    }
    40% {
        transform: translate3d(28px, -3px, 0) rotate(-6deg);
    }
    44% {
        transform: translate3d(28px, 0, 0) rotate(0deg);
    }
}

@keyframes body {
    25% {
        transform: translateY(2px);
    }
    50% {
        transform: translateY(0);
    }
    75% {
        transform: translateY(2px);
    }
}

@keyframes shadow {
    25% {
        transform: scale(1.1);
    }
    75% {
        transform: scale(.96);
    }
}