/* C */
#chaotic_C {
  height: 100%;
  width: 100%;
  margin: 0 auto;
  animation-name: left-right;
  animation-duration: 2s; 
  animation-timing-function: ease-in-out; 
  animation-delay: 0s;
  animation-direction: alternate;
  animation-iteration-count: 1;
  animation-fill-mode: none;
  animation-play-state: running;
}

@keyframes left-right {
  0% {
    transform: translate(-100px, 110px);
  }
  50% {
    transform: translate(50px, 0);
  }
  
  55% {
    transform: translate(30px, 0);
  }
  60% {
    transform: translate(40px, 0);
  }
  65% {
    transform: translate(10px, 0);
  }
  80% {
    transform: translate(50px, 0);
  }
  100%{
    transform: translate(0,0);
  }
}

path#chaotic_Cfill{
  fill:#000;
 animation-name: fillC;
    animation-duration: 5s; 
    animation-timing-function: ease-in-out; 
    animation-delay: 3s;
    animation-iteration-count: infinite;
    animation-fill-mode: none;
    animation-play-state: running;
}

@keyframes fillC{
  0%{
    fill:#000;
  }
  4%{
    fill:#000;
  }
  5% {
    fill:#db8a1c;
  }
  6% {
    fill:#db8a1c;
  }
  45% {
    fill:#db8a1c;
  }
  46% {
    fill:#000;
  }
  47% {
    fill:#000;
  }
  100% {
    fill:#000;
  }
}

.chaotic_Cbackground{
  background-color:#ed0833;
  animation-name: background-red;
    animation-duration: 10s; 
    animation-timing-function: ease-in-out; 
    animation-delay: 3s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-fill-mode: none;
    animation-play-state: running;
}

@keyframes background-red{
  0% {
    background-color:#000;
  }
  1% {
    background-color:#000;
  }
  38% {
    background-color:#000;
  }
  39% {
    background-color:#ed0833;
  }
  40% {
    background-color:#ed0833;
  }
  100% {
    background-color:#ed0833;
  }
}

/* H */
#chaotic_H {
  height: 100%;
  width: 100%;
  margin: 0 auto;
  animation-name: shakeShake;
  animation-duration: 0.5s; 
  animation-timing-function: ease-in-out; 
  animation-delay: 0s;
  animation-direction: alternate;
  animation-iteration-count: 1.5;
  animation-fill-mode: none;
  animation-play-state: running;
  border:0px;
}

@keyframes shakeShake {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(30px, 0);
  }
  
  55% {
    transform: translate(10px, 0);
  }
  60% {
    transform: translate(15px, 0);
  }
  65% {
    transform: translate(10px, 0);
  }
  80% {
    transform: translate(20px, 0);
  }
  95% {
    transform: translate(10px, 0);
  }

  100%{
    transform: translate(0,0);
  }
}

polygon#chaotic_Hfill{
  fill:#db8a1c;
 animation-name: fillH;
    animation-duration: 4s; 
    animation-timing-function: ease-in-out; 
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-fill-mode: none;
    animation-play-state: running;
}

@keyframes fillH{
  0%{
    fill:#db8a1c;
  }
  30%{
    fill:#db8a1c;
  }
  31% {
    fill:#301fd9;
  }
  86% {
    fill:#301fd9;
  }
  100% {
    fill:#301fd9;
  }
}

/* A */
#chaotic_A {
  height: 100%;
  width: 100%;
  margin: 0 auto;
  animation-name: shakeShake2;
  animation-duration: 0.25s; 
  animation-timing-function: ease-in-out; 
  animation-delay: 0s;
  animation-direction: alternate;
  animation-iteration-count: 1.75;
  animation-fill-mode: none;
  animation-play-state: running;
  transform: translate(-5px, -5px);
}

@keyframes shakeShake2 {
  0% {
    transform: translate(-5px, -5px);
  }
  50% {
    transform: translate(0, 25px);
  }
  
  55% {
    transform: translate(0, -5px);
  }
  60% {
    transform: translate(0, 0);
  }
  65% {
    transform: translate(0, 30px);
  }
  80% {
    transform: translate(0, 35px);
  }
  95% {
    transform: translate(0, 10px);
  }

  100%{
    transform: translate(0,0);
  }
}

