/*

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


.animation-wrapper {
  width: 120%;
  padding-bottom: 120%;
}

.sphere-animation {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300px;
  height: 300px;
  margin: -290px 0 0 -290px;
}


.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;
  }
}