style.scss

.rainbow { 
  background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
  background-size: 1800% 1800%;

  -webkit-animation: rainbow 18s ease infinite;
  -z-animation: rainbow 18s ease infinite;
  -o-animation: rainbow 18s ease infinite;
  animation: rainbow 18s ease infinite;
}

@-webkit-keyframes rainbow {
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}
@-moz-keyframes rainbow {
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}
@-o-keyframes rainbow {
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}
@keyframes rainbow { 
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}

.auditory-fade-out {
    opacity: 1;
    animation: fadeOut 0.2s forwards;
}

.auditory-fade-in {
    animation: fadeIn 0.2s forwards;
}

@keyframes fadeOut {
    to {
      opacity: 0;
    }
  }
  
  @keyframes fadeIn {
    to {
      opacity: 1;
    }
  }

.rumble {
    animation: shake 0.1s cubic-bezier(.36,.07,.19,.97) both;
    animation-iteration-count: infinite;
}

.bigrumble {
    animation: bigshake 0.34s cubic-bezier(.36,.07,.19,.97) both;
    animation-iteration-count: infinite;
}

.auditory-center {
    transition: all 0.1s;
    left: 42%;
    position: absolute;
}

.auditory-normal {
    left: 0%;
}

.auditory-avatar-wrapper {
    transition: all 0.1s;
}

.auditory-background {
    overflow: hidden;
}

@keyframes shake {
10%, 90% {
    transform: translate3d(-5px, -1px, 0);
}

20%, 80% {
    transform: translate3d(4px, 0.5px, 0);
}

30%, 50%, 70% {
    transform: translate3d(-6px, 1px, 0);
}

40%, 60% {
    transform: translate3d(6px, -0.6px, 0);
}
}

@keyframes bigshake {
10%, 90% {
    transform: translate3d(-14px, -2px, 0);
}

20%, 80% {
    transform: translate3d(13px, 1px, 0);
}

30%, 50%, 70% {
    transform: translate3d(-14px, 4px, 0);
}

40%, 60% {
    transform: translate3d(13px, -5px, 0);
}
}