path#chaotic_Afill{
  fill:#db8a1c;
 animation-name: fillA;
    animation-duration: 4s; 
    animation-timing-function: ease-in-out; 
    animation-delay: 0.75s;
    animation-iteration-count: infinite;
    animation-fill-mode: none;
    animation-play-state: running;
}

@keyframes fillA{
  0%{
    fill:#d4179e;
  }
  30%{
    fill:#d4179e;
  }
  31% {
    fill:#000;
  }
  86% {
    fill:#000;
  }
  100% {
    fill:#000;
  }
}

.chaotic_Abackground{
  background-color:black;
  animation-name: backgroundBlink;
    animation-duration: 10s; 
    animation-timing-function: ease-in-out; 
    animation-delay: 3s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-fill-mode: none;
    animation-play-state: running;
}

@keyframes backgroundBlink{
  0% {
    background-color:#ed0833;
  }
  1% {
    background-color:#ed0833;
  }
  38% {
    background-color:#ed0833;
  }
  39% {
    background-color:#000;
  }
  40% {
    background-color:#000;
  }
  74% {
    background-color:#000;
  }
  75% {
    background-color:#301fd9;
  }
  76% {
    background-color:#301fd9;
  }
  100% {
    background-color:#301fd9;
  }
}


/* O */
#chaotic_O {
  height: 100%;
  width: 100%;
  margin: 0 auto;
  animation-name: stretch;
  animation-duration: 1s; 
  animation-timing-function: ease-in-out; 
  animation-delay: 0.25s;
  animation-direction: alternate;
  animation-iteration-count: 1;
  animation-fill-mode: none;
  animation-play-state: running;
}

@keyframes stretch {
  0% {
    transform: scale(2);
    border-radius: 100%;
  }
  65% {
  	transform: scale(.3);
  }
  70% {
    animation-delay: 0.5s;
  }
  75% {
  	transform: scale(2);
  }
  80% {
    transform: scale(.5);
  }
  95% {
  	transform: scale(2);
  }
  100% {
    transform: scale(.5);
  }
}

.chaotic_Obackground{
	background-color:black;
	animation-name: background-black;
  	animation-duration: 10s; 
  	animation-timing-function: ease-in-out; 
  	animation-delay: 3s;
  	animation-direction: alternate;
  	animation-iteration-count: infinite;
  	animation-fill-mode: none;
  	animation-play-state: running;
}

@keyframes background-black{
  0% {
    background-color:#ed0833;
  }
  1% {
    background-color:#ed0833;
  }
  38% {
    background-color:#ed0833;
  }
  39% {
    background-color:#000;
  }
  40% {
    background-color:#000;
  }
  74% {
    background-color:#000;
  }
  75% {
  	background-color:#301fd9;
  }
  76% {
  	background-color:#301fd9;
  }
  100% {
  	background-color:#301fd9;
  }
}


/* T */
#chaotic_T {
  height: 100%;
  width: 100%;
  margin: 0 auto;
  animation-name: left;
  animation-duration: 1s; 
  animation-timing-function: ease-in-out; 
  animation-delay: 0;
  animation-direction: alternate;
  animation-iteration-count: 1;
  animation-fill-mode: none;
  animation-play-state: running;
  transform: translate(5px,0);
}

@keyframes left {
  0% {
    transform: translate(-100px, 0);
  }
  100%{
    transform: translate(5px,0);
  }
}

.chaotic_Tbackground{
  background-color:#db8a1c;
  animation-name: background-black;
    animation-duration: 5s; 
    animation-timing-function: ease-in-out; 
    animation-delay: 2s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-fill-mode: none;
    animation-play-state: running;
}

@keyframes background-black{
  0% {
    background-color:#ed0833;
  }
  1% {
    background-color:#ed0833;
  }
  38% {
    background-color:#ed0833;
  }
  39% {
    background-color:#000;
  }
  76% {
    background-color:#000;
  }
  100% {
    background-color:#000;
  }
}

path#chaotic_Tfill{
  fill:#000;
 animation-name: fillT;
    animation-duration: 5s; 
    animation-timing-function: ease-in-out; 
    animation-delay: 1.25s;
    animation-iteration-count: infinite;
    animation-fill-mode: none;
    animation-play-state: running;
}

@keyframes fillT{
  0%{
    fill:#ed0833;
  }
  30%{
    fill:#ed0833;
  }
  31% {
    fill:#db8a1c;
  }
  86% {
    fill:#db8a1c;
  }
  100% {
    fill:#db8a1c;
  }
}

