const fireworks = document.getElementsByClassName("firework")
var counter = 0

for (let firework of fireworks){
var timeout = 2000 * counter
counter++
setTimeout(() => {
	setInterval(() => {
	firework.firstElementChild.src = "/i/firework-trail.webp"

	var xpos = Math.floor(Math.random() * 80) + 5
	var ypos = 95
	firework.style.top=ypos+"%"
	firework.style.left=xpos+"%"
	
	firework.style.display="inline-block"
	var hue = Math.floor(Math.random()*360)+1
	firework.style.filter="hue-rotate("+hue+"deg)"
	
	var id = null
	var height = Math.floor(Math.random()*60)+15   
	clearInterval(id);
	id = setInterval(frame, 20);
	
	var vnum = Math.floor(Math.random()*1000)
	
	function frame() {
		if (ypos <= height) {
		clearInterval(id);
		firework.firstElementChild.src = "/i/firework-explosion.webp?v="+vnum
		} else {
		ypos--; 
		firework.style.top=ypos+"%"
		}
	}		   
	}, 5000)
}, timeout)
}