*{
    overflow: hidden;
}

body {
    height: 100vh;
  }
  @import url('https://fonts.googleapis.com/css?family=Tangerine');
  canvas{position:absolute;z-index:0;width:100%;}
  .smoke {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
    position: absolute;
    top: 90%;
    left: 50%;
    transform: translate(-50%,-50%);
    animation:fade 13s;
  }
  @keyframes fade{
    0%{opacity:0}
    100%{opacity:1}
  }
  .smoke span {
  
    position: relative;
    color: #fff;
    font-family: sans-serif;
    font-weight: bold;
    letter-spacing: 10px;
  font-family: 'Tangerine', cursive;
    font-size: 2.5em;
  animation: animate 6s cubic-bezier(0, 0.98, 0.58, 1) infinite;
  
  }
  
  .smoke span:nth-child(1) {
    animation-delay: 0s;
    color:#b61b1b
  
  }
  .smoke span:nth-child(2) {
    animation-delay: 0.1s;
   
  }
  .smoke span:nth-child(3) {
    animation-delay: 0.2s;
    color:#b61b1b
   
  }
  .smoke span:nth-child(4) {
    animation-delay: 0.3s; 
  }
  @keyframes fade{
    0%{opacity:0}
    100%{opacity:1}
  }
  @keyframes animate {
    0%
    {
      filter: blur(0);
    }
    0%
    {
      filter: blur(0);
    }
    40%
    { 
      filter: blur(20px);
    }
    80%
    {
      filter: blur(0);
    }
    100%
    {
      filter: blur(0);
    }
  }