/**
 * Declare keyframes.
 */
@-webkit-keyframes rotateX {
  0% {
    transform: rotate3d(1, 0, 1, 0deg);
  }
  100% {
    transform: rotate3d(1, 0, 1, 360deg);
  }
}
@keyframes rotateX {
  0% {
    transform: rotate3d(1, 0, 1, 0deg);
  }
  100% {
    transform: rotate3d(1, 0, 1, 360deg);
  }
}
@-webkit-keyframes rotateY {
  0% {
    transform: rotate3d(0, 1, 1, 0deg);
  }
  100% {
    transform: rotate3d(0, 1, 1, 360deg);
  }
}
@keyframes rotateY {
  0% {
    transform: rotate3d(0, 1, 1, 0deg);
  }
  100% {
    transform: rotate3d(0, 1, 1, 360deg);
  }
}
@-webkit-keyframes rotateXY {
  0% {
    transform: rotate3d(1, 1, 1, 0deg);
  }
  100% {
    transform: rotate3d(1, 1, 1, 360deg);
  }
}
@keyframes rotateXY {
  0% {
    transform: rotate3d(1, 1, 1, 0deg);
  }
  100% {
    transform: rotate3d(1, 1, 1, 360deg);
  }
}
@-webkit-keyframes rotateballX {
  0% {
    transform: rotate3d(1, 0, 1, 0deg);
  }
  100% {
    transform: rotate3d(1, 0, 1, -360deg);
  }
}
@keyframes rotateballX {
  0% {
    transform: rotate3d(1, 0, 1, 0deg);
  }
  100% {
    transform: rotate3d(1, 0, 1, -360deg);
  }
}
@-webkit-keyframes rotateballY {
  0% {
    transform: rotate3d(0, 1, 1, 0deg);
  }
  100% {
    transform: rotate3d(0, 1, 1, -360deg);
  }
}
@keyframes rotateballY {
  0% {
    transform: rotate3d(0, 1, 1, 0deg);
  }
  100% {
    transform: rotate3d(0, 1, 1, -360deg);
  }
}
@-webkit-keyframes rotateballXY {
  0% {
    transform: rotate3d(1, 1, 1, 0deg);
  }
  100% {
    transform: rotate3d(1, 1, 1, -360deg);
  }
}
@keyframes rotateballXY {
  0% {
    transform: rotate3d(1, 1, 1, 0deg);
  }
  100% {
    transform: rotate3d(1, 1, 1, -360deg);
  }
}
/**
 * Start Styling!
 */
* {
  box-sizing: border-box;
}

body {
  background-color: #aff298;
  min-height: 100vh;
  overflow: hidden;
  width: 100%;
  *zoom: 1;
  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#FFAFF298', endColorstr='#FF175B12');
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IiIgcj0iOTglIj48c3RvcCBvZmZzZXQ9IjMzJSIgc3RvcC1jb2xvcj0iI2FmZjI5OCIvPjxzdG9wIG9mZnNldD0iOTglIiBzdG9wLWNvbG9yPSIjMTc1YjEyIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
  background-size: 100%;
  background-image: radial-gradient(ellipse cover at center, #aff298 33%, #175b12 98%);
}

#wrapper {
  position: absolute;
  left: 50%;
  top: 50%;
  transform-style: preserve-3d;
}

.ring {
  background-color: transparent;
  border: 1px solid #500;
  position: absolute;
  border-radius: 50%;
}
.ring::after {
  background-color: #f00;
  border: 1px solid #000;
  content: "";
  height: 35px;
  height: 1.5vw;
  left: calc(50% - 0.75vw);
  top: -0.75vw;
  position: absolute;
  width: 35px;
  width: 1.5vw;
  border-radius: 50%;
}
.ring::before {
  background-color: #f00;
  border: 1px solid #000;
  content: "";
  height: 35px;
  height: 1.5vw;
  left: calc(50% - 0.75vw);
  bottom: -0.75vw;
  position: absolute;
  width: 35px;
  width: 1.5vw;
  border-radius: 50%;
}

