body {
    background: #bb564f;
}

ul {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: rotate(45deg) translate(-50%, -50%);
    -webkit-transform: rotate(45deg) translate(-50%, -50%);
}

li {
    list-style-type: none;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 20px;
    height: 20px;
    background: #f5d4a1;
    border-radius: 50%;
}

#a {
    animation: a 1s ease-in-out infinite;
    -webkit-animation: a 1s ease-in-out infinite;
    top: -40px;
    left: -40px;
}

#b {
    animation: b 1s ease-in-out infinite;
    -webkit-animation: b 1s ease-in-out infinite;
    top: -40px;
    left: 0px;
}

#c {
    animation: c 1s ease-in-out infinite;
    -webkit-animation: c 1s ease-in-out infinite;
    top: -40px;
    left: 40px;
}

#d {
    animation: d 1s ease-in-out infinite;
    -webkit-animation: d 1s ease-in-out infinite;
    top: 0px;
    left: -40px;
}

#e {
    animation: e 1s ease-in-out infinite;
    -webkit-animation: e 1s ease-in-out infinite;
    top: 0px;
    left: 0px;
}

#f {
    animation: f 1s ease-in-out infinite;
    -webkit-animation: f 1s ease-in-out infinite;
    top: 0px;
    left: 40px;
}

#g {
    animation: g 1s ease-in-out infinite;
    -webkit-animation: g 1s ease-in-out infinite;
    top: 40px;
    left: -40px;
}

#h {
    animation: h 1s ease-in-out infinite;
    -webkit-animation: h 1s ease-in-out infinite;
    top: 40px;
    left: 0px;
}

#i {
    animation: i 1s ease-in-out infinite;
    -webkit-animation: i 1s ease-in-out infinite;
    top: 40px;
    left: 40px;
}

@keyframes a {
    50% {
        top: 0px;
        left: -40px;
    }
    100% {
        top: 0px;
        left: -40px;
    }
}

@-webkit-keyframes a {
    50% {
        top: 0px;
        left: -40px;
    }
    100% {
        top: 0px;
        left: -40px;
    }
}

@keyframes b {
    50% {
        top: -40px;
        left: -40px;
    }
    100% {
        top: -40px;
        left: -40px;
    }
}

@-webkit-keyframes b {
    50% {
        top: -40px;
        left: -40px;
    }
    100% {
        top: -40px;
        left: -40px;
    }
}

@keyframes c {
    50% {
        top: -40px;
        left: 0px;
    }
    100% {
        top: -40px;
        left: 0px;
    }
}

@-webkit-keyframes c {
    50% {
        top: -40px;
        left: 0px;
    }
    100% {
        top: -40px;
        left: 0px;
    }
}

@keyframes d {
    50% {
        top: 40px;
        left: -40px;
    }
    100% {
        top: 40px;
        left: -40px;
    }
}

@-webkit-keyframes d {
    50% {
        top: 40px;
        left: -40px;
    }
    100% {
        top: 40px;
        left: -40px;
    }
}

@keyframes f {
    50% {
        top: -40px;
        left: 40px;
    }
    100% {
        top: -40px;
        left: 40px;
    }
}

@-webkit-keyframes f {
    50% {
        top: -40px;
        left: 40px;
    }
    100% {
        top: -40px;
        left: 40px;
    }
}

@keyframes g {
    50% {
        top: 40px;
        left: 0px;
    }
    100% {
        top: 40px;
        left: 0px;
    }
}

@-webkit-keyframes g {
    50% {
        top: 40px;
        left: 0px;
    }
    100% {
        top: 40px;
        left: 0px;
    }
}

@keyframes h {
    50% {
        top: 40px;
        left: 40px;
    }
    100% {
        top: 40px;
        left: 40px;
    }
}

@-webkit-keyframes h {
    50% {
        top: 40px;
        left: 40px;
    }
    100% {
        top: 40px;
        left: 40px;
    }
}

@keyframes i {
    50% {
        top: 0px;
        left: 40px;
    }
    100% {
        top: 0px;
        left: 40px;
    }
}

@-webkit-keyframes i {
    50% {
        top: 0px;
        left: 40px;
    }
    100% {
        top: 0px;
        left: 40px;
    }
}