.container.fire
  -(1..16).each do |i|
    .spark
.container.smoke  
  -(1..16).each do |i|
    .dust

$n: 16;
$t: 1.16;
$r: 10;
html, body, .container {
  width: 100%; height: 100%;
}
body {   
  margin: 0;
  overflow: hidden;
}
.container {
  position: absolute;
}
.container.fire {
  background: #555;
  filter: contrast(8);
}
.spark {
  position: absolute;  
  background: #fa0;
  border-radius: 50%;
  animation: fire $t * 1s infinite ease-in;
  filter: blur(26px);
  @for $i from 0 to $n {
    &:nth-child(#{$i + 1}) {
      $rand: random() + 1;
      width: $rand * $r * 1%; height: $rand * $r * 1%;
      animation-delay: random() * $t * -1s;
      left: random() * 70%;
        &:after {
        content: "";
        display: block;
        position: absolute;
        top: random() * -30%; left: random() * 30%;
        width: 30%; height: 60%;
        background: #555;
        border-radius: 50%;
      }
    }
  } 
}
$r: 14;
$t: 1.6;
.dust {
  background: rgba(200,200,255,0.3);
  border-radius: 50%;
  position: absolute;
  animation: fire $t * 1s infinite ease-in;
  filter: blur(2px);  
  @for $i from 0 to $n {
    &:nth-child(#{$i + 1}) {
      $rand: random() + 1;
      width: $rand * $r * 1px; height: $rand * $r * 1px;
      left: random() * 70%;
      animation-delay: random() * $t * -1s;
    }
  }
}
@keyframes fire {
  0% {bottom: -15%; opacity: 1;}
  100% {bottom: 90%; opacity: 0;}
}