/* Essentially, this causes chaos within the site with visual effects */

.chaos-button {
  padding: 12px 20px;
  background: #222;
  color: #eee;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: bold;
  z-index: 9999;
  transition: background-color 0.3s ease;
}

.chaos-button:hover {
  background-color: #ff4d4d;
}

@keyframes chaos-animation {
  0% {
    filter: none;
    background-color: white;
    color: black;
    transform: none;
    opacity: 1;
    filter: grayscale(0%) brightness(100%) saturate(100%) blur(0px) invert(0%);
  }
  10% {
    filter: grayscale(100%) brightness(80%) saturate(200%) blur(2px) invert(10%);
    background-color: #ff0000;
    color: white;
    transform: rotate(15deg) scale(1.05);
    opacity: 0.9;
  }
  20% {
    filter: grayscale(50%) brightness(120%) saturate(50%) blur(5px) invert(40%);
    background-color: #00ff00;
    color: black;
    transform: rotate(-15deg) scale(0.95);
    opacity: 0.7;
  }
  30% {
    filter: grayscale(20%) brightness(150%) saturate(150%) blur(0px) invert(70%);
    background-color: #0000ff;
    color: white;
    transform: rotate(0deg) scale(1.2) translateX(10px);
    opacity: 0.8;
  }
  40% {
    filter: grayscale(100%) brightness(90%) saturate(300%) blur(10px)
      invert(30%);
    background-color: #ffff00;
    color: black;
    transform: rotate(25deg) scale(0.8) translateX(-20px);
    opacity: 0.5;
  }
  50% {
    filter: grayscale(0%) brightness(70%) saturate(100%) blur(0px) invert(0%);
    background-color: #ff00ff;
    color: white;
    transform: rotate(-25deg) scale(1.5) translateY(20px);
    opacity: 0.6;
  }
  60% {
    filter: grayscale(30%) brightness(110%) saturate(50%) blur(3px) invert(100%);
    background-color: #00ffff;
    color: black;
    transform: rotate(30deg) scale(1) translateY(-10px);
    opacity: 0.9;
  }
  70% {
    filter: grayscale(60%) brightness(130%) saturate(150%) blur(5px) invert(40%);
    background-color: #ffa500;
    color: white;
    transform: rotate(-30deg) scale(0.7) translateX(30px) translateY(15px);
    opacity: 0.7;
  }
  80% {
    filter: grayscale(90%) brightness(140%) saturate(250%) blur(8px) invert(80%);
    background-color: #800080;
    color: black;
    transform: rotate(45deg) scale(1.3) translateX(-40px) translateY(-20px);
    opacity: 0.8;
  }
  90% {
    filter: grayscale(20%) brightness(60%) saturate(100%) blur(2px) invert(20%);
    background-color: #008080;
    color: white;
    transform: rotate(-45deg) scale(0.5) translateX(50px) translateY(25px);
    opacity: 0.6;
  }
  100% {
    filter: none;
    background-color: white;
    color: black;
    transform: none;
    opacity: 1;
  }
}
/* no rotation
 */
@keyframes chaos-animation-norotation {
  0% {
    filter: none;
    background-color: white;
    color: black;
    transform: none;
    opacity: 1;
    filter: grayscale(0%) brightness(100%) saturate(100%) blur(0px) invert(0%);
  }
  10% {
    filter: grayscale(100%) brightness(80%) saturate(200%) blur(2px) invert(10%);
    background-color: #ff0000;
    color: white;
    transform: rotate(0deg) scale(1.05);
    opacity: 0.9;
  }
  20% {
    filter: grayscale(50%) brightness(120%) saturate(50%) blur(1px) invert(40%);
    background-color: #00ff00;
    color: black;
    transform: rotate(0deg) scale(0.95);
    opacity: 0.7;
  }
  30% {
    filter: grayscale(20%) brightness(150%) saturate(150%) blur(0px) invert(70%);
    background-color: #0000ff;
    color: white;
    transform: rotate(0deg) scale(1.2) translateX(10px);
    opacity: 0.8;
  }
  40% {
    filter: grayscale(100%) brightness(90%) saturate(300%) blur(0px) invert(30%);
    background-color: #ffff00;
    color: black;
    transform: rotate(-30deg) scale(0.8) translateX(-20px);
    opacity: 0.5;
  }
  50% {
    filter: grayscale(0%) brightness(70%) saturate(100%) blur(0px) invert(0%);
    background-color: #ff00ff;
    color: white;
    transform: rotate(0deg) scale(1.5) translateY(20px);
    opacity: 0.6;
  }
  60% {
    filter: grayscale(30%) brightness(110%) saturate(50%) blur(3px) invert(100%);
    background-color: #00ffff;
    color: black;
    transform: rotate(0deg) scale(1) translateY(-10px);
    opacity: 0.9;
  }
  70% {
    filter: grayscale(60%) brightness(130%) saturate(150%) blur(5px) invert(40%);
    background-color: #ffa500;
    color: white;
    transform: rotate(110deg) scale(0.7) translateX(30px) translateY(15px);
    opacity: 0.7;
  }
  80% {
    filter: grayscale(90%) brightness(140%) saturate(350%) contrast(150%)
      blur(8px) invert(80%);
    background-color: #800080;
    color: black;
    transform: rotate(-20deg) scale(1.2) translateX(-40px) translateY(-20px);
    opacity: 0.8;
  }
  90% {
    filter: grayscale(20%) brightness(60%) saturate(1000%) blur(3px) invert(20%);
    background-color: #008080;
    color: white;
    transform: rotate(0deg) scale(0.75) translateX(50px) translateY(25px);
    opacity: 0.6;
  }
  100% {
    filter: none;
    background-color: white;
    color: black;
    transform: none;
    opacity: 1;
  }
}

/* this is epic. */
.chaos-active {
  animation: chaos-animation-norotation 20s ease-in-out forwards;
}