so i coded an animated rainbow equalizer for my layout and was thinking of sharing it as a profile element. i took what i thought was all the relevant code and tested it on a blank layout with no other code and it doesn't work? it still works just fine on my layout so i figure i'm missing something but am not sure what. i'm very new to css so sorry if it's an obvious mistake ^_^; here's the code if anyone could tell me why it's not working. thanks
<style>
.pp-equalizer {
display: none;
color: currentcolor !important;
animation: rainbow 6s linear infinite !important;
align-items: flex-end;
gap: 2px;
height: 14px;
margin-right: 6px;
}
.profile-playlist-widget li.current .pp-equalizer {
display: flex !important;
}
.pp-equalizer span { color:currentcolor !important;
animation: rainbow 6s linear infinite, ppEqualizer 0.8s ease-in-out infinite !important;
}
.pp-equalizer span:nth-child(1) {
height: 60%; animation-delay: 0s !important; }
.pp-equalizer span:nth-child(2) {
height: 100%; animation-delay: 0.2s !important; }
.pp-equalizer span:nth-child(3) {
height: 40%; animation-delay: 0.4s !important; }
.pp-equalizer span:nth-child(4) { height: 80%; animation-delay: 0.1s !important; }
@keyframes ppEqualizer {
0%, 100% { transform: scaleY(0.3); }
50% { transform: scaleY(1); }
}
</style>