body {
  margin: 0;
  font-family: 'Raleway', sans-serif;
}

.container {
  background-color: #1a1a1a;
  width: 100%;
  height: 100%;
  min-width: 800px;
  min-height: 600px;
  position: relative;
  overflow: hidden;
  border: solid 1px #000;
}

.container .ball {
  line-height: 520px;
  text-align: center;
  color: #fff;
  font-size: 60px;
  display: block;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background-color: #e60000;
  position: absolute;
  border: solid 20px #000;
  box-shadow: inset -150px -150px 500px rgba(0,0,0,.5);
}

.container .ballSmall {
  display: block;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #ff751a;
  position: absolute;
  border: solid 6px #000;
  box-shadow: inset -25px -25px 40px rgba(0,0,0,.5);
}

.container .ball.moveOne {
  animation: moveX 14.05s linear 0s infinite alternate, moveY 6.4s linear 0s infinite alternate;
}
.container .ballSmall.moveOne {
  animation: moveXSmall 8.05s linear 0s infinite alternate, moveYSmall 5.4s linear 0s infinite alternate;
}
.container .ballSmall.moveTwo {
  animation: moveXSmall 6.05s linear 0s infinite alternate, moveYSmall 9.4s linear 0s infinite alternate;
}
.container .ballSmall.moveThree {
  animation: moveXSmall 5.05s linear 0s infinite alternate, moveYSmall 2.4s linear 0s infinite alternate;
}

@-webkit-keyframes moveX { from { left: 0; } to { left: calc(100% - 605px); } }
@-moz-keyframes moveX { from { left: 0; } to { left: calc(100% - 605px); } }
@-o-keyframes moveX { from { left: 0; } to { left: calc(100% - 605px); } }
@keyframes moveX { from { left: 0; } to { left: calc(100% - 605px); } }

@-webkit-keyframes moveY { from { top: 0; } to { top: calc(100% - 605px); } }
@-moz-keyframes moveY { from { top: 0; } to { top: calc(100% - 605px); } }
@-o-keyframes moveY { from { top: 0; } to { top: calc(100% - 605px); } }
@keyframes moveY { from { top: 0; } to { top: calc(100% - 605px); } }

@-webkit-keyframes moveXSmall { from { left: 0; } to { left: calc(100% - 105px); } }
@-moz-keyframes moveXSmall { from { left: 0; } to { left: calc(100% - 105px); } }
@-o-keyframes moveXSmall { from { left: 0; } to { left: calc(100% - 105px); } }
@keyframes moveXSmall { from { left: 0; } to { left: calc(100% - 105px); } }

@-webkit-keyframes moveYSmall { from { top: 0; } to { top: calc(100% - 105px); } }
@-moz-keyframes moveYSmall { from { top: 0; } to { top: calc(100% - 105px); } }
@-o-keyframes moveYSmall { from { top: 0; } to { top: calc(100% - 105px); } }
@keyframes moveYSmall { from { top: 0; } to { top: calc(100% - 105px); } }
