<img src="https://assets.codepen.io/t-1/shapelined-Z1xxfm52Htc-unsplash.jpg" alt="scary-forest">
  <div id="scene">
    <h1>Summon the Ghosts?</p>

    <div id="buttons-container">
      <div id="buttons">
        <div id="yeah">
          <div id="fire-container"></div>
          <button id="confirm" type="button">Confirm</button>
        </div>

        <div id="nah">
          <div id="smog-container"></div>

          <button id="cancel" type="button">Too Late...</button>
        </div>
      </div>
    </div>
  </div>

:root {
  --fireColor1: #ff5000;
  --fireColor2: rgba(255,80,0,0);
  --fireDuration: 1s;
  --blur: 0.4px;
  --fireSize: 90px;
  --smogColor1: rgb(49, 48, 48);
  --smogColor2: rgba(255,80,0,0);
  --smogDuration: 2s;
  --smogSize: 120px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body, #scene {
  width: 100%;
  height: 100%;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background: rgb(0, 0, 0);
}

h1 {
  width: 100%;
  font-size: 50px;
  text-align: center;
  color: white;
  font-family: 'Italiana', serif;
  font-family: 'Julius Sans One'
}

#scene {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#fire-container,
#smog-container {
  font-size: 24px;
	filter: blur(var(--blur));
	-webkit-filter: blur(var(--blur));
	position: relative;
	width: 10em;
	height: 12em;
}

#fire-container .particle {
	animation: rise var(--fireDuration) ease-in infinite;
	background-image: radial-gradient(var(--fireColor1) 30%,var(--fireColor2) 70%);
	border-radius: 50%;
	mix-blend-mode: screen;
	opacity: 0;
	position: absolute;
	bottom: 0;
	width: var(--fireSize);
	height: var(--fireSize);
}

#smog-container .particle {
	animation: rise var(--smogDuration) ease-in infinite;
	background-image: radial-gradient(var(--smogColor1) 30%,var(--smogColor2) 70%);
	border-radius: 50%;
	mix-blend-mode: screen;
	opacity: 0;
	position: absolute;
	bottom: 0;
	width: var(--smogSize);
	height: var(--smogSize);
}

#buttons {
  display: flex;
  position: relative;
  justify-content: center;
  
}

button {
  margin: 10px;
  width: 200px;
  height: 50px;
  border-radius: 30px;
  position: absolute;
  bottom: 0px;
  font-weight: 900;
  border: none;
  font-size: 30px;
  cursor: pointer;
  font-family: system-ui;
  -webkit-box-shadow: 0px 15px 24px -9px rgba(255,255,255,0.2); 
  box-shadow: 0px 15px 24px -9px rgba(255,255,255,0.2);
}

#yeah,
#nah {
  display: flex;
  justify-content: center;
  align-items: center;
}

#confirm {
  background-color: #fd6408;
  color: #313131;
  transition: all 0.8s;
}

#confirm:hover {
  background-color: rgba(255,255,255,0);
  box-shadow: none; 
  color: #fd6408;
}

#nah {
  position: relative;
  width: 300px;
  min-height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#cancel {
  background-color: #e9e9e9;
  color: #313131;
  transition: all 0.8s;
}

#cancel:hover {
  background-color: rgba(255,255,255,0);
  box-shadow: none; 
  color: #ffffff;
}

@keyframes rise {
	from {
		opacity: 0;
		transform: translateY(0) scale(1);
	}
	25% {
		opacity: 1;
	}
	to {
		opacity: 0;
		transform: translateY(-10em) scale(0);
	}
}

@keyframes fly-away {
  0% {
    opacity: 1;
    filter: blur(1px);
  }

  100% {
    transform: scale(0.3);
    opacity: 0;
    filter: blur(20px);
    border-radius: 50%;
  }
}


img {
  position: fixed;
  min-width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.2;
}

let fireContainer = document.getElementById("fire-container");
let smogContainer = document.getElementById("smog-container");
function createParticles(fireContainer, num, leftSpacing) {
  for (let i = 0; i < num; i += 1) {
    let particle = document.createElement("div");
    particle.style.left = `calc((100% - 5em) * ${i / leftSpacing })`;
    particle.setAttribute("class", "particle");
    particle.style.animationDelay = 4 * Math.random() + "s";
    fireContainer.appendChild(particle);
  }
}

createParticles(fireContainer, 60, 60);
createParticles(smogContainer, 30, 30);