/* @import url('https://fonts.googleapis.com/css2?family=Climate+Crisis&family=Gajraj+One&family=Gloock&family=Montserrat:wght@400;600;900&family=Roboto:wght@100;300&family=Rubik+Iso&family=Tilt+Warp&display=swap'); */
@font-face {
  font-family: glich;
  src: url(SonOfAGlitch-pK7d.ttf);
}
.glich{
    font-size: calc(4vw - 2px);
    text-transform: uppercase;
    letter-spacing: 10px;
    font-family: glich;
    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); 
    }
  }
  
  .glich:before,
  .glich:after{
    content: attr(titles);
    position: absolute;
    left: 0;
  }
  
  .glich: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); 
    }
  }
  
  .glich: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); 
    }
  }