body, html {
  margin: 0;
  background: #ffff22;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  animation-name: bg;
  animation-duration: 401006ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.over {
  margin: 0;
  position: fixed;
  background:;
  width: 50vw;
  height: 100vh;
  overflow: hidden;
  mix-blend-mode: ;
  border-radius: 0%;
  animation-name: bg;
  animation-duration: 401206ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.one {
  position: fixed;
  background: #22291a;
  width: 36vw;
  height: 50vh;
  mix-blend-mode: ;
  transform-origin: center;
  border: 0px dotted #76678f;
  border-radius: 0%; 
  pointer-events: none;
  animation-name: one;
  animation-duration: 60030ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear; 
  transform-origin: center center;
}


.two {
  position: ;
  background: #22291a;
  width: 100%;
  height: 100%;
  mix-blend-mode: exclusion;
  transform-origin: center;
  border: 0px dotted #76678f;
  border-radius: 100%; 
  pointer-events: none;
  animation-name: four;
  animation-duration: 10000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear; 
  transform-origin: center center;
}


.three {
  position: fixed;
  background: #22291a;
  width: 36vw;
  height: 50vh;
  mix-blend-mode: ;
  transform-origin: center;
  border: 0px dotted #76678f;
  border-radius: 0%; 
  pointer-events: none;
  animation-name: three;
  animation-duration: 60030ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear; 
  transform-origin: center center;
}
}

.four {
  position: fixed;
  background: #22291a;
  width: 10vw;
  height: 10vh;
  mix-blend-mode: ;
  transform-origin: center;
  border: 0px dotted #76678f;
  border-radius: 0; 
  pointer-events: none;
  animation-name: four;
  animation-duration: 111021ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear; 
  transform-origin: center center;
}

.five {
  position: fixed;
  background: #22291a;
  width: 25vw;
  height: 50vh;
  mix-blend-mode: exclusion;
  transform-origin: center;
  border: 0px dotted #76678f;
  border-radius: 0; 
  pointer-events: none;
  animation-name: two;
  animation-duration: 111021ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear; 
  transform-origin: center center;
}


.six {
  position: fixed;
  background: #22291a;
  width: 40vw;
  height: 40vh;
  mix-blend-mode: lighten;
  transform-origin: center;
  border: 0px dotted #76678f;
  border-radius: 100%; 
  pointer-events: none;
  animation-name: three;
  animation-duration: 18050ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear; 
  transform-origin: center center;
}


.seven {
  position: fixed;
  background: #df4d30;
  height: 100vh;
  width: 2vw;
  border-radius: 0%;
  mix-blend-mode: ;
  animation-name: seven;
  animation-duration: 20992ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear; 
  transform-origin: center center;
}

.eight {
  position: fixed;
  background: #df4d30;
  height: 50vh;
  width: 100vw;
  border-radius: 0%;
  mix-blend-mode: screen;
  animation-name: eight;
  animation-duration: 101937ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear; 
  transform-origin: top center;
}



@keyframes bg {
     
  0%   {background: #ba95bf; }
  25%   {background: #e3be29; }
  50%   {background: #d4ff26;}
  75%   {background: #637568; }
  100%   {background: #ba95bf;} 
}

@keyframes over {
  0%   {background: #7e6f5f; opacity: 0;}
  33%   {background: #1d1002;}
  60%   {background: #5f4328; opacity: 1;}
  100%   {background: #7e6f5f; opacity: 0;} 
}

@keyframes one {
  0%   {background: #7a9e89; height: 50vh;}
  25%   {background: #7aaacf; height: 10vh;}
  50%   {background: #37bfa6;}
  75%   {background: #ccb543; height: 90vh;}
  100%   {background: #7a9e89;   height: 50vh;} 
}


@keyframes two {
  0%   {background: #db5886;}
  25%   {background: #ccb543;}
  50%   {background: #37bfa6;}
  75%   {background: #73608f;}
  100%   {background: #db5886;} 
}

@keyframes three {
  0%   {background: #ccb543; height: 50vh;}
  25%   {background: #aaaacf; height: 90vh;}
  50%   {background: #37bfa6;}
  75%   {background: #fc6603; height: 10vh;}
  100%   {background: #ccb543;   height: 50vh;} 
}

@keyframes four {
  0%   {background: #665b11;}
  50%   {background: #99a8be;}
  70%   {background: #323261;}
  100%   {background: #665b11;}
}

@keyframes five {
  0%   {background: #fc6105; opacity: 0;}
  50%   {background: #1decb2;}
  70%   {background: #3c9598; opacity: 1;}
  90%   {background: #f558e8;}
  100%   {background: #fc6105; opacity: 0;} 
}

@keyframes six {
  0%   {background: #d3bd58;}
  50%   {background: #aaa8be;}
  70%   {background: #f55b11;}
  100%   {background: #d3bd58;} 
}

@keyframes seven {
     
  0%   {background: #fc6105; mix-blend-mode: normal;}
  50%   {background: #1decb2; mix-blend-mode: luminosity;}
  70%   {background: #3c9598; mix-blend-mode: exclusion;}
  90%   {background: #f558e8; mix-blend-mode: hue;}
  100%   {background: #fc6105; mix-blend-mode: darken;} 
}

@keyframes eight {
     
  0%   {background: #fc6105; transform: scaleY(1); opacity: 1;}
  50%   {background: #1decb2; transform: scaleY(.5); opacity: 0;}
  70%   {background: #3c9598; transform: scaleY(1); opacity: 1;}
  90%   {background: #f558e8; transform: scaleY(1.5);opacity: 0;}
  100%   {background: #fc6105; transform: scaleY(1); opacity: 1;} 
}