.waveform {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 60px;
    gap: 4px;
}
.waveform > div { 
    background-color: #A154F2;border-radius: 9999px;
    width: 5px;
    animation: wave 1.2s ease-in-out infinite;
}
@keyframes wave {
    0%, 100% { transform: scaleY(0.2); }
    50% { transform: scaleY(1); }
}
.waveform > div:nth-child(1) { animation-delay: 0s; height: 35%; }
.waveform > div:nth-child(2) { animation-delay: 0.1s; height: 60%; }
.waveform > div:nth-child(3) { animation-delay: 0.2s; height: 80%; }
.waveform > div:nth-child(4) { animation-delay: 0.3s; height: 45%; }
.waveform > div:nth-child(5) { animation-delay: 0.4s; height: 65%; }
.waveform > div:nth-child(6) { animation-delay: 0.5s; height: 95%; }
.waveform > div:nth-child(7) { animation-delay: 0.6s; height: 75%; }
.waveform > div:nth-child(8) { animation-delay: 0.7s; height: 50%; }
.waveform > div:nth-child(9) { animation-delay: 0.8s; height: 30%; }
.waveform > div:nth-child(10) { animation-delay: 0.9s; height: 55%; }
.waveform > div:nth-child(11) { animation-delay: 1.0s; height: 70%; }
.waveform > div:nth-child(12) { animation-delay: 1.1s; height: 40%; }

.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 300,
  'GRAD' 0,
  'opsz' 24
}