/* I */
#chaotic_I {
  height: 100%;
  width: 100%;
}

g#chaotic_I rect{
  fill:#ed0833;
 animation-name: fillI;
    animation-duration: 0.1s; 
    animation-timing-function: ease-in-out; 
    animation-delay: 0s;
    animation-iteration-count: 8;
    animation-fill-mode: none;
    animation-play-state: running;
}

@keyframes fillI{
  0%{
    fill:#ed0833;
  }
  30%{
    fill:#ed0833;
  }
  31% {
    fill:#db8a1c;
  }
  86% {
    fill:#db8a1c;
  }
  100% {
    fill:#db8a1c;
  }
}

.chaotic_Ibackground{
  background-color:#000;
  animation-name: blinkBlinkBlink;
    animation-duration: 5s; 
    animation-timing-function: ease-in-out; 
    animation-delay: 0s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-fill-mode: none;
    animation-play-state: running;
}

@keyframes blinkBlinkBlink{
  0% {
    background-color:#000;
  }
  1% {
    background-color:#000;
  }
  38% {
    background-color:#000;
  }
  39% {
    background-color:#d4179e;
  }
  76% {
    background-color:#d4179e;
  }
  100% {
    background-color:#d4179e;
  }
}

g#chaotic_Ifill rect{
  fill:#ed0833;
 animation-name: fillI;
    animation-duration: 0.25s; 
    animation-timing-function: ease-in-out; 
    animation-delay: 0s;
    animation-iteration-count: 4;
    animation-fill-mode: none;
    animation-play-state: running;
    transform: translate(0, 0);
}

@keyframes fillI{
  0%{
    fill:#ed0833;
    transform: translate(-5px, -5px);
  }
  30%{
    fill:#ed0833;
    transform: translate(0, 0);
  }
  31% {
    fill:#db8a1c;
    transform: translate(5px, 5px);
  }
  86% {
    fill:#db8a1c;
    transform: translate(0, 0);
  }
  100% {
    fill:#db8a1c;
    transform: translate(-5px, -5px);
  }
}


/* C2 */
#chaotic_C2 {
  height: 100%;
  width: 100%;
  margin: 0 auto;
  animation-name: shakeShake;
  animation-duration: 0.5s; 
  animation-timing-function: ease-in-out; 
  animation-delay: 0s;
  animation-direction: alternate;
  animation-iteration-count: 1.5;
  animation-fill-mode: none;
  animation-play-state: running;
  border:0px;
}

path#chaotic_C2fill{
  fill:#db8a1c;
 animation-name: fillC2;
    animation-duration: 4s; 
    animation-timing-function: ease-in-out; 
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-fill-mode: none;
    animation-play-state: running;
}

@keyframes fillC2{
  0%{
    fill:#db8a1c;
  }
  30%{
    fill:#db8a1c;
  }
  31% {
    fill:#ed0833;
  }
  86% {
    fill:#ed0833;
  }
  100% {
    fill:#ed0833;
  }
}

.chaotic_C2background{
  background-color:#000;
  animation-name: C2;
    animation-duration: 4s; 
    animation-timing-function: ease-in-out; 
    animation-delay: 0s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-fill-mode: none;
    animation-play-state: running;
}

@keyframes C2{
  0% {
    background-color:#000;
  }
  1% {
    background-color:#000;
  }
  38% {
    background-color:#000;
  }
  39% {
    background-color:#301fd9;
  }
  76% {
    background-color:#301fd9;
  }
  100% {
    background-color:#301fd9;
  }
}


/* R */
#rhythms_R {
  height: 100%;
  width: 100%;
  margin: 0 auto;
  animation-name: leftR;
  animation-duration: 0.75s; 
  animation-timing-function: ease-in-out; 
  animation-delay: 0;
  animation-direction: alternate;
  animation-iteration-count: 1;
  animation-fill-mode: none;
  animation-play-state: running;
}

@keyframes leftR {
  0% {
    transform: translate(-100px, 110px);
  }
  50% {
    transform: translate(50px, 0);
  }
  
  55% {
    transform: translate(30px, 0);
  }
  80% {
    transform: translate(50px, 0);
  }
  100%{
    transform: translate(0,0);
  }
}

.rhythms_Rbackground{
  background-color:#db8a1c;
  animation-name: backgroundR;
    animation-duration: 5s; 
    animation-timing-function: ease-in-out; 
    animation-delay: 2s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-fill-mode: none;
    animation-play-state: running;
}

