body {
  background-color: #000;
  color: #0ff;
  font-family: 'Courier New', monospace;
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.card.bg-gradient {
  background: linear-gradient(to bottom right, #111, #222, #000);
  border: 2px solid purple;
  box-shadow: 0 0 10px #font-family: Capitals,Impact,fantasy;;
}

.visualizer-bars div {
  width: 6px;
  background: hotpink;
  height: 20px;
  animation: bounce 1s infinite ease-in-out;
  animation-direction: reverse;
  box-shadow: 0 0 5px purple;
  border-radius: 3px;
}

.visualizer-bars div:nth-child(2) { animation-delay: .9s; }
.visualizer-bars div:nth-child(3) { animation-delay: .8s; }
.visualizer-bars div:nth-child(4) { animation-delay: .7s; }
.visualizer-bars div:nth-child(5) { animation-delay: .6s; }
.visualizer-bars div:nth-child(6) { animation-delay: .5s; }
.visualizer-bars div:nth-child(7) { animation-delay: .4s; }

@keyframes bounce {
  0%, 100% { height: 20px; }
  50% { height: 60px; }
}