<div id="stage">
  <div class="container">
    <div class="american-flag"></div>
    <div class="btn-container">
      <input type="button" class="btn" id="btn" value="Happy Birthday, America!!!" onclick="play(), btnHide()">
      <audio id="audio" src="http://lcweb2.loc.gov/natlib/ihas/service/ssbanner/100010509/100010509.mp3"></audio>
    </div>
  </div>
</div>
<!--
Built By Vet
  Bryant Caruthers 
-->

html, body {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100vh;
  margin: 0;
  padding: 0;
  width: 100vw;
  font-size: 1.5vmin;
}

.container {
  display: flex;
  height: 100vh;
  width: 100vw;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.american-flag {
  height: 26rem;
  width: 53rem;
  background-color: #B31C31;
  font-size: 1rem;
}

.american-flag::before {
  content: '';
  height: 2rem;
  margin-top: 2rem;
  width: 53rem;
  display: inline-block;
  background-color: #fff;
  box-shadow: 0 4rem 0 white,
              0 8rem 0 white,
              0 12rem 0 white,
              0 16rem 0 white,
              0 20rem 0 white;
}

.american-flag::after {
  align-items: center;
  content: '★ ★ ★ ★ ★ ★ \00a0\200a ★ ★ ★ ★ ★ \00a0\200b ★ ★ ★ ★ ★ ★ \00a0\200a ★ ★ ★ ★ ★ \00a0\200b ★ ★ ★ ★ ★ ★ \00a0\200a ★ ★ ★ ★ ★ \00a0\200b ★ ★ ★ ★ ★ ★ \00a0\200a ★ ★ ★ ★ ★ \00a0\200b ★ ★ ★ ★ ★ ★';
  display: flex;
  justify-content: center;
  position: relative;
  height: 14.1rem;
  margin-top: -4.3rem;
  width: 20.75rem;
  background: #39386E;
  color: #fff;
  font-size: 2rem;
  letter-spacing: .5rem;
  line-height: 1.55rem;
  text-align: center;
}

.btn-container {
  position: relative;
  text-align: center;
}

.btn {
  height: 4rem;
  width: 30rem;
  background: #fff;
  border: #B31C31 solid 0.125rem;
  border-radius: 0.625rem;
  color: #39386E;
  font-size: 2rem;
  font-weight: bold;
  cursor: pointer;
  margin-top: 3rem;
}

.btn:hover {opacity: 0.6}

/* Fireworks */
@-webkit-keyframes explosion {
  from {
    width: 0;
    opacity: 0;
  }
  33% {
    width: 0px;
    opacity: 0;
  }
  34% {
    width: 0.625rem;
    opacity: 1.0;
  }
  40% {
    width: 5rem;
    opacity: 1.0;
  }
  to {
    width: 5.625rem;
    opacity: 0;
  }
}

@-moz-keyframes explosion {
  from {
    width: 0;
    opacity: 0;
  }
  33% {
    width: 0;
    opacity: 0;
  }
  34% {
    width: 0.625rem;
    opacity: 1.0;
  }
  40% {
    width: 5rem;
    opacity: 1.0;
  }
  to {
    width: 5.625rem;
    opacity: 0;
  }
}

#stage {
  position: relative;
  height: 100vh;
  width: 100vw;
  background-color: #000028;
}

.launcher {
  position: absolute;
  -webkit-animation-duration: 4s;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-duration: 4s;
  -moz-animation-iteration-count: infinite;
  background: #fff;
  border-bottom: 0.1875rem solid yellow;
}

.launcher div {
  position: absolute;
  opacity: 0;
  left: 0.1875rem;
  top: 0.1875rem;
  width: 0.625rem;
  height: 0.25rem;
  border-right: 0.25rem solid yellow;
  border-radius: 0.125rem;
  -webkit-animation-name: explosion;
  -webkit-animation-duration: 4s;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-name: explosion;
  -moz-animation-duration: 4s;
  -moz-animation-iteration-count: infinite;
  -webkit-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
}

