.smoke{
    margin: 0;
    /* position: absolute; */
    width: 100%;
    /* height: 100%;  */
    height: 100vh;
    padding: 0;
}
canvas {
    width: 100%;
    height: 100%;
    min-height: 100%;
  }
  .smoke h1 {
    font: 2.75em 'Cinzel', serif;
    font-weight: 400;
    letter-spacing: 0.35em;
  }
  .smoke h1{
    visibility: hidden;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}
.smoke h1.transition-in {
    visibility: visible;
}
 .smoke .h1 [class^="letter"] {
    -webkit-transition: opacity 3s ease;
    -moz-transition: opacity 3s ease;
    transition: opacity 3s ease;
  }
  .smoke .h1 .letter-0 {
    transition-delay: 0.2s;
  }
  .smoke .h1  .letter-1 {
    transition-delay: 0.4s;
  }
  .smoke .h1  .letter-2 {
    transition-delay: 0.6s;
  }
  .smoke .h1  .letter-3 {
    transition-delay: 0.8s;
  }
  .smoke .h1  .letter-4 {
    transition-delay: 1.0s;
  }
  .smoke .h1  .letter-5 {
    transition-delay: 1.2s;
  }
  .smoke .h1  .letter-6 {
    transition-delay: 1.4s;
  }
  .smoke .h1  .letter-7 {
    transition-delay: 1.6s;
  }
  .letter-8 {
    transition-delay: 1.8s;
  }
  .smoke .h1  .letter-9 {
    transition-delay: 2.0s;
  }
  .letter-10 {
    transition-delay: 2.2s;
  }
  .smoke .h1  .letter-11 {
    transition-delay: 2.4s;
  }
  .letter-12 {
    transition-delay: 2.6s;
  }
  .smoke .h1  .letter-13 {
    transition-delay: 2.8s;
  }
  .letter-14 {
    transition-delay: 3.0s;
  }
  .smoke .h1  .letter-15 {
    transition-delay: 3.2s;
  }
  .smoke h1.h1 {
    visibility: hidden;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
  
  }
  .smoke h1.transition-in {
    visibility: visible;
  }
  h1 [class^="letter"] {
    opacity: 0;
  }
  h1.transition-in [class^="letter"] {
    opacity: 1;
  }