/*

Original:

https://codepen.io/comehope/pen/xJdVxx

Forked:

https://codepen.io/marcellis/pen/WKmMdV

Just replicating the .flame class doesn't work: I therefore made a copy for each instance.

The line:

  left: calc((var(--n) - 1) * 5em / var(--particles));

governs the width e.G. 5em in this case

The js is in file index.JS

the code is also duplicated for each instance. Ugly but works.

*/


@keyframes rise {
  from {
    transform: translateY(0) scale(1);
    filter: opacity(0);
  }

  25% {
    filter: opacity(1);
  }

  to {
    transform: translateY(-10em) scale(0);
    filter: opacity(0);
  }
}

.flame {
  width: 2em;
  height: 10vh;
  font-size: 24px;
  position: relative;
}

.flame span {
  position: absolute;
  width: 2em;
  height: 5em;
  background: radial-gradient(
      orangered 20%,
      rgba(255, 69, 0, 0) 70%
  );
  border-radius: 50%;
  bottom: 0;
  left: calc((var(--n) - 1) * 5em / var(--particles));
  mix-blend-mode: screen;
  animation: rise 1s ease-in infinite;
  animation-delay: calc(var(--rnd) * 1s);
}


.flame2 {
  width: 2em;
  height: 10vh;
  font-size: 24px;
  position: relative;
}

.flame2 span {
  position: absolute;
  width: 2em;
  height: 5em;
  background: radial-gradient(
          orangered 20%,
          rgba(255, 69, 0, 0) 70%
  );
  border-radius: 50%;
  bottom: 0;
  left: calc((var(--n) - 1) * 2em / var(--particles));
  mix-blend-mode: screen;
  animation: rise 1s ease-in infinite;
  animation-delay: calc(var(--rnd) * 1s);
}

.flame3 {
  width: 2em;
  height: 10vh;
  font-size: 24px;
  position: relative;
}

.flame3 span {
  position: absolute;
  width: 2em;
  height: 5em;
  background: radial-gradient(
          orangered 20%,
          rgba(255, 69, 0, 0) 70%
  );
  border-radius: 50%;
  bottom: 0;
  left: calc((var(--n) - 1) * 4em / var(--particles));
  mix-blend-mode: screen;
  animation: rise 1s ease-in infinite;
  animation-delay: calc(var(--rnd) * 1s);
}

.flame-EA {
  width: 2em;
  height: 10vh;
  font-size: 24px;
  position: relative;
}

.flame-EA span {
  position: absolute;
  width: 2em;
  height: 5em;
  background: radial-gradient(
          orangered 20%,
          rgba(255, 69, 0, 0) 70%
  );
  border-radius: 50%;
  bottom: 0;
  left: calc((var(--n) - 1) * 3em / var(--particles));
  mix-blend-mode: screen;
  animation: rise 1s ease-in infinite;
  animation-delay: calc(var(--rnd) * 1s);
}

.flame-Inn {
  width: 2em;
  height: 10vh;
  font-size: 24px;
  position: relative;
}

.flame-Inn span {
  position: absolute;
  width: 2em;
  height: 5em;
  background: radial-gradient(
          orangered 20%,
          rgba(255, 69, 0, 0) 70%
  );
  border-radius: 50%;
  bottom: 0;
  left: calc((var(--n) - 1) * 3em / var(--particles));
  mix-blend-mode: screen;
  animation: rise 1s ease-in infinite;
  animation-delay: calc(var(--rnd) * 1s);
}
.flame-LB {
  width: 2em;
  height: 10vh;
  font-size: 24px;
  position: relative;
}

.flame-LB span {
  position: absolute;
  width: 2em;
  height: 5em;
  background: radial-gradient(
          orangered 20%,
          rgba(255, 69, 0, 0) 70%
  );
  border-radius: 50%;
  bottom: 0;
  left: calc((var(--n) - 1) * 3em / var(--particles));
  mix-blend-mode: screen;
  animation: rise 1s ease-in infinite;
  animation-delay: calc(var(--rnd) * 1s);
}

.flame-GW {
  width: 2em;
  height: 10vh;
  font-size: 24px;
  position: relative;
}

.flame-GW span {
  position: absolute;
  width: 2em;
  height: 5em;
  background: radial-gradient(
          orangered 20%,
          rgba(255, 69, 0, 0) 70%
  );
  border-radius: 50%;
  bottom: 0;
  left: calc((var(--n) - 1) * 4em / var(--particles));
  mix-blend-mode: screen;
  animation: rise 1s ease-in infinite;
  animation-delay: calc(var(--rnd) * 1s);
}

.flame-RD {
  width: 2em;
  height: 10vh;
  font-size: 24px;
  position: relative;
}

.flame-RD span {
  position: absolute;
  width: 2em;
  height: 5em;
  background: radial-gradient(
          orangered 20%,
          rgba(255, 69, 0, 0) 70%
  );
  border-radius: 50%;
  bottom: 0;
  left: calc((var(--n) - 1) * 3em / var(--particles));
  mix-blend-mode: screen;
  animation: rise 1s ease-in infinite;
  animation-delay: calc(var(--rnd) * 1s);
}
/* 
.flame-webdesign {
  width: 2em;
  height: 10vh;
  font-size: 24px;
  position: relative;
}

.flame-webdesign span {
  position: absolute;
  width: 2em;
  height: 5em;
  background: radial-gradient(
          orangered 20%,
          rgba(255, 69, 0, 0) 70%
  );
  border-radius: 50%;
  bottom: 0;
  left: calc((var(--n) - 1) * 3em / var(--particles));
  mix-blend-mode: screen;
  animation: rise 1s ease-in infinite;
  animation-delay: calc(var(--rnd) * 1s);
}

.flame-photography {
  width: 2em;
  height: 10vh;
  font-size: 24px;
  position: relative;
}

.flame-photography span {
  position: absolute;
  width: 2em;
  height: 5em;
  background: radial-gradient(
          orangered 20%,
          rgba(255, 69, 0, 0) 70%
  );
  border-radius: 50%;
  bottom: 0;
  left: calc((var(--n) - 1) * 3em / var(--particles));
  mix-blend-mode: screen;
  animation: rise 1s ease-in infinite;
  animation-delay: calc(var(--rnd) * 1s);
} */