@keyframes backgroundR{
  0% {
    background-color:#ed0833;
  }
  1% {
    background-color:#ed0833;
  }
  38% {
    background-color:#ed0833;
  }
  39% {
    background-color:#000;
  }
  76% {
    background-color:#000;
  }
  100% {
    background-color:#000;
  }
}

path#rhythms_Rfill{
  fill:#ed0833;
 animation-name: fillR;
    animation-duration: 8s; 
    animation-timing-function: ease-in-out; 
    animation-delay: 1.5s;
    animation-iteration-count: infinite;
    animation-fill-mode: none;
    animation-play-state: running;
}

@keyframes fillR{
  0%{
    fill:#ed0833;
  }
  30%{
    fill:#ed0833;
  }
  31% {
    fill:#301fd9;
  }
  86% {
    fill:#301fd9;
  }
  100% {
    fill:#301fd9;
  }
}

/* H2 */
#rhythms_H2 {
  height: 100%;
  width: 100%;
  margin: 0 auto;
  animation-name: leftH2;
  animation-duration: 0.5s; 
  animation-timing-function: ease-in-out; 
  animation-delay: 0;
  animation-direction: alternate;
  animation-iteration-count: 2;
  animation-fill-mode: none;
  animation-play-state: running;
  transform: translate(0,0);
}

@keyframes leftH2 {
  0% {
    transform: translate(-100px, 0);
  }
  40%{
    transform: translate(0,0);
  }
  45% {
    transform: translate(60px, 0);
  }
  100%{
    transform: translate(0,0);
  }
}

.rhythms_H2background{
  background-color:#000;
  animation-name: blinkBlinkBlink;
    animation-duration: 4s; 
    animation-timing-function: ease-in-out; 
    animation-delay: 2s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-fill-mode: none;
    animation-play-state: running;
}

polygon#rhythms_H2fill{
  fill:#ed0833;
 animation-name: fillH2;
    animation-duration: 5s; 
    animation-timing-function: ease-in-out; 
    animation-delay: 3s;
    animation-iteration-count: infinite;
    animation-fill-mode: none;
    animation-play-state: running;
    transform: translate(0, 0);
}

@keyframes fillH2{
  0%{
    fill:#ed0833;
  }
  30%{
    fill:#ed0833;
  }
  31% {
    fill:#db8a1c;
  }
  86% {
    fill:#db8a1c;
  }
  100% {
    fill:#db8a1c;
  }
}

/* Y */
#rhythms_Y {
  height: 100%;
  width: 100%;
  margin: 0 auto;
  animation-name: stretch2;
  animation-duration: 1s; 
  animation-timing-function: ease-in-out; 
  animation-delay: 0.25s;
  animation-direction: alternate;
  animation-iteration-count: 1;
  animation-fill-mode: none;
  animation-play-state: running;
}

@keyframes stretch2 {
  0% {
    transform: scale(2);
    border-radius: 100%;
  }
  65% {
    transform: scale(.3);
  }
  70% {
    animation-delay: 0.5s;
  }
  75% {
    transform: scale(2);
  }
  80% {
    transform: scale(.5);
  }
  95% {
    transform: scale(2);
  }
  100% {
    transform: scale(.5);
  }
}

.rhythms_Ybackground{
  background-color:#d4179e;
  animation-name: backgroundY;
    animation-duration: 5s; 
    animation-timing-function: ease-in-out; 
    animation-delay: 3s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-fill-mode: none;
    animation-play-state: running;
}

@keyframes backgroundY{
  0% {
    background-color:#ed0833;
  }
  1% {
    background-color:#ed0833;
  }
  38% {
    background-color:#ed0833;
  }
  39% {
    background-color:#db8a1c;
  }
  40% {
    background-color:#db8a1c;
  }
  74% {
    background-color:#db8a1c;
  }
  75% {
    background-color:#301fd9;
  }
  76% {
    background-color:#301fd9;
  }
  100% {
    background-color:#301fd9;
  }
}

/* T2 */
#rhythms_T {
  height: 100%;
  width: 100%;
  margin: 0 auto;
  animation-name: leftT;
  animation-duration: 1s; 
  animation-timing-function: ease-in-out; 
  animation-delay: 0;
  animation-direction: alternate;
  animation-iteration-count: 1;
  animation-fill-mode: none;
  animation-play-state: running;
  transform: translate(5px,0);
}

