@import url('https://fonts.googleapis.com/css?family=Fira+Mono:400');

.mainblink{ 
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
 
  color: #fff;
  font-size: 70px;
  font-family: 'Fira Mono', monospace;
  letter-spacing: -7px;
}

.blink{
  animation: glitch 1s linear infinite;
}

@keyframes glitch{
  2%,64%{
    transform: translate(2px,0) skew(0deg);
  }
  4%,60%{
    transform: translate(-2px,0) skew(0deg);
  }
  62%{
    transform: translate(0,0) skew(5deg); 
  }
}

div:before,
div:after{
  content: attr(title);
  position: absolute;
  left: 0;
}

div:before{
  animation: glitchTop 1s linear infinite;
  clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
}

@keyframes glitchTop{
  2%,64%{
    transform: translate(2px,-2px);
  }
  4%,60%{
    transform: translate(-2px,2px);
  }
  62%{
    transform: translate(13px,-1px) skew(-13deg); 
  }
}

div:after{
  animation: glitchBotom 1.5s linear infinite;
  clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
  -webkit-clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
}

@keyframes glitchBotom{
  2%,64%{
    transform: translate(-2px,0);
  }
  4%,60%{
    transform: translate(-2px,0);
  }
  62%{
    transform: translate(-22px,5px) skew(21deg); 
  }
} 











@import url(https://fonts.googleapis.com/css?family=Akronim);

 

.fire {
  margin: 50px auto;
  width: 80%;
  max-width: 1000px;
  height: 100px;

  background-position: center center;
  background-size: 1000px 200px;
  border-radius: 10px;
  font-family: 'Akronim';
  overflow: hidden;
    text-align: center;
  vertical-align: middle;

}
.fire:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.Blazing {
  display: inline-block;
  margin: 0;
  font-weight: 1000;
  color:#ffcc32 ;
  font-size: 30px;
  line-height: 50px;
  min-width: 40px;
  outline: none;
  vertical-align: middle;

  /*text-shadow:
        0 3px 20px red,
        0 0 20px red,
    0 0 10px orange,
    4px -5px 6px yellow,
    -4px -10px 10px yellow,
    0 -10px 30px yellow;
  animation: 2s Blazing infinite alternate linear;*/
}

@keyframes Blazing {
  0%   { text-shadow: 0 3px 20px red, 0 0 20px red,
    0 0 10px orange,
    0 0 0 yellow,
    0 0 5px yellow,
    -2px -5px 5px yellow,
    4px -10px 10px yellow; }
  25%   { text-shadow: 0 3px 20px red, 0 0 30px red,
    0 0 20px orange,
    0 0 5px yellow,
    -2px -5px 5px yellow,
    3px -10px 10px yellow,
    -4px -15px 20px yellow; }
  50%   { text-shadow: 0 3px 20px red, 0 0 20px red,
    0 -5px 10px orange,
    -2px -5px 5px yellow,
    3px -10px 10px yellow,
    -4px -15px 20px yellow,
    2px -20px 30px rgba(255,255,0,0.5); }
  75%   { text-shadow: 0 3px 20px red, 0 0 20px red,
    0 -5px 10px orange,
    3px -5px 5px yellow,
    -4px -10px 10px yellow,
    2px -20px 30px rgba(255,255,0,0.5),
    0px -25px 40px rgba(255,255,0,0)}
  100%   { text-shadow: 0 3px 20px red, 0 0 20px red,
    0 0 10px orange,
    0 0 0 yellow,
    0 0 5px yellow,
    -2px -5px 5px yellow,
    4px -10px 10px yellow; }
}