body {
  overflow: hidden;
}
#container {
  margin: auto;
  width: 700px;
  height: 700px;
  margin-top: 10%;
  z-index: 1;

}

#container_two {
  position: absolute;
  top: -50;
  left: -50;
  z-index: 3;
}

#container_three {
  position: absolute;
  top: -50;
  right: -150;
  z-index: 3;
}

#container_four {
  position: absolute;
  bottom: -150;
  left: -50;
  z-index: 3;
}

#container_five {
  position: absolute;
  bottom: -150;
  right: -150;
  z-index: 3;
}

#container_six {
  position: absolute;
  top: -250;
  left: 27%;
  z-index: 2;
}

#container_seven {
  position: absolute;
  bottom: -350;
  left: 27%;
  z-index: 2;
}
/*@keyframes whole_rotation {
  0% {transform: rotate(0deg);}
  25% {transform: rotate(90deg);}
  50% {transform: rotate(180deg)rotateY(0deg);}
  75% {transform: rotate(270deg) rotateY(180deg);}
  100% {transform: rotate(360deg) rotateY(360deg);;}
}*/

#whole {
  margin: auto;
  width: 100%;
  height: 100%;
  /*transform-origin: center;
  animation: whole_rotation 3s infinite linear normal;
  animation-fill-mode: forwards;
  animation-delay: 13s;*/
  border-radius: 10em;
  overflow: hidden;
}
@keyframes rotation {
  from {transform: rotate(0deg);}
  to {transform: rotate(360deg);}
}
@keyframes reverse_rotation {
  from {transform: rotate(0deg);}
  to {transform: rotate(-360deg);}
}
@keyframes rotation_color {
  0%  {transform: rotate(0deg) scale(0.9, .9); fill: rgb(255, 0 , 0);}
  16% {transform: rotate(60deg) scale(0.7, 0.7); fill: rgb(255, 127, 0);}
  33% {transform: rotate(120deg) scale(.5, .5); fill: rgb(255, 255, 0);}
  48% {transform: rotate(180deg) scale(.7, .7); fill: rgb(0, 255, 0);}
  66% {transform: rotate(240deg) scale(.9, .9); fill: rgb(0, 0, 255);}
  82% {transform: rotate(300deg) scale(1.1, 1.1); fill: rgb(0, 0, 255);}
  100%{transform: rotate(360deg) scale(.9, .9); fill: rgb(148, 0, 211);}
}
@keyframes reverse_rotation_color {
  0%  {transform: rotate(0deg) scale(0.8, 0.8); fill: rgb(255, 0 , 0);}
  16% {transform: rotate(-60deg) scale(0.7, 0.7); fill: rgb(255, 127, 0);}
  33% {transform: rotate(-120deg) scale(.5, .5); fill: rgb(255, 255, 0);}
  48% {transform: rotate(-180deg) scale(.7, .7); fill: rgb(0, 255, 0);}
  66% {transform: rotate(-240deg) scale(.9, .9); fill: rgb(0, 0, 255);}
  82% {transform: rotate(-300deg) scale(1.1, 1.1); fill: rgb(0, 0, 255);}
  100%{transform: rotate(-360deg) scale(.8, .8); fill: rgb(148, 0, 211);}
}

@keyframes z-axis-rotation {
  from {transform: rotateY(0deg) rotateZ(0deg);}
  to {transform: rotateY(360deg) rotateZ(360deg);}
}
#outer, #middle, #inner {
  transform-box: fill-box; /* Set the transform-box property to fill-box */
  transform-origin: center; /* Set the transform-origin property to center */
  animation: z-axis-rotation 2s infinite linear 7s; /* Removed 'normal' */
  animation-fill-mode: forwards;
  fill: rgba(0, 0, 0, 0.5);
}

#inner_middle, #middle_outer {
  transform-box: fill-box; /* Set the transform-box property to fill-box */
  transform-origin: center; /* Set the transform-origin property to center */
  animation: reverse_rotation 2s infinite linear 3s; /* Removed 'normal' */
  animation-fill-mode: forwards;
  fill: hsla(360, 100%, 100%, 0.5);
}

#outer:hover, #middle:hover, #inner:hover {
  animation-play-state: paused;
  animation-fill-mode: forwards;
}

#inner_middle:hover, #middle_outer:hover {
  animation-play-state: paused;
  animation-fill-mode: forwards;
}

#outer:active, #middle:active, #inner:active {
  animation: reverse_rotation_color 4s infinite linear normal;
}

#inner_middle:active, #middle_outer:active {
  animation: rotation_color 4s infinite linear normal;
}