.nav-btn .area {
  display: flex;
}
.nav-btn .area > .box {
  position: relative;
  padding: 16px;
  width: 50px;
  height: 50px;
  margin: 0.5rem;
}
.nav-btn .box, .nav-btn .circle {
  position: absolute;
  height: 100px;
  width: 100px;
  text-align: center;
  transition: 0.6s ease-in;
}
.nav-btn .circle {
  border-radius: 50%;
}
.nav-btn .txt {
  position: absolute;
  top: 0;
  left: 0;
  color: #666;
}
.nav-btn .p3d {
  transform-style: preserve-3d;
}

.nav-btn .opacity {
  border: 1px solid #fff;
  animation: opacity 5s infinite alternate;
}
@keyframes opacity {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.25;
  }
}

.nav-btn .change-color {
  animation: change-color 1s infinite alternate;
}
@keyframes change-color {
  from {
    filter: hue-rotate(30deg);
  }
  to {
    filter: hue-rotate(-30deg);
  }
}

* :is(.a1, .a2, .a3, .a4, .a5) .circle {
  background: linear-gradient(#0ff, #f0f);
}
* .a1.ani .circle {
  animation: a-x 11s linear infinite;
}
@keyframes a-x {
  to {
    transform: rotateX(360deg);
  }
}
* .a2.ani .circle {
  animation: a-y 11s linear infinite;
}
@keyframes a-y {
  to {
    transform: rotateY(360deg);
  }
}
* .a3.ani .circle {
  animation: a-z 11s linear infinite;
}
@keyframes a-z {
  to {
    transform: rotateZ(360deg);
  }
}
* .a4.ani .circle {
  animation: a-xyz 11s linear infinite;
}
@keyframes a-xyz {
  to {
    transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
  }
}
* .a5 .circle {
  background: linear-gradient(#0ff, transparent, #f0f);
  background-size: 100% 200%;
}
* .a5.ani .circle {
  animation: a5-circle 3s linear infinite alternate;
}
@keyframes a5-circle {
  from {
    background-position: 100% 0%;
  }
  to {
    background-position: 0% 100%;
  }
}

* :is(.b1, .b2, .b3, .b4) .circle {
  background: linear-gradient(#0ff, #f0f);
}
* .b1 .circle:nth-child(1) {
  background: #0ff;
}
* .b1 .circle:nth-child(2) {
  background: #f0f;
}
* .b1.ani .circle:nth-child(1) {
  animation: b1 11s linear infinite;
}
* .b1.ani .circle:nth-child(2) {
  animation: b1 11s 1s linear infinite;
}
@keyframes b1 {
  to {
    transform: rotateX(360deg) rotateY(360deg) rotateZ(720deg);
  }
}
* .b4.ani .x {
  animation: b4-x 1s linear infinite alternate;
}
@keyframes b4-x {
  to {
    transform: rotateX(30deg);
  }
}
* .b4.ani .y {
  animation: b4-y 2s linear infinite alternate;
}
@keyframes b4-y {
  to {
    transform: rotateY(30deg);
  }
}
* .b4.ani .z {
  animation: b4-z 10s linear infinite;
}
@keyframes b4-z {
  to {
    transform: rotateZ(360deg);
  }
}

* :is(.c1, .c2, .c3, .c4) .circle {
  border: 1px solid rgba(0, 0, 0, 0);
}
* .c1.ani .box {
  animation: c1-box 5s linear infinite alternate;
}
@keyframes c1-box {
  to {
    transform: rotateZ(360deg);
  }
}
* .c1.ani .circle:nth-child(1) {
  border-color: #00ffaa;
  animation: c1-circle 1s linear 0.05s infinite alternate;
  opacity: 0.04;
}
* .c1.ani .circle:nth-child(2) {
  border-color: #00ffd5;
  animation: c1-circle 1s linear 0.1s infinite alternate;
  opacity: 0.08;
}
* .c1.ani .circle:nth-child(3) {
  border-color: aqua;
  animation: c1-circle 1s linear 0.15s infinite alternate;
  opacity: 0.12;
}
* .c1.ani .circle:nth-child(4) {
  border-color: #00d5ff;
  animation: c1-circle 1s linear 0.2s infinite alternate;
  opacity: 0.16;
}
* .c1.ani .circle:nth-child(5) {
  border-color: #00aaff;
  animation: c1-circle 1s linear 0.25s infinite alternate;
  opacity: 0.2;
}
* .c1.ani .circle:nth-child(6) {
  border-color: #0080ff;
  animation: c1-circle 1s linear 0.3s infinite alternate;
  opacity: 0.24;
}
* .c1.ani .circle:nth-child(7) {
  border-color: #0055ff;
  animation: c1-circle 1s linear 0.35s infinite alternate;
  opacity: 0.28;
}
* .c1.ani .circle:nth-child(8) {
  border-color: #002bff;
  animation: c1-circle 1s linear 0.4s infinite alternate;
  opacity: 0.32;
}
* .c1.ani .circle:nth-child(9) {
  border-color: blue;
  animation: c1-circle 1s linear 0.45s infinite alternate;
  opacity: 0.36;
}
* .c1.ani .circle:nth-child(10) {
  border-color: #2b00ff;
  animation: c1-circle 1s linear 0.5s infinite alternate;
  opacity: 0.4;
}
* .c1.ani .circle:nth-child(11) {
  border-color: #5500ff;
  animation: c1-circle 1s linear 0.55s infinite alternate;
  opacity: 0.44;
}
* .c1.ani .circle:nth-child(12) {
  border-color: #8000ff;
  animation: c1-circle 1s linear 0.6s infinite alternate;
  opacity: 0.48;
}
* .c1.ani .circle:nth-child(13) {
  border-color: #aa00ff;
  animation: c1-circle 1s linear 0.65s infinite alternate;
  opacity: 0.52;
}
* .c1.ani .circle:nth-child(14) {
  border-color: #d500ff;
  animation: c1-circle 1s linear 0.7s infinite alternate;
  opacity: 0.56;
}
* .c1.ani .circle:nth-child(15) {
  border-color: fuchsia;
  animation: c1-circle 1s linear 0.75s infinite alternate;
  opacity: 0.6;
}
@keyframes c1-circle {
  0% {
    transform: rotateX(0deg) rotateY(0deg);
  }
  25% {
    transform: rotateX(0deg) rotateY(25deg);
  }
  100% {
    transform: rotateX(25deg) rotateY(0deg);
  }
}
* .c2.ani .box {
  animation: c2-box 7s linear infinite;
}
@keyframes c2-box {
  to {
    transform: rotateZ(-360deg);
  }
}
* .c2.ani .circle:nth-child(1) {
  border-color: #00ff55;
  animation: c2-circle 3s linear 0.075s infinite alternate;
  opacity: 0.05;
}
* .c2.ani .circle:nth-child(2) {
  border-color: #00ff6f;
  animation: c2-circle 3s linear 0.15s infinite alternate;
  opacity: 0.1;
}
* .c2.ani .circle:nth-child(3) {
  border-color: #00ff88;
  animation: c2-circle 3s linear 0.225s infinite alternate;
  opacity: 0.15;
}
* .c2.ani .circle:nth-child(4) {
  border-color: #00ffa2;
  animation: c2-circle 3s linear 0.3s infinite alternate;
  opacity: 0.2;
}
* .c2.ani .circle:nth-child(5) {
  border-color: #00ffbb;
  animation: c2-circle 3s linear 0.375s infinite alternate;
  opacity: 0.25;
}
* .c2.ani .circle:nth-child(6) {
  border-color: #00ffd5;
  animation: c2-circle 3s linear 0.45s infinite alternate;
  opacity: 0.3;
}
* .c2.ani .circle:nth-child(7) {
  border-color: #00ffee;
  animation: c2-circle 3s linear 0.525s infinite alternate;
  opacity: 0.35;
}
* .c2.ani .circle:nth-child(8) {
  border-color: #00f7ff;
  animation: c2-circle 3s linear 0.6s infinite alternate;
  opacity: 0.4;
}
* .c2.ani .circle:nth-child(9) {
  border-color: #00ddff;
  animation: c2-circle 3s linear 0.675s infinite alternate;
  opacity: 0.45;
}
* .c2.ani .circle:nth-child(10) {
  border-color: #00c4ff;
  animation: c2-circle 3s linear 0.75s infinite alternate;
  opacity: 0.5;
}
* .c2.ani .circle:nth-child(11) {
  border-color: #00aaff;
  animation: c2-circle 3s linear 0.825s infinite alternate;
  opacity: 0.55;
}
* .c2.ani .circle:nth-child(12) {
  border-color: #0091ff;
  animation: c2-circle 3s linear 0.9s infinite alternate;
  opacity: 0.6;
}
* .c2.ani .circle:nth-child(13) {
  border-color: #0077ff;
  animation: c2-circle 3s linear 0.975s infinite alternate;
  opacity: 0.65;
}
* .c2.ani .circle:nth-child(14) {
  border-color: #005eff;
  animation: c2-circle 3s linear 1.05s infinite alternate;
  opacity: 0.7;
}
* .c2.ani .circle:nth-child(15) {
  border-color: #0044ff;
  animation: c2-circle 3s linear 1.125s infinite alternate;
  opacity: 0.75;
}
@keyframes c2-circle {
  0% {
    transform: rotateX(0deg) rotateY(0deg);
  }
  25% {
    transform: rotateX(15deg) rotateY(15deg);
  }
  50% {
    transform: rotateX(0deg) rotateY(30deg);
  }
  75% {
    transform: rotateX(30deg) rotateY(10deg);
  }
  100% {
    transform: rotateX(10deg) rotateY(0deg);
  }
}
* .c3.ani .box {
  animation: c3-box 7s linear infinite;
}
@keyframes c3-box {
  to {
    transform: rotateZ(-360deg);
  }
}
* .c3.ani .circle:nth-child(1) {
  border-color: #00ff55;
  animation: c3-circle 1s linear 0.1s infinite alternate;
  opacity: 0.03;
}
* .c3.ani .circle:nth-child(2) {
  border-color: #00ff6f;
  animation: c3-circle 1s linear 0.2s infinite alternate;
  opacity: 0.06;
}
* .c3.ani .circle:nth-child(3) {
  border-color: #00ff88;
  animation: c3-circle 1s linear 0.3s infinite alternate;
  opacity: 0.09;
}
* .c3.ani .circle:nth-child(4) {
  border-color: #00ffa2;
  animation: c3-circle 1s linear 0.4s infinite alternate;
  opacity: 0.12;
}
* .c3.ani .circle:nth-child(5) {
  border-color: #00ffbb;
  animation: c3-circle 1s linear 0.5s infinite alternate;
  opacity: 0.15;
}
* .c3.ani .circle:nth-child(6) {
  border-color: #00ffd5;
  animation: c3-circle 1s linear 0.6s infinite alternate;
  opacity: 0.18;
}
* .c3.ani .circle:nth-child(7) {
  border-color: #00ffee;
  animation: c3-circle 1s linear 0.7s infinite alternate;
  opacity: 0.21;
}
* .c3.ani .circle:nth-child(8) {
  border-color: #00f7ff;
  animation: c3-circle 1s linear 0.8s infinite alternate;
  opacity: 0.24;
}
* .c3.ani .circle:nth-child(9) {
  border-color: #00ddff;
  animation: c3-circle 1s linear 0.9s infinite alternate;
  opacity: 0.27;
}
* .c3.ani .circle:nth-child(10) {
  border-color: #00c4ff;
  animation: c3-circle 1s linear 1s infinite alternate;
  opacity: 0.3;
}
* .c3.ani .circle:nth-child(11) {
  border-color: #00aaff;
  animation: c3-circle 1s linear 1.1s infinite alternate;
  opacity: 0.33;
}
* .c3.ani .circle:nth-child(12) {
  border-color: #0091ff;
  animation: c3-circle 1s linear 1.2s infinite alternate;
  opacity: 0.36;
}
* .c3.ani .circle:nth-child(13) {
  border-color: #0077ff;
  animation: c3-circle 1s linear 1.3s infinite alternate;
  opacity: 0.39;
}
* .c3.ani .circle:nth-child(14) {
  border-color: #005eff;
  animation: c3-circle 1s linear 1.4s infinite alternate;
  opacity: 0.42;
}
* .c3.ani .circle:nth-child(15) {
  border-color: #0044ff;
  animation: c3-circle 1s linear 1.5s infinite alternate;
  opacity: 0.45;
}
@keyframes c3-circle {
  to {
    transform: rotateY(30deg);
  }
}
* .c4.ani .box {
  animation: c4-box 7s linear infinite;
}
@keyframes c4-box {
  to {
    transform: rotateZ(360deg);
  }
}
* .c4.ani .circle:nth-child(1) {
  border-color: lime;
  animation: c4-circle 1s linear 0.05s infinite alternate;
  opacity: 0.05;
}
* .c4.ani .circle:nth-child(2) {
  border-color: #00ff1a;
  animation: c4-circle 1s linear 0.1s infinite alternate;
  opacity: 0.1;
}
* .c4.ani .circle:nth-child(3) {
  border-color: #00ff33;
  animation: c4-circle 1s linear 0.15s infinite alternate;
  opacity: 0.15;
}
* .c4.ani .circle:nth-child(4) {
  border-color: #00ff4d;
  animation: c4-circle 1s linear 0.2s infinite alternate;
  opacity: 0.2;
}
* .c4.ani .circle:nth-child(5) {
  border-color: #00ff66;
  animation: c4-circle 1s linear 0.25s infinite alternate;
  opacity: 0.25;
}
* .c4.ani .circle:nth-child(6) {
  border-color: #00ff80;
  animation: c4-circle 1s linear 0.3s infinite alternate;
  opacity: 0.3;
}
* .c4.ani .circle:nth-child(7) {
  border-color: #00ff99;
  animation: c4-circle 1s linear 0.35s infinite alternate;
  opacity: 0.35;
}
* .c4.ani .circle:nth-child(8) {
  border-color: #00ffb3;
  animation: c4-circle 1s linear 0.4s infinite alternate;
  opacity: 0.4;
}
* .c4.ani .circle:nth-child(9) {
  border-color: #00ffcc;
  animation: c4-circle 1s linear 0.45s infinite alternate;
  opacity: 0.45;
}
* .c4.ani .circle:nth-child(10) {
  border-color: #00ffe6;
  animation: c4-circle 1s linear 0.5s infinite alternate;
  opacity: 0.5;
}
* .c4.ani .circle:nth-child(11) {
  border-color: aqua;
  animation: c4-circle 1s linear 0.55s infinite alternate;
  opacity: 0.55;
}
* .c4.ani .circle:nth-child(12) {
  border-color: #00e6ff;
  animation: c4-circle 1s linear 0.6s infinite alternate;
  opacity: 0.6;
}
* .c4.ani .circle:nth-child(13) {
  border-color: #00ccff;
  animation: c4-circle 1s linear 0.65s infinite alternate;
  opacity: 0.65;
}
* .c4.ani .circle:nth-child(14) {
  border-color: #00b3ff;
  animation: c4-circle 1s linear 0.7s infinite alternate;
  opacity: 0.7;
}
* .c4.ani .circle:nth-child(15) {
  border-color: #0099ff;
  animation: c4-circle 1s linear 0.75s infinite alternate;
  opacity: 0.75;
}
@keyframes c4-circle {
  0% {
    transform: rotateX(0deg) rotateY(0deg);
  }
  25% {
    transform: rotateX(0deg) rotateY(30deg);
  }
  100% {
    transform: rotateX(30deg) rotateY(0deg);
  }
}

* :is(.d1, .d2, .d3, .d4, .d5) .circle {
  border: 1px solid rgba(0, 0, 0, 0);
}
* .d1.ani .box {
  animation: d1-box 7s linear infinite;
}
@keyframes d1-box {
  from {
    transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
  }
}
* .d1.ani .circle:nth-child(1) {
  border-color: yellow;
  animation: d1-circle 7s linear 0.04s infinite alternate;
  opacity: 0.01;
}
* .d1.ani .circle:nth-child(2) {
  border-color: #eeff00;
  animation: d1-circle 7s linear 0.08s infinite alternate;
  opacity: 0.02;
}
* .d1.ani .circle:nth-child(3) {
  border-color: #ddff00;
  animation: d1-circle 7s linear 0.12s infinite alternate;
  opacity: 0.03;
}
* .d1.ani .circle:nth-child(4) {
  border-color: #ccff00;
  animation: d1-circle 7s linear 0.16s infinite alternate;
  opacity: 0.04;
}
* .d1.ani .circle:nth-child(5) {
  border-color: #bbff00;
  animation: d1-circle 7s linear 0.2s infinite alternate;
  opacity: 0.05;
}
* .d1.ani .circle:nth-child(6) {
  border-color: #aaff00;
  animation: d1-circle 7s linear 0.24s infinite alternate;
  opacity: 0.06;
}
* .d1.ani .circle:nth-child(7) {
  border-color: #99ff00;
  animation: d1-circle 7s linear 0.28s infinite alternate;
  opacity: 0.07;
}
* .d1.ani .circle:nth-child(8) {
  border-color: #88ff00;
  animation: d1-circle 7s linear 0.32s infinite alternate;
  opacity: 0.08;
}
* .d1.ani .circle:nth-child(9) {
  border-color: #77ff00;
  animation: d1-circle 7s linear 0.36s infinite alternate;
  opacity: 0.09;
}
* .d1.ani .circle:nth-child(10) {
  border-color: #66ff00;
  animation: d1-circle 7s linear 0.4s infinite alternate;
  opacity: 0.1;
}
* .d1.ani .circle:nth-child(11) {
  border-color: #55ff00;
  animation: d1-circle 7s linear 0.44s infinite alternate;
  opacity: 0.11;
}
* .d1.ani .circle:nth-child(12) {
  border-color: #44ff00;
  animation: d1-circle 7s linear 0.48s infinite alternate;
  opacity: 0.12;
}
* .d1.ani .circle:nth-child(13) {
  border-color: #33ff00;
  animation: d1-circle 7s linear 0.52s infinite alternate;
  opacity: 0.13;
}
* .d1.ani .circle:nth-child(14) {
  border-color: #22ff00;
  animation: d1-circle 7s linear 0.56s infinite alternate;
  opacity: 0.14;
}
* .d1.ani .circle:nth-child(15) {
  border-color: #11ff00;
  animation: d1-circle 7s linear 0.6s infinite alternate;
  opacity: 0.15;
}
* .d1.ani .circle:nth-child(16) {
  border-color: lime;
  animation: d1-circle 7s linear 0.64s infinite alternate;
  opacity: 0.16;
}
* .d1.ani .circle:nth-child(17) {
  border-color: #00ff11;
  animation: d1-circle 7s linear 0.68s infinite alternate;
  opacity: 0.17;
}
* .d1.ani .circle:nth-child(18) {
  border-color: #00ff22;
  animation: d1-circle 7s linear 0.72s infinite alternate;
  opacity: 0.18;
}
* .d1.ani .circle:nth-child(19) {
  border-color: #00ff33;
  animation: d1-circle 7s linear 0.76s infinite alternate;
  opacity: 0.19;
}
* .d1.ani .circle:nth-child(20) {
  border-color: #00ff44;
  animation: d1-circle 7s linear 0.8s infinite alternate;
  opacity: 0.2;
}
* .d1.ani .circle:nth-child(21) {
  border-color: #00ff55;
  animation: d1-circle 7s linear 0.84s infinite alternate;
  opacity: 0.21;
}
* .d1.ani .circle:nth-child(22) {
  border-color: #00ff66;
  animation: d1-circle 7s linear 0.88s infinite alternate;
  opacity: 0.22;
}
* .d1.ani .circle:nth-child(23) {
  border-color: #00ff77;
  animation: d1-circle 7s linear 0.92s infinite alternate;
  opacity: 0.23;
}
* .d1.ani .circle:nth-child(24) {
  border-color: #00ff88;
  animation: d1-circle 7s linear 0.96s infinite alternate;
  opacity: 0.24;
}
* .d1.ani .circle:nth-child(25) {
  border-color: #00ff99;
  animation: d1-circle 7s linear 1s infinite alternate;
  opacity: 0.25;
}
* .d1.ani .circle:nth-child(26) {
  border-color: #00ffaa;
  animation: d1-circle 7s linear 1.04s infinite alternate;
  opacity: 0.26;
}
* .d1.ani .circle:nth-child(27) {
  border-color: #00ffbb;
  animation: d1-circle 7s linear 1.08s infinite alternate;
  opacity: 0.27;
}
* .d1.ani .circle:nth-child(28) {
  border-color: #00ffcc;
  animation: d1-circle 7s linear 1.12s infinite alternate;
  opacity: 0.28;
}
* .d1.ani .circle:nth-child(29) {
  border-color: #00ffdd;
  animation: d1-circle 7s linear 1.16s infinite alternate;
  opacity: 0.29;
}
* .d1.ani .circle:nth-child(30) {
  border-color: #00ffee;
  animation: d1-circle 7s linear 1.2s infinite alternate;
  opacity: 0.3;
}
* .d1.ani .circle:nth-child(31) {
  border-color: aqua;
  animation: d1-circle 7s linear 1.24s infinite alternate;
  opacity: 0.31;
}
* .d1.ani .circle:nth-child(32) {
  border-color: #00eeff;
  animation: d1-circle 7s linear 1.28s infinite alternate;
  opacity: 0.32;
}
* .d1.ani .circle:nth-child(33) {
  border-color: #00ddff;
  animation: d1-circle 7s linear 1.32s infinite alternate;
  opacity: 0.33;
}
* .d1.ani .circle:nth-child(34) {
  border-color: #00ccff;
  animation: d1-circle 7s linear 1.36s infinite alternate;
  opacity: 0.34;
}
* .d1.ani .circle:nth-child(35) {
  border-color: #00bbff;
  animation: d1-circle 7s linear 1.4s infinite alternate;
  opacity: 0.35;
}
* .d1.ani .circle:nth-child(36) {
  border-color: #00aaff;
  animation: d1-circle 7s linear 1.44s infinite alternate;
  opacity: 0.36;
}
* .d1.ani .circle:nth-child(37) {
  border-color: #0099ff;
  animation: d1-circle 7s linear 1.48s infinite alternate;
  opacity: 0.37;
}
* .d1.ani .circle:nth-child(38) {
  border-color: #0088ff;
  animation: d1-circle 7s linear 1.52s infinite alternate;
  opacity: 0.38;
}
* .d1.ani .circle:nth-child(39) {
  border-color: #0077ff;
  animation: d1-circle 7s linear 1.56s infinite alternate;
  opacity: 0.39;
}
* .d1.ani .circle:nth-child(40) {
  border-color: #0066ff;
  animation: d1-circle 7s linear 1.6s infinite alternate;
  opacity: 0.4;
}
* .d1.ani .circle:nth-child(41) {
  border-color: #0055ff;
  animation: d1-circle 7s linear 1.64s infinite alternate;
  opacity: 0.41;
}
* .d1.ani .circle:nth-child(42) {
  border-color: #0044ff;
  animation: d1-circle 7s linear 1.68s infinite alternate;
  opacity: 0.42;
}
* .d1.ani .circle:nth-child(43) {
  border-color: #0033ff;
  animation: d1-circle 7s linear 1.72s infinite alternate;
  opacity: 0.43;
}
* .d1.ani .circle:nth-child(44) {
  border-color: #0022ff;
  animation: d1-circle 7s linear 1.76s infinite alternate;
  opacity: 0.44;
}
* .d1.ani .circle:nth-child(45) {
  border-color: #0011ff;
  animation: d1-circle 7s linear 1.8s infinite alternate;
  opacity: 0.45;
}
@keyframes d1-circle {
  from {
    transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
  }
}
* .d2.ani .box {
  animation: d2-box 7s linear infinite;
}
@keyframes d2-box {
  from {
    transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
  }
}
* .d2.ani .circle:nth-child(1) {
  border-color: #ffaa00;
  animation: d2-circle 6.025s linear 0.03s infinite alternate;
  opacity: 0.009;
}
* .d2.ani .circle:nth-child(2) {
  border-color: #ffbb00;
  animation: d2-circle 6.05s linear 0.06s infinite alternate;
  opacity: 0.018;
}
* .d2.ani .circle:nth-child(3) {
  border-color: #ffcc00;
  animation: d2-circle 6.075s linear 0.09s infinite alternate;
  opacity: 0.027;
}
* .d2.ani .circle:nth-child(4) {
  border-color: #ffdd00;
  animation: d2-circle 6.1s linear 0.12s infinite alternate;
  opacity: 0.036;
}
* .d2.ani .circle:nth-child(5) {
  border-color: #ffee00;
  animation: d2-circle 6.125s linear 0.15s infinite alternate;
  opacity: 0.045;
}
* .d2.ani .circle:nth-child(6) {
  border-color: yellow;
  animation: d2-circle 6.15s linear 0.18s infinite alternate;
  opacity: 0.054;
}
* .d2.ani .circle:nth-child(7) {
  border-color: #eeff00;
  animation: d2-circle 6.175s linear 0.21s infinite alternate;
  opacity: 0.063;
}
* .d2.ani .circle:nth-child(8) {
  border-color: #ddff00;
  animation: d2-circle 6.2s linear 0.24s infinite alternate;
  opacity: 0.072;
}
* .d2.ani .circle:nth-child(9) {
  border-color: #ccff00;
  animation: d2-circle 6.225s linear 0.27s infinite alternate;
  opacity: 0.081;
}
* .d2.ani .circle:nth-child(10) {
  border-color: #bbff00;
  animation: d2-circle 6.25s linear 0.3s infinite alternate;
  opacity: 0.09;
}
* .d2.ani .circle:nth-child(11) {
  border-color: #aaff00;
  animation: d2-circle 6.275s linear 0.33s infinite alternate;
  opacity: 0.099;
}
* .d2.ani .circle:nth-child(12) {
  border-color: #99ff00;
  animation: d2-circle 6.3s linear 0.36s infinite alternate;
  opacity: 0.108;
}
* .d2.ani .circle:nth-child(13) {
  border-color: #88ff00;
  animation: d2-circle 6.325s linear 0.39s infinite alternate;
  opacity: 0.117;
}
* .d2.ani .circle:nth-child(14) {
  border-color: #77ff00;
  animation: d2-circle 6.35s linear 0.42s infinite alternate;
  opacity: 0.126;
}
* .d2.ani .circle:nth-child(15) {
  border-color: #66ff00;
  animation: d2-circle 6.375s linear 0.45s infinite alternate;
  opacity: 0.135;
}
* .d2.ani .circle:nth-child(16) {
  border-color: #55ff00;
  animation: d2-circle 6.4s linear 0.48s infinite alternate;
  opacity: 0.144;
}
* .d2.ani .circle:nth-child(17) {
  border-color: #44ff00;
  animation: d2-circle 6.425s linear 0.51s infinite alternate;
  opacity: 0.153;
}
* .d2.ani .circle:nth-child(18) {
  border-color: #33ff00;
  animation: d2-circle 6.45s linear 0.54s infinite alternate;
  opacity: 0.162;
}
* .d2.ani .circle:nth-child(19) {
  border-color: #22ff00;
  animation: d2-circle 6.475s linear 0.57s infinite alternate;
  opacity: 0.171;
}
* .d2.ani .circle:nth-child(20) {
  border-color: #11ff00;
  animation: d2-circle 6.5s linear 0.6s infinite alternate;
  opacity: 0.18;
}
* .d2.ani .circle:nth-child(21) {
  border-color: lime;
  animation: d2-circle 6.525s linear 0.63s infinite alternate;
  opacity: 0.189;
}
* .d2.ani .circle:nth-child(22) {
  border-color: #00ff11;
  animation: d2-circle 6.55s linear 0.66s infinite alternate;
  opacity: 0.198;
}
* .d2.ani .circle:nth-child(23) {
  border-color: #00ff22;
  animation: d2-circle 6.575s linear 0.69s infinite alternate;
  opacity: 0.207;
}
* .d2.ani .circle:nth-child(24) {
  border-color: #00ff33;
  animation: d2-circle 6.6s linear 0.72s infinite alternate;
  opacity: 0.216;
}
* .d2.ani .circle:nth-child(25) {
  border-color: #00ff44;
  animation: d2-circle 6.625s linear 0.75s infinite alternate;
  opacity: 0.225;
}
* .d2.ani .circle:nth-child(26) {
  border-color: #00ff55;
  animation: d2-circle 6.65s linear 0.78s infinite alternate;
  opacity: 0.234;
}
* .d2.ani .circle:nth-child(27) {
  border-color: #00ff66;
  animation: d2-circle 6.675s linear 0.81s infinite alternate;
  opacity: 0.243;
}
* .d2.ani .circle:nth-child(28) {
  border-color: #00ff77;
  animation: d2-circle 6.7s linear 0.84s infinite alternate;
  opacity: 0.252;
}
* .d2.ani .circle:nth-child(29) {
  border-color: #00ff88;
  animation: d2-circle 6.725s linear 0.87s infinite alternate;
  opacity: 0.261;
}
* .d2.ani .circle:nth-child(30) {
  border-color: #00ff99;
  animation: d2-circle 6.75s linear 0.9s infinite alternate;
  opacity: 0.27;
}
* .d2.ani .circle:nth-child(31) {
  border-color: #00ffaa;
  animation: d2-circle 6.775s linear 0.93s infinite alternate;
  opacity: 0.279;
}
* .d2.ani .circle:nth-child(32) {
  border-color: #00ffbb;
  animation: d2-circle 6.8s linear 0.96s infinite alternate;
  opacity: 0.288;
}
* .d2.ani .circle:nth-child(33) {
  border-color: #00ffcc;
  animation: d2-circle 6.825s linear 0.99s infinite alternate;
  opacity: 0.297;
}
* .d2.ani .circle:nth-child(34) {
  border-color: #00ffdd;
  animation: d2-circle 6.85s linear 1.02s infinite alternate;
  opacity: 0.306;
}
* .d2.ani .circle:nth-child(35) {
  border-color: #00ffee;
  animation: d2-circle 6.875s linear 1.05s infinite alternate;
  opacity: 0.315;
}
* .d2.ani .circle:nth-child(36) {
  border-color: aqua;
  animation: d2-circle 6.9s linear 1.08s infinite alternate;
  opacity: 0.324;
}
* .d2.ani .circle:nth-child(37) {
  border-color: #00eeff;
  animation: d2-circle 6.925s linear 1.11s infinite alternate;
  opacity: 0.333;
}
* .d2.ani .circle:nth-child(38) {
  border-color: #00ddff;
  animation: d2-circle 6.95s linear 1.14s infinite alternate;
  opacity: 0.342;
}
* .d2.ani .circle:nth-child(39) {
  border-color: #00ccff;
  animation: d2-circle 6.975s linear 1.17s infinite alternate;
  opacity: 0.351;
}
* .d2.ani .circle:nth-child(40) {
  border-color: #00bbff;
  animation: d2-circle 7s linear 1.2s infinite alternate;
  opacity: 0.36;
}
* .d2.ani .circle:nth-child(41) {
  border-color: #00aaff;
  animation: d2-circle 7.025s linear 1.23s infinite alternate;
  opacity: 0.369;
}
* .d2.ani .circle:nth-child(42) {
  border-color: #0099ff;
  animation: d2-circle 7.05s linear 1.26s infinite alternate;
  opacity: 0.378;
}
* .d2.ani .circle:nth-child(43) {
  border-color: #0088ff;
  animation: d2-circle 7.075s linear 1.29s infinite alternate;
  opacity: 0.387;
}
* .d2.ani .circle:nth-child(44) {
  border-color: #0077ff;
  animation: d2-circle 7.1s linear 1.32s infinite alternate;
  opacity: 0.396;
}
* .d2.ani .circle:nth-child(45) {
  border-color: #0066ff;
  animation: d2-circle 7.125s linear 1.35s infinite alternate;
  opacity: 0.405;
}
@keyframes d2-circle {
  from {
    transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
  }
}
* .d3.ani .box {
  animation: d3-box 9s linear infinite;
}
@keyframes d3-box {
  from {
    transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
  }
}
* .d3.ani .circle:nth-child(1) {
  border-color: #F06;
  animation: d3-circle 7s linear 0.04s infinite alternate;
  opacity: 0.01;
}
* .d3.ani .circle:nth-child(2) {
  border-color: #ff0048;
  animation: d3-circle 7s linear 0.08s infinite alternate;
  opacity: 0.02;
}
* .d3.ani .circle:nth-child(3) {
  border-color: #ff002b;
  animation: d3-circle 7s linear 0.12s infinite alternate;
  opacity: 0.03;
}
* .d3.ani .circle:nth-child(4) {
  border-color: #ff000d;
  animation: d3-circle 7s linear 0.16s infinite alternate;
  opacity: 0.04;
}
* .d3.ani .circle:nth-child(5) {
  border-color: #ff1100;
  animation: d3-circle 7s linear 0.2s infinite alternate;
  opacity: 0.05;
}
* .d3.ani .circle:nth-child(6) {
  border-color: #ff2f00;
  animation: d3-circle 7s linear 0.24s infinite alternate;
  opacity: 0.06;
}
* .d3.ani .circle:nth-child(7) {
  border-color: #ff4d00;
  animation: d3-circle 7s linear 0.28s infinite alternate;
  opacity: 0.07;
}
* .d3.ani .circle:nth-child(8) {
  border-color: #ff6a00;
  animation: d3-circle 7s linear 0.32s infinite alternate;
  opacity: 0.08;
}
* .d3.ani .circle:nth-child(9) {
  border-color: #ff8800;
  animation: d3-circle 7s linear 0.36s infinite alternate;
  opacity: 0.09;
}
* .d3.ani .circle:nth-child(10) {
  border-color: #ffa600;
  animation: d3-circle 7s linear 0.4s infinite alternate;
  opacity: 0.1;
}
* .d3.ani .circle:nth-child(11) {
  border-color: #ffc400;
  animation: d3-circle 7s linear 0.44s infinite alternate;
  opacity: 0.11;
}
* .d3.ani .circle:nth-child(12) {
  border-color: #ffe100;
  animation: d3-circle 7s linear 0.48s infinite alternate;
  opacity: 0.12;
}
* .d3.ani .circle:nth-child(13) {
  border-color: yellow;
  animation: d3-circle 7s linear 0.52s infinite alternate;
  opacity: 0.13;
}
* .d3.ani .circle:nth-child(14) {
  border-color: #e1ff00;
  animation: d3-circle 7s linear 0.56s infinite alternate;
  opacity: 0.14;
}
* .d3.ani .circle:nth-child(15) {
  border-color: #c4ff00;
  animation: d3-circle 7s linear 0.6s infinite alternate;
  opacity: 0.15;
}
* .d3.ani .circle:nth-child(16) {
  border-color: #a6ff00;
  animation: d3-circle 7s linear 0.64s infinite alternate;
  opacity: 0.16;
}
* .d3.ani .circle:nth-child(17) {
  border-color: #88ff00;
  animation: d3-circle 7s linear 0.68s infinite alternate;
  opacity: 0.17;
}
* .d3.ani .circle:nth-child(18) {
  border-color: #6aff00;
  animation: d3-circle 7s linear 0.72s infinite alternate;
  opacity: 0.18;
}
* .d3.ani .circle:nth-child(19) {
  border-color: #4dff00;
  animation: d3-circle 7s linear 0.76s infinite alternate;
  opacity: 0.19;
}
* .d3.ani .circle:nth-child(20) {
  border-color: #2fff00;
  animation: d3-circle 7s linear 0.8s infinite alternate;
  opacity: 0.2;
}
* .d3.ani .circle:nth-child(21) {
  border-color: #11ff00;
  animation: d3-circle 7s linear 0.84s infinite alternate;
  opacity: 0.21;
}
* .d3.ani .circle:nth-child(22) {
  border-color: #00ff0d;
  animation: d3-circle 7s linear 0.88s infinite alternate;
  opacity: 0.22;
}
* .d3.ani .circle:nth-child(23) {
  border-color: #00ff2b;
  animation: d3-circle 7s linear 0.92s infinite alternate;
  opacity: 0.23;
}
* .d3.ani .circle:nth-child(24) {
  border-color: #00ff48;
  animation: d3-circle 7s linear 0.96s infinite alternate;
  opacity: 0.24;
}
* .d3.ani .circle:nth-child(25) {
  border-color: #00ff66;
  animation: d3-circle 7s linear 1s infinite alternate;
  opacity: 0.25;
}
* .d3.ani .circle:nth-child(26) {
  border-color: #00ff84;
  animation: d3-circle 7s linear 1.04s infinite alternate;
  opacity: 0.26;
}
* .d3.ani .circle:nth-child(27) {
  border-color: #00ffa2;
  animation: d3-circle 7s linear 1.08s infinite alternate;
  opacity: 0.27;
}
* .d3.ani .circle:nth-child(28) {
  border-color: #00ffbf;
  animation: d3-circle 7s linear 1.12s infinite alternate;
  opacity: 0.28;
}
* .d3.ani .circle:nth-child(29) {
  border-color: #00ffdd;
  animation: d3-circle 7s linear 1.16s infinite alternate;
  opacity: 0.29;
}
* .d3.ani .circle:nth-child(30) {
  border-color: #00fffb;
  animation: d3-circle 7s linear 1.2s infinite alternate;
  opacity: 0.3;
}
* .d3.ani .circle:nth-child(31) {
  border-color: #00e6ff;
  animation: d3-circle 7s linear 1.24s infinite alternate;
  opacity: 0.31;
}
* .d3.ani .circle:nth-child(32) {
  border-color: #00c8ff;
  animation: d3-circle 7s linear 1.28s infinite alternate;
  opacity: 0.32;
}
* .d3.ani .circle:nth-child(33) {
  border-color: #00aaff;
  animation: d3-circle 7s linear 1.32s infinite alternate;
  opacity: 0.33;
}
* .d3.ani .circle:nth-child(34) {
  border-color: #008cff;
  animation: d3-circle 7s linear 1.36s infinite alternate;
  opacity: 0.34;
}
* .d3.ani .circle:nth-child(35) {
  border-color: #006fff;
  animation: d3-circle 7s linear 1.4s infinite alternate;
  opacity: 0.35;
}
* .d3.ani .circle:nth-child(36) {
  border-color: #0051ff;
  animation: d3-circle 7s linear 1.44s infinite alternate;
  opacity: 0.36;
}
* .d3.ani .circle:nth-child(37) {
  border-color: #0033ff;
  animation: d3-circle 7s linear 1.48s infinite alternate;
  opacity: 0.37;
}
* .d3.ani .circle:nth-child(38) {
  border-color: #0015ff;
  animation: d3-circle 7s linear 1.52s infinite alternate;
  opacity: 0.38;
}
* .d3.ani .circle:nth-child(39) {
  border-color: #0900ff;
  animation: d3-circle 7s linear 1.56s infinite alternate;
  opacity: 0.39;
}
* .d3.ani .circle:nth-child(40) {
  border-color: #2600ff;
  animation: d3-circle 7s linear 1.6s infinite alternate;
  opacity: 0.4;
}
* .d3.ani .circle:nth-child(41) {
  border-color: #4400ff;
  animation: d3-circle 7s linear 1.64s infinite alternate;
  opacity: 0.41;
}
* .d3.ani .circle:nth-child(42) {
  border-color: #6200ff;
  animation: d3-circle 7s linear 1.68s infinite alternate;
  opacity: 0.42;
}
* .d3.ani .circle:nth-child(43) {
  border-color: #8000ff;
  animation: d3-circle 7s linear 1.72s infinite alternate;
  opacity: 0.43;
}
* .d3.ani .circle:nth-child(44) {
  border-color: #9d00ff;
  animation: d3-circle 7s linear 1.76s infinite alternate;
  opacity: 0.44;
}
* .d3.ani .circle:nth-child(45) {
  border-color: #bb00ff;
  animation: d3-circle 7s linear 1.8s infinite alternate;
  opacity: 0.45;
}
@keyframes d3-circle {
  from {
    transform: rotateX(360deg) rotateY(-360deg) rotateZ(360deg);
  }
}
* .d4.ani .box {
  animation: d4-box 7s linear infinite;
}
@keyframes d4-box {
  from {
    transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
  }
}
* .d4.ani .circle:nth-child(1) {
  border-color: #F00;
  animation: d4-circle 7s linear 0.04s infinite;
  opacity: 0.006;
}
* .d4.ani .circle:nth-child(2) {
  border-color: #ff1e00;
  animation: d4-circle 7s linear 0.08s infinite;
  opacity: 0.012;
}
* .d4.ani .circle:nth-child(3) {
  border-color: #ff3c00;
  animation: d4-circle 7s linear 0.12s infinite;
  opacity: 0.018;
}
* .d4.ani .circle:nth-child(4) {
  border-color: #ff5900;
  animation: d4-circle 7s linear 0.16s infinite;
  opacity: 0.024;
}
* .d4.ani .circle:nth-child(5) {
  border-color: #ff7700;
  animation: d4-circle 7s linear 0.2s infinite;
  opacity: 0.03;
}
* .d4.ani .circle:nth-child(6) {
  border-color: #ff9500;
  animation: d4-circle 7s linear 0.24s infinite;
  opacity: 0.036;
}
* .d4.ani .circle:nth-child(7) {
  border-color: #ffb300;
  animation: d4-circle 7s linear 0.28s infinite;
  opacity: 0.042;
}
* .d4.ani .circle:nth-child(8) {
  border-color: #ffd000;
  animation: d4-circle 7s linear 0.32s infinite;
  opacity: 0.048;
}
* .d4.ani .circle:nth-child(9) {
  border-color: #ffee00;
  animation: d4-circle 7s linear 0.36s infinite;
  opacity: 0.054;
}
* .d4.ani .circle:nth-child(10) {
  border-color: #f2ff00;
  animation: d4-circle 7s linear 0.4s infinite;
  opacity: 0.06;
}
* .d4.ani .circle:nth-child(11) {
  border-color: #d5ff00;
  animation: d4-circle 7s linear 0.44s infinite;
  opacity: 0.066;
}
* .d4.ani .circle:nth-child(12) {
  border-color: #b7ff00;
  animation: d4-circle 7s linear 0.48s infinite;
  opacity: 0.072;
}
* .d4.ani .circle:nth-child(13) {
  border-color: #99ff00;
  animation: d4-circle 7s linear 0.52s infinite;
  opacity: 0.078;
}
* .d4.ani .circle:nth-child(14) {
  border-color: #7bff00;
  animation: d4-circle 7s linear 0.56s infinite;
  opacity: 0.084;
}
* .d4.ani .circle:nth-child(15) {
  border-color: #5eff00;
  animation: d4-circle 7s linear 0.6s infinite;
  opacity: 0.09;
}
* .d4.ani .circle:nth-child(16) {
  border-color: #40ff00;
  animation: d4-circle 7s linear 0.64s infinite;
  opacity: 0.096;
}
* .d4.ani .circle:nth-child(17) {
  border-color: #22ff00;
  animation: d4-circle 7s linear 0.68s infinite;
  opacity: 0.102;
}
* .d4.ani .circle:nth-child(18) {
  border-color: #04ff00;
  animation: d4-circle 7s linear 0.72s infinite;
  opacity: 0.108;
}
* .d4.ani .circle:nth-child(19) {
  border-color: #00ff1a;
  animation: d4-circle 7s linear 0.76s infinite;
  opacity: 0.114;
}
* .d4.ani .circle:nth-child(20) {
  border-color: #00ff37;
  animation: d4-circle 7s linear 0.8s infinite;
  opacity: 0.12;
}
* .d4.ani .circle:nth-child(21) {
  border-color: #00ff55;
  animation: d4-circle 7s linear 0.84s infinite;
  opacity: 0.126;
}
* .d4.ani .circle:nth-child(22) {
  border-color: #00ff73;
  animation: d4-circle 7s linear 0.88s infinite;
  opacity: 0.132;
}
* .d4.ani .circle:nth-child(23) {
  border-color: #00ff91;
  animation: d4-circle 7s linear 0.92s infinite;
  opacity: 0.138;
}
* .d4.ani .circle:nth-child(24) {
  border-color: #00ffae;
  animation: d4-circle 7s linear 0.96s infinite;
  opacity: 0.144;
}
* .d4.ani .circle:nth-child(25) {
  border-color: #00ffcc;
  animation: d4-circle 7s linear 1s infinite;
  opacity: 0.15;
}
* .d4.ani .circle:nth-child(26) {
  border-color: #00ffea;
  animation: d4-circle 7s linear 1.04s infinite;
  opacity: 0.156;
}
* .d4.ani .circle:nth-child(27) {
  border-color: #00f7ff;
  animation: d4-circle 7s linear 1.08s infinite;
  opacity: 0.162;
}
* .d4.ani .circle:nth-child(28) {
  border-color: #00d9ff;
  animation: d4-circle 7s linear 1.12s infinite;
  opacity: 0.168;
}
* .d4.ani .circle:nth-child(29) {
  border-color: #00bbff;
  animation: d4-circle 7s linear 1.16s infinite;
  opacity: 0.174;
}
* .d4.ani .circle:nth-child(30) {
  border-color: #009dff;
  animation: d4-circle 7s linear 1.2s infinite;
  opacity: 0.18;
}
* .d4.ani .circle:nth-child(31) {
  border-color: #0080ff;
  animation: d4-circle 7s linear 1.24s infinite;
  opacity: 0.186;
}
* .d4.ani .circle:nth-child(32) {
  border-color: #0062ff;
  animation: d4-circle 7s linear 1.28s infinite;
  opacity: 0.192;
}
* .d4.ani .circle:nth-child(33) {
  border-color: #0044ff;
  animation: d4-circle 7s linear 1.32s infinite;
  opacity: 0.198;
}
* .d4.ani .circle:nth-child(34) {
  border-color: #0026ff;
  animation: d4-circle 7s linear 1.36s infinite;
  opacity: 0.204;
}
* .d4.ani .circle:nth-child(35) {
  border-color: #0009ff;
  animation: d4-circle 7s linear 1.4s infinite;
  opacity: 0.21;
}
* .d4.ani .circle:nth-child(36) {
  border-color: #1500ff;
  animation: d4-circle 7s linear 1.44s infinite;
  opacity: 0.216;
}
* .d4.ani .circle:nth-child(37) {
  border-color: #3300ff;
  animation: d4-circle 7s linear 1.48s infinite;
  opacity: 0.222;
}
* .d4.ani .circle:nth-child(38) {
  border-color: #5100ff;
  animation: d4-circle 7s linear 1.52s infinite;
  opacity: 0.228;
}
* .d4.ani .circle:nth-child(39) {
  border-color: #6f00ff;
  animation: d4-circle 7s linear 1.56s infinite;
  opacity: 0.234;
}
* .d4.ani .circle:nth-child(40) {
  border-color: #8c00ff;
  animation: d4-circle 7s linear 1.6s infinite;
  opacity: 0.24;
}
* .d4.ani .circle:nth-child(41) {
  border-color: #aa00ff;
  animation: d4-circle 7s linear 1.64s infinite;
  opacity: 0.246;
}
* .d4.ani .circle:nth-child(42) {
  border-color: #c800ff;
  animation: d4-circle 7s linear 1.68s infinite;
  opacity: 0.252;
}
* .d4.ani .circle:nth-child(43) {
  border-color: #e600ff;
  animation: d4-circle 7s linear 1.72s infinite;
  opacity: 0.258;
}
* .d4.ani .circle:nth-child(44) {
  border-color: #ff00fb;
  animation: d4-circle 7s linear 1.76s infinite;
  opacity: 0.264;
}
* .d4.ani .circle:nth-child(45) {
  border-color: #ff00dd;
  animation: d4-circle 7s linear 1.8s infinite;
  opacity: 0.27;
}
@keyframes d4-circle {
  to {
    transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
  }
}
* .d5.ani .box {
  animation: d5-box 9s linear infinite;
}
@keyframes d5-box {
  to {
    transform: rotateZ(360deg);
  }
}
* .d5.ani .circle:nth-child(1) {
  border-color: #F06;
  animation: d5-circle 7s linear 0.04s infinite alternate;
  opacity: 0.006;
}
* .d5.ani .circle:nth-child(2) {
  border-color: #ff0048;
  animation: d5-circle 7s linear 0.08s infinite alternate;
  opacity: 0.012;
}
* .d5.ani .circle:nth-child(3) {
  border-color: #ff002b;
  animation: d5-circle 7s linear 0.12s infinite alternate;
  opacity: 0.018;
}
* .d5.ani .circle:nth-child(4) {
  border-color: #ff000d;
  animation: d5-circle 7s linear 0.16s infinite alternate;
  opacity: 0.024;
}
* .d5.ani .circle:nth-child(5) {
  border-color: #ff1100;
  animation: d5-circle 7s linear 0.2s infinite alternate;
  opacity: 0.03;
}
* .d5.ani .circle:nth-child(6) {
  border-color: #ff2f00;
  animation: d5-circle 7s linear 0.24s infinite alternate;
  opacity: 0.036;
}
* .d5.ani .circle:nth-child(7) {
  border-color: #ff4d00;
  animation: d5-circle 7s linear 0.28s infinite alternate;
  opacity: 0.042;
}
* .d5.ani .circle:nth-child(8) {
  border-color: #ff6a00;
  animation: d5-circle 7s linear 0.32s infinite alternate;
  opacity: 0.048;
}
* .d5.ani .circle:nth-child(9) {
  border-color: #ff8800;
  animation: d5-circle 7s linear 0.36s infinite alternate;
  opacity: 0.054;
}
* .d5.ani .circle:nth-child(10) {
  border-color: #ffa600;
  animation: d5-circle 7s linear 0.4s infinite alternate;
  opacity: 0.06;
}
* .d5.ani .circle:nth-child(11) {
  border-color: #ffc400;
  animation: d5-circle 7s linear 0.44s infinite alternate;
  opacity: 0.066;
}
* .d5.ani .circle:nth-child(12) {
  border-color: #ffe100;
  animation: d5-circle 7s linear 0.48s infinite alternate;
  opacity: 0.072;
}
* .d5.ani .circle:nth-child(13) {
  border-color: yellow;
  animation: d5-circle 7s linear 0.52s infinite alternate;
  opacity: 0.078;
}
* .d5.ani .circle:nth-child(14) {
  border-color: #e1ff00;
  animation: d5-circle 7s linear 0.56s infinite alternate;
  opacity: 0.084;
}
* .d5.ani .circle:nth-child(15) {
  border-color: #c4ff00;
  animation: d5-circle 7s linear 0.6s infinite alternate;
  opacity: 0.09;
}
* .d5.ani .circle:nth-child(16) {
  border-color: #a6ff00;
  animation: d5-circle 7s linear 0.64s infinite alternate;
  opacity: 0.096;
}
* .d5.ani .circle:nth-child(17) {
  border-color: #88ff00;
  animation: d5-circle 7s linear 0.68s infinite alternate;
  opacity: 0.102;
}
* .d5.ani .circle:nth-child(18) {
  border-color: #6aff00;
  animation: d5-circle 7s linear 0.72s infinite alternate;
  opacity: 0.108;
}
* .d5.ani .circle:nth-child(19) {
  border-color: #4dff00;
  animation: d5-circle 7s linear 0.76s infinite alternate;
  opacity: 0.114;
}
* .d5.ani .circle:nth-child(20) {
  border-color: #2fff00;
  animation: d5-circle 7s linear 0.8s infinite alternate;
  opacity: 0.12;
}
* .d5.ani .circle:nth-child(21) {
  border-color: #11ff00;
  animation: d5-circle 7s linear 0.84s infinite alternate;
  opacity: 0.126;
}
* .d5.ani .circle:nth-child(22) {
  border-color: #00ff0d;
  animation: d5-circle 7s linear 0.88s infinite alternate;
  opacity: 0.132;
}
* .d5.ani .circle:nth-child(23) {
  border-color: #00ff2b;
  animation: d5-circle 7s linear 0.92s infinite alternate;
  opacity: 0.138;
}
* .d5.ani .circle:nth-child(24) {
  border-color: #00ff48;
  animation: d5-circle 7s linear 0.96s infinite alternate;
  opacity: 0.144;
}
* .d5.ani .circle:nth-child(25) {
  border-color: #00ff66;
  animation: d5-circle 7s linear 1s infinite alternate;
  opacity: 0.15;
}
* .d5.ani .circle:nth-child(26) {
  border-color: #00ff84;
  animation: d5-circle 7s linear 1.04s infinite alternate;
  opacity: 0.156;
}
* .d5.ani .circle:nth-child(27) {
  border-color: #00ffa2;
  animation: d5-circle 7s linear 1.08s infinite alternate;
  opacity: 0.162;
}
* .d5.ani .circle:nth-child(28) {
  border-color: #00ffbf;
  animation: d5-circle 7s linear 1.12s infinite alternate;
  opacity: 0.168;
}
* .d5.ani .circle:nth-child(29) {
  border-color: #00ffdd;
  animation: d5-circle 7s linear 1.16s infinite alternate;
  opacity: 0.174;
}
* .d5.ani .circle:nth-child(30) {
  border-color: #00fffb;
  animation: d5-circle 7s linear 1.2s infinite alternate;
  opacity: 0.18;
}
* .d5.ani .circle:nth-child(31) {
  border-color: #00e6ff;
  animation: d5-circle 7s linear 1.24s infinite alternate;
  opacity: 0.186;
}
* .d5.ani .circle:nth-child(32) {
  border-color: #00c8ff;
  animation: d5-circle 7s linear 1.28s infinite alternate;
  opacity: 0.192;
}
* .d5.ani .circle:nth-child(33) {
  border-color: #00aaff;
  animation: d5-circle 7s linear 1.32s infinite alternate;
  opacity: 0.198;
}
* .d5.ani .circle:nth-child(34) {
  border-color: #008cff;
  animation: d5-circle 7s linear 1.36s infinite alternate;
  opacity: 0.204;
}
* .d5.ani .circle:nth-child(35) {
  border-color: #006fff;
  animation: d5-circle 7s linear 1.4s infinite alternate;
  opacity: 0.21;
}
* .d5.ani .circle:nth-child(36) {
  border-color: #0051ff;
  animation: d5-circle 7s linear 1.44s infinite alternate;
  opacity: 0.216;
}
* .d5.ani .circle:nth-child(37) {
  border-color: #0033ff;
  animation: d5-circle 7s linear 1.48s infinite alternate;
  opacity: 0.222;
}
* .d5.ani .circle:nth-child(38) {
  border-color: #0015ff;
  animation: d5-circle 7s linear 1.52s infinite alternate;
  opacity: 0.228;
}
* .d5.ani .circle:nth-child(39) {
  border-color: #0900ff;
  animation: d5-circle 7s linear 1.56s infinite alternate;
  opacity: 0.234;
}
* .d5.ani .circle:nth-child(40) {
  border-color: #2600ff;
  animation: d5-circle 7s linear 1.6s infinite alternate;
  opacity: 0.24;
}
* .d5.ani .circle:nth-child(41) {
  border-color: #4400ff;
  animation: d5-circle 7s linear 1.64s infinite alternate;
  opacity: 0.246;
}
* .d5.ani .circle:nth-child(42) {
  border-color: #6200ff;
  animation: d5-circle 7s linear 1.68s infinite alternate;
  opacity: 0.252;
}
* .d5.ani .circle:nth-child(43) {
  border-color: #8000ff;
  animation: d5-circle 7s linear 1.72s infinite alternate;
  opacity: 0.258;
}
* .d5.ani .circle:nth-child(44) {
  border-color: #9d00ff;
  animation: d5-circle 7s linear 1.76s infinite alternate;
  opacity: 0.264;
}
* .d5.ani .circle:nth-child(45) {
  border-color: #bb00ff;
  animation: d5-circle 7s linear 1.8s infinite alternate;
  opacity: 0.27;
}
@keyframes d5-circle {
  0% {
    transform: rotateX(0deg) rotateY(0deg);
  }
  25% {
    transform: rotateX(0deg) rotateY(30deg);
  }
  100% {
    transform: rotateX(30deg) rotateY(0deg);
  }
}

* .e1.ani .box {
  animation: d3-box 9s linear infinite;
}
@keyframes d3-box {
  from {
    transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
  }
}
* .e1.ani .circle:nth-child(1) {
  border: unset;
  background: linear-gradient(#f0f, transparent, transparent);
  animation: d1-circle 7s linear 0.1s infinite alternate;
  opacity: 0.03;
}
* .e1.ani .circle:nth-child(2) {
  border: unset;
  background: linear-gradient(#d500ff, transparent, transparent);
  animation: d1-circle 7s linear 0.2s infinite alternate;
  opacity: 0.06;
}
* .e1.ani .circle:nth-child(3) {
  border: unset;
  background: linear-gradient(#aa00ff, transparent, transparent);
  animation: d1-circle 7s linear 0.3s infinite alternate;
  opacity: 0.09;
}
* .e1.ani .circle:nth-child(4) {
  border: unset;
  background: linear-gradient(#8000ff, transparent, transparent);
  animation: d1-circle 7s linear 0.4s infinite alternate;
  opacity: 0.12;
}
* .e1.ani .circle:nth-child(5) {
  border: unset;
  background: linear-gradient(#5500ff, transparent, transparent);
  animation: d1-circle 7s linear 0.5s infinite alternate;
  opacity: 0.15;
}
* .e1.ani .circle:nth-child(6) {
  border: unset;
  background: linear-gradient(#2b00ff, transparent, transparent);
  animation: d1-circle 7s linear 0.6s infinite alternate;
  opacity: 0.18;
}
* .e1.ani .circle:nth-child(7) {
  border: unset;
  background: linear-gradient(blue, transparent, transparent);
  animation: d1-circle 7s linear 0.7s infinite alternate;
  opacity: 0.21;
}
* .e1.ani .circle:nth-child(8) {
  border: unset;
  background: linear-gradient(#002bff, transparent, transparent);
  animation: d1-circle 7s linear 0.8s infinite alternate;
  opacity: 0.24;
}
* .e1.ani .circle:nth-child(9) {
  border: unset;
  background: linear-gradient(#0055ff, transparent, transparent);
  animation: d1-circle 7s linear 0.9s infinite alternate;
  opacity: 0.27;
}
* .e1.ani .circle:nth-child(10) {
  border: unset;
  background: linear-gradient(#0080ff, transparent, transparent);
  animation: d1-circle 7s linear 1s infinite alternate;
  opacity: 0.3;
}
* .e1.ani .circle:nth-child(11) {
  border: unset;
  background: linear-gradient(#00aaff, transparent, transparent);
  animation: d1-circle 7s linear 1.1s infinite alternate;
  opacity: 0.33;
}
* .e1.ani .circle:nth-child(12) {
  border: unset;
  background: linear-gradient(#00d5ff, transparent, transparent);
  animation: d1-circle 7s linear 1.2s infinite alternate;
  opacity: 0.36;
}
* .e1.ani .circle:nth-child(13) {
  border: unset;
  background: linear-gradient(aqua, transparent, transparent);
  animation: d1-circle 7s linear 1.3s infinite alternate;
  opacity: 0.39;
}
* .e1.ani .circle:nth-child(14) {
  border: unset;
  background: linear-gradient(#00ffd5, transparent, transparent);
  animation: d1-circle 7s linear 1.4s infinite alternate;
  opacity: 0.42;
}
* .e1.ani .circle:nth-child(15) {
  border: unset;
  background: linear-gradient(#00ffaa, transparent, transparent);
  animation: d1-circle 7s linear 1.5s infinite alternate;
  opacity: 0.45;
}
@keyframes d1-circle {
  from {
    transform: rotateX(360deg) rotateY(-360deg) rotateZ(360deg);
  }
}
* .e3.ani .box {
  animation: d3-box 9s linear infinite;
}
@keyframes d3-box {
  from {
    transform: rotateX(-360deg) rotateY(-360deg) rotateZ(-360deg);
  }
}
* .e3.ani .circle:nth-child(1) {
  border: unset;
  background: linear-gradient(#f0f, transparent);
  animation: e3-circle 7s linear 0.3s infinite alternate;
  opacity: 0.03;
}
* .e3.ani .circle:nth-child(2) {
  border: unset;
  background: linear-gradient(#e600ff, transparent);
  animation: e3-circle 7s linear 0.6s infinite alternate;
  opacity: 0.06;
}
* .e3.ani .circle:nth-child(3) {
  border: unset;
  background: linear-gradient(#cc00ff, transparent);
  animation: e3-circle 7s linear 0.9s infinite alternate;
  opacity: 0.09;
}
* .e3.ani .circle:nth-child(4) {
  border: unset;
  background: linear-gradient(#b300ff, transparent);
  animation: e3-circle 7s linear 1.2s infinite alternate;
  opacity: 0.12;
}
* .e3.ani .circle:nth-child(5) {
  border: unset;
  background: linear-gradient(#9900ff, transparent);
  animation: e3-circle 7s linear 1.5s infinite alternate;
  opacity: 0.15;
}
* .e3.ani .circle:nth-child(6) {
  border: unset;
  background: linear-gradient(#8000ff, transparent);
  animation: e3-circle 7s linear 1.8s infinite alternate;
  opacity: 0.18;
}
* .e3.ani .circle:nth-child(7) {
  border: unset;
  background: linear-gradient(#6600ff, transparent);
  animation: e3-circle 7s linear 2.1s infinite alternate;
  opacity: 0.21;
}
* .e3.ani .circle:nth-child(8) {
  border: unset;
  background: linear-gradient(#4d00ff, transparent);
  animation: e3-circle 7s linear 2.4s infinite alternate;
  opacity: 0.24;
}
* .e3.ani .circle:nth-child(9) {
  border: unset;
  background: linear-gradient(#3300ff, transparent);
  animation: e3-circle 7s linear 2.7s infinite alternate;
  opacity: 0.27;
}
* .e3.ani .circle:nth-child(10) {
  border: unset;
  background: linear-gradient(#1a00ff, transparent);
  animation: e3-circle 7s linear 3s infinite alternate;
  opacity: 0.3;
}
* .e3.ani .circle:nth-child(11) {
  border: unset;
  background: linear-gradient(blue, transparent);
  animation: e3-circle 7s linear 3.3s infinite alternate;
  opacity: 0.33;
}
* .e3.ani .circle:nth-child(12) {
  border: unset;
  background: linear-gradient(#001aff, transparent);
  animation: e3-circle 7s linear 3.6s infinite alternate;
  opacity: 0.36;
}
* .e3.ani .circle:nth-child(13) {
  border: unset;
  background: linear-gradient(#0033ff, transparent);
  animation: e3-circle 7s linear 3.9s infinite alternate;
  opacity: 0.39;
}
* .e3.ani .circle:nth-child(14) {
  border: unset;
  background: linear-gradient(#004dff, transparent);
  animation: e3-circle 7s linear 4.2s infinite alternate;
  opacity: 0.42;
}
* .e3.ani .circle:nth-child(15) {
  border: unset;
  background: linear-gradient(#0066ff, transparent);
  animation: e3-circle 7s linear 4.5s infinite alternate;
  opacity: 0.45;
}
@keyframes e3-circle {
  from {
    transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
  }
}
* .e5.ani .box {
  animation: d5-box 7s linear infinite;
}
@keyframes d5-box {
  from {
    transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
  }
}
* .e5.ani .circle:nth-child(1) {
  border: unset;
  background: linear-gradient(#0ff, transparent, #f0f);
  background-size: 100% 200%;
  animation: e5-circle 5s linear 0.05s infinite alternate;
  opacity: 0.03;
}
* .e5.ani .circle:nth-child(2) {
  border: unset;
  background: linear-gradient(#0ff, transparent, #f0f);
  background-size: 100% 200%;
  animation: e5-circle 5s linear 0.1s infinite alternate;
  opacity: 0.06;
}
* .e5.ani .circle:nth-child(3) {
  border: unset;
  background: linear-gradient(#0ff, transparent, #f0f);
  background-size: 100% 200%;
  animation: e5-circle 5s linear 0.15s infinite alternate;
  opacity: 0.09;
}
* .e5.ani .circle:nth-child(4) {
  border: unset;
  background: linear-gradient(#0ff, transparent, #f0f);
  background-size: 100% 200%;
  animation: e5-circle 5s linear 0.2s infinite alternate;
  opacity: 0.12;
}
* .e5.ani .circle:nth-child(5) {
  border: unset;
  background: linear-gradient(#0ff, transparent, #f0f);
  background-size: 100% 200%;
  animation: e5-circle 5s linear 0.25s infinite alternate;
  opacity: 0.15;
}
* .e5.ani .circle:nth-child(6) {
  border: unset;
  background: linear-gradient(#0ff, transparent, #f0f);
  background-size: 100% 200%;
  animation: e5-circle 5s linear 0.3s infinite alternate;
  opacity: 0.18;
}
* .e5.ani .circle:nth-child(7) {
  border: unset;
  background: linear-gradient(#0ff, transparent, #f0f);
  background-size: 100% 200%;
  animation: e5-circle 5s linear 0.35s infinite alternate;
  opacity: 0.21;
}
* .e5.ani .circle:nth-child(8) {
  border: unset;
  background: linear-gradient(#0ff, transparent, #f0f);
  background-size: 100% 200%;
  animation: e5-circle 5s linear 0.4s infinite alternate;
  opacity: 0.24;
}
* .e5.ani .circle:nth-child(9) {
  border: unset;
  background: linear-gradient(#0ff, transparent, #f0f);
  background-size: 100% 200%;
  animation: e5-circle 5s linear 0.45s infinite alternate;
  opacity: 0.27;
}
* .e5.ani .circle:nth-child(10) {
  border: unset;
  background: linear-gradient(#0ff, transparent, #f0f);
  background-size: 100% 200%;
  animation: e5-circle 5s linear 0.5s infinite alternate;
  opacity: 0.3;
}
* .e5.ani .circle:nth-child(11) {
  border: unset;
  background: linear-gradient(#0ff, transparent, #f0f);
  background-size: 100% 200%;
  animation: e5-circle 5s linear 0.55s infinite alternate;
  opacity: 0.33;
}
* .e5.ani .circle:nth-child(12) {
  border: unset;
  background: linear-gradient(#0ff, transparent, #f0f);
  background-size: 100% 200%;
  animation: e5-circle 5s linear 0.6s infinite alternate;
  opacity: 0.36;
}
* .e5.ani .circle:nth-child(13) {
  border: unset;
  background: linear-gradient(#0ff, transparent, #f0f);
  background-size: 100% 200%;
  animation: e5-circle 5s linear 0.65s infinite alternate;
  opacity: 0.39;
}
* .e5.ani .circle:nth-child(14) {
  border: unset;
  background: linear-gradient(#0ff, transparent, #f0f);
  background-size: 100% 200%;
  animation: e5-circle 5s linear 0.7s infinite alternate;
  opacity: 0.42;
}
* .e5.ani .circle:nth-child(15) {
  border: unset;
  background: linear-gradient(#0ff, transparent, #f0f);
  background-size: 100% 200%;
  animation: e5-circle 5s linear 0.75s infinite alternate;
  opacity: 0.45;
}
@keyframes e5-circle {
  from {
    background-position: 100% 0%;
  }
  to {
    background-position: 0% 100%;
    transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
  }
}
.final .box.visuals {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  padding: 0;
}
.final .box.visuals :is(.c1, .c2).ani .circle {
  border-radius: 115% 140% 145% 110%/125% 140% 110% 125%;
}
.final .box.visuals .visual {
  width: 50px;
  height: 50px;
  opacity: 0;
  transition: 0.4s ease-in;
}
.final .box.visuals .visual .box, .final .box.visuals .visual .circle {
  width: 100%;
  height: 100%;
}
.final .box.visuals .visual.ani {
    width: 50px;
    height: 50px;
    opacity: 100;
    transition: 0.4s ease-out;
}
.final button {
  padding: 0.5rem 1rem;
  border: 0;
  margin: 2rem 0.5rem 0;
  background-color: #222;
  color: #aaa;
}