@keyframes spin3D {
  from { transform: rotate3d(0.5, 0.5, 0.5, 360deg); }
  to { transform: rotate3d(0deg); }
}
#loading {
  height: 100%;
  background-color: #6EB6E0aa;
  backdrop-filter: saturate(100%) blur(10px);
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0; left: 0; right: 0;
  overflow: hidden;
  z-index: 99999999;
}
.spinner-box {
  width: 300px; height: 300px;
  display: flex; justify-content: center; align-items: center;
  background-color: transparent;
}
.leo {
  position: absolute; display: flex; justify-content: center; align-items: center; border-radius: 50%;
}
.blue-orbit { width: 175px; height: 175px; border: 2px solid #4FA8E0; animation: spin3D 3s linear .2s infinite; }
.green-orbit { width: 135px; height: 135px; border: 2px solid #7EC8E3; animation: spin3D 2s linear 0s infinite; }
.red-orbit { width: 100px; height: 100px; border: 2px solid #A8DCF5; animation: spin3D 1s linear 0s infinite; }
.white-orbit-a { width: 70px; height: 70px; border: 1px solid #EAF6FC; animation: spin3D 3s linear 0s infinite; }
.white-orbit-b { width: 70px; height: 70px; border: 1px solid #EAF6FC; animation: spin3D 1.5s linear 0s infinite; }
.nucleus { width: 1px; height: 1px; border: 1px solid #ffffff; animation: spin3D 1s linear 0s infinite; }