@media(max-width: 500px) {
  .container {
    max-width: 80vw;
    max-height: 100vh;
    margin: 0 auto;
  }
}

function play(){
       var audio = document.getElementById("audio");
       audio.play();
      };
// runit();

document.getElementById("btn").addEventListener("click", function(){
  
    // Fireworzks
document.addEventListener("click", function() {
  var num_launchers = 12;
  var num_flares = 20;
  var flare_colours = ['#f22613', '#ffffff', '#22a7f0', '#00b5cc', '#f3f1ef', '#d91e18'];
  var cssIdx = document.styleSheets.length - 1;

  function myRandom(from, to)
  {
    return from + Math.floor(Math.random() * (to-from));
  }

  var keyframes_template = "from { left: LEFTFROM%; top: 380px; width: 6px; height: 12px; }\n"
      + "33% { left: LEFTTOP%; top: TOPTOPpx; width: 0; height: 0; }\n"
      + " to { left: LEFTEND%; top: BOTBOTpx; width: 0; height: 0; }";

  for(var i=0; i < num_launchers; i++) {
    leftfrom = myRandom(15, 85);
    lefttop = myRandom(30, 70);
    toptop = myRandom(20, 200);
    leftend = lefttop + (lefttop-leftfrom)/2;
    botbot = toptop + 100;

    csscode = keyframes_template;
    csscode = csscode.replace(/LEFTFROM/, leftfrom);
    csscode = csscode.replace(/LEFTTOP/, lefttop);
    csscode = csscode.replace(/TOPTOP/, toptop);
    csscode = csscode.replace(/LEFTEND/, leftend);
    csscode = csscode.replace(/BOTBOT/, botbot);

    try {
      csscode2 = "@-webkit-keyframes flight_" + i + " {\n" + csscode + "\n}";
      document.styleSheets[cssIdx].insertRule(csscode2, 0);
    } catch(e) { }

    try { 
      csscode2 = "@-moz-keyframes flight_" + i + " {\n" + csscode + "\n}";
      document.styleSheets[cssIdx].insertRule(csscode2, 0);
    } catch(e) { }
  }

  for(var i=0; i < num_launchers; i++) {
    var rand = myRandom(0, flare_colours.length - 1);
    var rand_colour = flare_colours[rand];
    var launch_delay = myRandom(0,100) / 10;

    csscode = ".launcher:nth-child(" + num_launchers + "n+" + i + ") {\n"
      + "  -webkit-animation-name: flight_" + i + ";\n"
      + "  -webkit-animation-delay: " + launch_delay + "s;\n"
      + "  -moz-animation-name: flight_" + i + ";\n"
      + "  -moz-animation-delay: " + launch_delay + "s;\n"
      + "}";
    document.styleSheets[cssIdx].insertRule(csscode, 0);

    csscode = ".launcher:nth-child(" + num_launchers + "n+" + i + ") div {"
      + "  border-color: " + rand_colour + ";\n"
      + "  -webkit-animation-delay: " + launch_delay + "s;\n"
      + "  -moz-animation-delay: " + launch_delay + "s;\n"
      + "}";
    document.styleSheets[cssIdx].insertRule(csscode, 0);
  }

  for(var i=0; i < num_flares; i++) {
    csscode = ".launcher div:nth-child(" + num_flares + "n+" + i + ") {\n"
	+ "  -webkit-transform: rotate(" + (i * 360/num_flares) + "deg);\n"
	+ "  -moz-transform: rotate(" + (i * 360/num_flares) + "deg);\n"
	+ "}";
    document.styleSheets[cssIdx].insertRule(csscode, 0);
  }

  for(var i=0; i < num_launchers; i++) {
    var newdiv = document.createElement("div");
    newdiv.className = "launcher";
    for(var j=0; j < num_flares; j++) {
      newdiv.appendChild(document.createElement("div"));
    }
    document.getElementById("stage").appendChild(newdiv);
  }
}, false);
  
});

function btnHide() {
  var x = document.getElementById("btn");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}