/*
Reference
http://vignette1.wikia.nocookie.net/ssb/images/f/f3/SmashBall.png
*/
body {
  background: black;
  display: flex;
  height: 100vh;
  margin: 0;
}
h1{

    position: absolute;
    color: white;
    left: 50%;
    margin-right: -50%;
    top: 50%;
    transform: translate(-50%,-50%);
    font-size: 72px;
    font-family: 'Anton', sans-serif;

}
.moveX {
  animation: moveX 3.5s ease-in-out infinite alternate;
  margin: auto;
}

.moveY {
  animation: moveY 4.7s ease-in-out infinite alternate;
}

.smash-ball, .smash-ball div {
  width: 100px;
  height: 100px;
}

.smash-ball {
  transform-style: preserve-3d;
}

.orbit {
  border-width: 3px 3px 3px 0;
  border-style: solid;
  border-color: #ffff80 #ffff80 transparent transparent;
  border-radius: 50%;
  filter: blur(1px);
  -webkit-filter: blur(1px);
  position: absolute;
  top: -3px;
  left: -3px;
  z-index: 1;
}
.orbit:nth-of-type(1) {
  transform: scale(1.3) rotateX(70deg) rotateY(60deg) rotateZ(0deg);
  animation: orbit-1 1.5s linear infinite;
}
.orbit:nth-of-type(2) {
  transform: scale(1.3) rotateX(70deg) rotateY(120deg) rotateZ(0deg);
  animation: orbit-2 1.5s linear infinite;
}
.orbit:nth-of-type(3) {
  transform: scale(1.3) rotateX(70deg) rotateY(180deg) rotateZ(0deg);
  animation: orbit-3 1.5s linear infinite;
}

.ball {
  filter: saturate(150%);
  -webkit-filter: saturate(150%);
  background-color: black;
  background-image: radial-gradient(50px 50px at 20px 180px, #4bf4a3, rgba(75, 244, 163, 0)), radial-gradient(50px 50px at 90px 120px, #e83a5e, rgba(232, 58, 94, 0)), radial-gradient(50px 60px at 40px 115px, #8240bf 5%, rgba(130, 64, 191, 0)), radial-gradient(50px 50px at 75px 85px, #58af58, #affa5a, #e6f064, rgba(230, 240, 100, 0)), radial-gradient(50px 50px at 90px 20px, #e83a5e, rgba(232, 58, 94, 0)), radial-gradient(50px 50px at -10px 25px, #0a49ca 30%, rgba(10, 73, 202, 0)), radial-gradient(50px 50px at -10px 125px, #0a49ca 30%, rgba(10, 73, 202, 0)), radial-gradient(50px 50px at 20px 80px, #4bf4a3, rgba(75, 244, 163, 0)), radial-gradient(50px 60px at 40px 15px, #8240bf 5%, rgba(130, 64, 191, 0)), radial-gradient(50px 50px at 75px -15px, #58af58, #affa5a, #e6f064, rgba(230, 240, 100, 0)), linear-gradient(90deg, #4bf4a3, #4bf4a3, rgba(75, 244, 163, 0));
  background-size: 100px 100px;
  border-radius: 50%;
  box-shadow: 0 0 5px 1.5px white, 0 0 15px 10px #8cccff;
  overflow: hidden;
  position: relative;
  animation: smashBall 1s linear infinite;
}
.ball::before, .ball::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
}
.ball::before {
  background-image: linear-gradient(90deg, transparent, transparent 16.6px, black 16.6px, black 38.9px, transparent 38.9px, transparent), linear-gradient(transparent, transparent 57.1px, black 57.1px, black 66.1px, transparent 66.1px, transparent), radial-gradient(transparent, transparent 62%, black 62%, black);
  opacity: 0.45;
}
.ball::after {
  background-image: radial-gradient(white, rgba(255, 255, 255, 0) 40%);
}

@keyframes orbit-1 {
  from {
    transform: scale(1.3) rotateX(70deg) rotateY(60deg) rotateZ(0deg);
  }
  to {
    transform: scale(1.3) rotateX(70deg) rotateY(60deg) rotateZ(360deg);
  }
}
@keyframes orbit-2 {
  from {
    transform: scale(1.3) rotateX(70deg) rotateY(120deg) rotateZ(60deg);
  }
  to {
    transform: scale(1.3) rotateX(70deg) rotateY(120deg) rotateZ(420deg);
  }
}
@keyframes orbit-3 {
  from {
    transform: scale(1.3) rotateX(70deg) rotateY(180deg) rotateZ(120deg);
  }
  to {
    transform: scale(1.3) rotateX(70deg) rotateY(180deg) rotateZ(480deg);
  }
}
@keyframes smashBall {
  from {
    background-position: 0 200px;
    box-shadow: 0 0 5px 2.5px white, 0 0 15px 11px #8cccff;
  }
  50% {
    box-shadow: 0 0 5px 2px white, 0 0 15px 9px #8cccff;
  }
  to {
    background-position: 0 100px;
    box-shadow: 0 0 5px 2.5px white, 0 0 15px 10px #8cccff;
  }
}
@keyframes moveX {
  from {
    transform: translateX(-25vw);
  }
  to {
    transform: translateX(25vw);
  }
}
@keyframes moveY {
  from {
    transform: translateY(-25vh);
  }
  to {
    transform: translateY(25vh);
  }
}