/*body {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 100%;
  height: 100vh;
}*/

.animation-wrapper {
  /*width: 50%;*/
  /*padding-bottom: 50%;*/
}

.sphere-animation {
  position: absolute;
  bottom: 10%;
  right: -10%;
  width: 1000px;
  height: 1000px;
  margin: -500px 0 0 -500px;
}

.sphere path {
  fill: url(#sphereGradient);
  stroke-width: 1px;
  stroke: rgba(80,80,80,.35);
  backface-visibility: hidden;
}

@media (min-width: 500px) {
  .sphere path {
    stroke-width: .4px;
  }
}