@keyframes leftT {
  0% {
    transform: translate(-100px, 0);
  }
  100%{
    transform: translate(5px,0);
  }
}

.rhythms_Tbackground{
  background-color:#db8a1c;
  animation-name: backgroundT2;
    animation-duration: 5s; 
    animation-timing-function: ease-in-out; 
    animation-delay: 2s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-fill-mode: none;
    animation-play-state: running;
}

@keyframes backgroundT2{
  0% {
    background-color:#ed0833;
  }
  1% {
    background-color:#ed0833;
  }
  38% {
    background-color:#ed0833;
  }
  39% {
    background-color:#000;
  }
  76% {
    background-color:#000;
  }
  100% {
    background-color:#000;
  }
}

path#rhythms_Tfill{
  fill:#000;
 animation-name: fillT2;
    animation-duration: 7s; 
    animation-timing-function: ease-in-out; 
    animation-delay: 1s;
    animation-iteration-count: infinite;
    animation-fill-mode: none;
    animation-play-state: running;
}

@keyframes fillT2{
  0%{
    fill:#d4179e;
  }
  30%{
    fill:#d4179e;
  }
  31% {
    fill:#db8a1c;
  }
  86% {
    fill:#db8a1c;
  }
  100% {
    fill:#db8a1c;
  }
}


/* H3 See H above */

polygon#chaotic_H3fill{
  fill:#301fd9;
 animation-name: fillH3;
    animation-duration: 4s; 
    animation-timing-function: ease-in-out; 
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-fill-mode: none;
    animation-play-state: running;
}

@keyframes fillH3{
  0%{
    fill:#301fd9;
  }
  30%{
    fill:#301fd9;
  }
  31% {
    fill:#ed0833;
  }
  86% {
    fill:#ed0833;
  }
  100% {
    fill:#ed0833;
  }
}

/* M */
#rhythms_M {
  height: 100%;
  width: 100%;
  margin: 0 auto;
  animation-name: shakeShake2;
  animation-duration: 0.25s; 
  animation-timing-function: ease-in-out; 
  animation-delay: 0s;
  animation-direction: alternate;
  animation-iteration-count: 1.75;
  animation-fill-mode: none;
  animation-play-state: running;
  transform: translate(-1px, -1px);
}

path#rhythms_Mfill{
  fill:#db8a1c;
 animation-name: fillM;
    animation-duration: 4s; 
    animation-timing-function: ease-in-out; 
    animation-delay: 0.75s;
    animation-iteration-count: infinite;
    animation-fill-mode: none;
    animation-play-state: running;
}

@keyframes fillM{
  0%{
    fill:#db8a1c;
  }
  30%{
    fill:#db8a1c;
  }
  31% {
    fill:#000;
  }
  86% {
    fill:#000;
  }
  100% {
    fill:#000;
  }
}

/* S */
#rhythms_S {
  height: 100%;
  width: 100%;
  margin: 0 auto;
  animation-name: stretch;
  animation-duration: 0.5s; 
  animation-timing-function: ease-in-out; 
  animation-delay: 0.25s;
  animation-direction: alternate;
  animation-iteration-count: 1;
  animation-fill-mode: none;
  animation-play-state: running;
}

.rhythm_Sbackground{
  background-color:black;
  animation-name: backgroundS;
    animation-duration: 4s; 
    animation-timing-function: ease-in-out; 
    animation-delay: 3s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-fill-mode: none;
    animation-play-state: running;
}

@keyframes backgroundS{
  0% {
    background-color:#ed0833;
  }
  1% {
    background-color:#ed0833;
  }
  38% {
    background-color:#ed0833;
  }
  39% {
    background-color:#301fd9;
  }
  99% {
    background-color:#301fd9;
  }
  100% {
    background-color:#301fd9;
  }
}

path#rhythms_Sfill{
  fill:#db8a1c;
 animation-name: fillS;
    animation-duration: 6s; 
    animation-timing-function: ease-in-out; 
    animation-delay: 0.75s;
    animation-iteration-count: infinite;
    animation-fill-mode: none;
    animation-play-state: running;
}

@keyframes fillS{
  0%{
    fill:#db8a1c;
  }
  30%{
    fill:#db8a1c;
  }
  31% {
    fill:#000;
  }
  86% {
    fill:#000;
  }
  100% {
    fill:#000;
  }
}