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

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

.one {
  position: fixed;
  background: ;
  width: 0vw;
  height: 0vh;
  mix-blend-mode: ;
  border-bottom: calc(20vh + 1px) solid #0000ff;
  border-left: 20vw solid transparent;
  border-right: 20vw solid transparent;
  pointer-events: none;
  animation-name: one;
  animation-duration: 123333ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear; 
  transform-origin: center center;
}


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


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


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

.five {
  position: fixed;
  background: #22291a;
  width: 50vw;
  height: 50vh;
  mix-blend-mode: ;
  transform-origin: center;
  border: 0px dotted #76678f;
  border-radius: ; 
  pointer-events: none;
  animation-name: five;
  animation-duration: 91021ms;
  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: 0; 
  pointer-events: none;
  animation-name: six;
  animation-duration: 98050ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear; 
  transform-origin: center center;
}


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

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



@keyframes bg {
     
  0%   {background: #3a34eb;}
  25%   {background: #77ede3;}
  50%   {background: #a31f3c;}
  75%   {background: #7a7a74;}
  100%   {background: #3a34eb;}
}

@keyframes over {
  0%   {background: #3a34eb;}
  25%   {background: #77ede3;}
  50%   {background: #a31f3c;}
  75%   {background: #7a7a74;}
  100%   {background: #3a34eb;}
}

@keyframes one {
  0%   {border-bottom: calc(20vh + 1px) solid #3a34eb;}
  25%   {border-bottom: calc(20vh + 1px) solid #77ede3;}
  50%   {border-bottom: calc(20vh + 1px) solid #a31f3c;}
  75%   {border-bottom: calc(20vh + 1px) solid #7a7a74;}
  100%   {border-bottom: calc(20vh + 1px) solid #3a34eb;}
}


@keyframes two {
  0%   {background: #3a34eb;}
  25%   {background: #77ede3;}
  50%   {background: #a31f3c;}
  75%   {background: #7a7a74;}
  100%   {background: #3a34eb;} 
}

@keyframes three {
  0%   {background: #ff0000; height: 2vh;}
  25%   {background: #ff88ff; height: 20vh;}
  50%   {background: #37bfa6; height: 12vh;}
  75%   {background: #eca6f7; height: 20vh;}
  100%   {background: #ff0000; height: 2vh;} 
}

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

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

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

@keyframes seven {
     
  0%   {background: #fc6105;}
  25%   {background: #1decb2;}
  50%   {background: #3c9598;}
  75%   {background: #f558e8}
  100%   {background: #fc6105;} 
}

@keyframes eight {
  0%   {background: #fc6105; top: 30vh; left: 30vw; border-radius: 0px;}
  25%   {background: #1decb2; border-radius: 100px;}
  50%   {background: #3c9598; top: 60vh; left: 30vw; border-radius: 0px;}
  75%   {background: #f558e8; border-radius: 100px;}
  100%   {background: #fc6105; top: 30vh; left: 30vw; border-radius: 0px;} 
}