#ring-outer-3 {
  height: 200px;
  height: 36vw;
  left: calc(50% - 18vw);
  top: calc(50% - 18vw);
  width: 200px;
  width: 36vw;
  -webkit-animation: rotateY 6s linear infinite;
  animation: rotateY 6s linear infinite;
  transform-style: preserve-3d;
}
#ring-outer-3::after {
  -webkit-animation: rotateballY 6s linear infinite;
  animation: rotateballY 6s linear infinite;
}
#ring-outer-3::before {
  -webkit-animation: rotateballY 6s linear infinite;
  animation: rotateballY 6s linear infinite;
}

#ring-outer-2 {
  height: 200px;
  height: 30vw;
  left: calc(50% - 15vw);
  top: calc(50% - 15vw);
  width: 200px;
  width: 30vw;
  -webkit-animation: rotateXY 5s linear infinite;
  animation: rotateXY 5s linear infinite;
  transform-style: preserve-3d;
}
#ring-outer-2::after {
  -webkit-animation: rotateballXY 5s linear infinite;
  animation: rotateballXY 5s linear infinite;
}
#ring-outer-2::before {
  -webkit-animation: rotateballXY 5s linear infinite;
  animation: rotateballXY 5s linear infinite;
}

#ring-outer {
  height: 200px;
  height: 24vw;
  left: calc(50% - 12vw);
  top: calc(50% - 12vw);
  width: 200px;
  width: 24vw;
  -webkit-animation: rotateX 4s linear infinite;
  animation: rotateX 4s linear infinite;
  transform-style: preserve-3d;
}
#ring-outer::after {
  -webkit-animation: rotateballX 4s linear infinite;
  animation: rotateballX 4s linear infinite;
}
#ring-outer::before {
  -webkit-animation: rotateballX 4s linear infinite;
  animation: rotateballX 4s linear infinite;
}

#ring-middle {
  height: 150px;
  height: 18vw;
  left: calc(50% - 9vw);
  top: calc(50% - 9vw);
  width: 150px;
  width: 18vw;
  -webkit-animation: rotateY 3.5s linear infinite;
  animation: rotateY 3.5s linear infinite;
  transform-style: preserve-3d;
}
#ring-middle::after {
  -webkit-animation: rotateballY 3.5s linear infinite;
  animation: rotateballY 3.5s linear infinite;
}
#ring-middle::before {
  -webkit-animation: rotateballY 3.5s linear infinite;
  animation: rotateballY 3.5s linear infinite;
}

#ring-inner {
  height: 100px;
  height: 12vw;
  left: calc(50% - 6vw);
  top: calc(50% - 6vw);
  width: 100px;
  width: 12vw;
  -webkit-animation: rotateXY 3s linear infinite;
  animation: rotateXY 3s linear infinite;
  transform-style: preserve-3d;
}
#ring-inner::after {
  -webkit-animation: rotateballXY 3s linear infinite;
  animation: rotateballXY 3s linear infinite;
}
#ring-inner::before {
  -webkit-animation: rotateballXY 3s linear infinite;
  animation: rotateballXY 3s linear infinite;
}

#core {
  background-color: #d99;
  height: 50px;
  height: 8vw;
  left: calc(50% - 4vw);
  position: absolute;
  top: calc(50% - 4vw);
  width: 50px;
  width: 8vw;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjAlIiBjeT0iMCUiIHI9Ijk4JSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmMDAwMCIvPjxzdG9wIG9mZnNldD0iOTglIiBzdG9wLWNvbG9yPSIjMTEwMDAwIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
  background-size: 100%;
  background-image: radial-gradient(ellipse cover at top left, #ff0000 0%, #110000 98%);
  border-radius: 50%;
  *zoom: 1;
  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#FFFF0000', endColorstr='#FF000000');
  transform-style: preserve-3d;
}