/*Description: Smoke Effect CSS Text*/
/*Author:Ng Jing Ping */
/*Date:30 April 2019 */
/*Valited: Ok 4 May 2019 */

body{
  margin: 0;
  padding: 0; 
  background-color:black;
  overflow: hidden;
         }

img{   
    position:absolute;
    top:0%;
    left:0%;
    width:100%;
    height:100%;
    opacity:0.5;
    }

h1{
  margin: 0;
  padding: 0;
  position:absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
  color:lightgray;
  font-size: 10em;
  font-family:monospace;
  letter-spacing: 0.2px;
         }

h1 span{
   opacity: 0;
   display: inline-block;
   animation: example 1s linear forwards;
                         }

h2{
  margin: 0;
  padding: 0;
  position:absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
  color:lightgray;
  font-size: 8em;
  font-family:monospace;
}

@-webkit-keyframes example {
          0%{ 
              opacity:0;
              transform:rotateY(240deg);
              filter:blur(30px);
                 }
          
          100%{ 
              opacity:1;
              transform:rotateY(0deg);
              filter:blur(0px);
                 }


                         }
video{
  position:absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
    }

footer{
    background:none;
    font-variant: small-caps;
    margin-top:50px;
    color:#ddd;
    position:absolute;
    top: 80%;
    left: 50%;
    transform: translate(-50%, -50%);
          }


h1 span:nth-child(1){
          animation-delay:1s;
              }
h1 span:nth-child(2){
          animation-delay:1.5s;
              }
h1 span:nth-child(3){
          animation-delay:2s;
              }
h1 span:nth-child(4){
          animation-delay:2.5s;
              }
h1 span:nth-child(5){
          animation-delay:3s;
              }