.page-header .page-title{
    background: #000;
    color: #fff;
    width: 100%;
    padding: 30px 5%;
    font: normal var(--font-Poppins);
}

/* Glitch*/


 .glitch {
    color: white;
    font-family: sans-serif;
    font-weight: 800;
    position: relative;
    font-size: 2.5em;
    padding: 30px;
  }
  .glitch::before, .glitch::after {
    padding: 30px;
    color: white;
    content: attr(data-text);
    position: absolute;
    width: 100%;
    height: 100%;
    background: black;
    overflow: hidden;
    top: 0;
  }
   .glitch::before {
    left: 3px;
    text-shadow: -2px 0 #999;
    animation-name: glitch-animation-1;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: reverse-alternate;

    -webkit-animation-name: glitch-animation-1;
    -webkit-animation-duration: 2s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 0s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: reverse-alternate;
  }
   .glitch::after {
    left: -3px;
    text-shadow: -2px 0 var(--primary-color);
    animation-name: glitch-animation-2;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: reverse-alternate;

    -webkit-animation-name: glitch-animation-2;
    -webkit-animation-duration: 2s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 0s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: reverse-alternate;
  }



/*Another Effect*/




.fade {  
  animation: showup 7s ease-in-out;
  animation-iteration-count:1;
  color: white;
  font-weight: 100;
  position: relative;
  font-size: 5em;
  text-shadow: #FC0 1px 0 10px;
  padding: 30px;
}



.post-area.past .fade{
  text-align: left;
}

.fade:lang(en){
  /* font-family: 'Poppins', sans-serif; */
  font-family: 'Noto Sans TC', sans-serif;
}

.fade:lang(zh){
  font-family: 'Noto Sans TC', sans-serif;
}


.page-header .page-title .fade.prog,  .post-area.past .page-header .page-title .prog i{
  font-size: 54px;
}

.post-area.past .page-title .fade{
  padding: 0 10px;
}

@keyframes showup {
    0% {opacity:0;}
    20% {opacity:1;}
    80% {opacity:1;}
    100% {opacity:1;}
}


/* Extra small devices (phones, 600px and down) */
@media screen and (max-width: 600px) {

  .glitch {
    color: white;
    font-family: sans-serif;
    font-weight: 800;
    position: relative;
    font-size: 2.3rem;
    padding: 30px;
  }

  .page-header .page-title{
    font-size: 0.5em;
  }

  .page-header .page-title .fade.prog, .post-area.past .page-header .page-title .prog i{
    font-size: 24px;
  }

  .post-area.past .page-header .page-title i{
    font-size: 0.5em;
}


}



@media screen and (min-width: 768px) {

    .glitch {
        color: white;
        font-family: sans-serif;
        font-weight: 800;
        position: relative;
        font-size: 100px;
        padding: 30px;
      }

}
  
  @keyframes glitch-animation-1 {
    0% {
      clip: rect(10vh, 9999px, 25vh, 0);
    }
    5% {
      clip: rect(12vh, 9999px, 86vh, 0);
    }
    10% {
      clip: rect(9vh, 9999px, 10vh, 0);
    }
    15% {
      clip: rect(60vh, 9999px, 100vh, 0);
    }
    20% {
      clip: rect(25vh, 9999px, 70vh, 0);
    }
    25% {
      clip: rect(1vh, 9999px, 22vh, 0);
    }
    30% {
      clip: rect(38vh, 9999px, 60vh, 0);
    }
    35% {
      clip: rect(18vh, 9999px, 100vh, 0);
    }
    40% {
      clip: rect(26vh, 9999px, 80vh, 0);
    }
    45% {
      clip: rect(4vh, 9999px, 11vh, 0);
    }
    50% {
      clip: rect(77vh, 9999px, 86vh, 0);
    }
    55% {
      clip: rect(11vh, 9999px, 99vh, 0);
    }
    60% {
      clip: rect(80vh, 9999px, 100vh, 0);
    }
    65% {
      clip: rect(9vh, 9999px, 38vh, 0);
    }
    70% {
      clip: rect(63vh, 9999px, 57vh, 0);
    }
    75% {
      clip: rect(29vh, 9999px, 62vh, 0);
    }
    80% {
      clip: rect(47vh, 9999px, 87vh, 0);
    }
    85% {
      clip: rect(5vh, 9999px, 18vh, 0);
    }
    90% {
      clip: rect(60vh, 9999px, 100vh, 0);
    }
    95% {
      clip: rect(13vh, 9999px, 72vh, 0);
    }
    100% {
      clip: rect(7vh, 9999px, 48vh, 0);
    }
  }
  @keyframes glitch-animation-2 {
    0% {
      clip: rect(14vh, 9999px, 41vh, 0);
    }
    5% {
      clip: rect(4vh, 9999px, 15vh, 0);
    }
    10% {
      clip: rect(28vh, 9999px, 100vh, 0);
    }
    15% {
      clip: rect(8vh, 9999px, 26vh, 0);
    }
    20% {
      clip: rect(2vh, 9999px, 10vh, 0);
    }
    25% {
      clip: rect(30vh, 9999px, 50vh, 0);
    }
    30% {
      clip: rect(13vh, 9999px, 27vh, 0);
    }
    35% {
      clip: rect(70vh, 9999px, 99vh, 0);
    }
    40% {
      clip: rect(22vh, 9999px, 57px, 0);
    }
    45% {
      clip: rect(7vh, 9999px, 12vh, 0);
    }
    50% {
      clip: rect(50vh, 9999px, 100vh, 0);
    }
    55% {
      clip: rect(14vh, 9999px, 50vh, 0);
    }
    60% {
      clip: rect(60vh, 9999px, 99vh, 0);
    }
    65% {
      clip: rect(1vh, 9999px, 4vh, 0);
    }
    70% {
      clip: rect(49vh, 9999px, 100vh, 0);
    }
    75% {
      clip: rect(35vh, 9999px, 49vh, 0);
    }
    80% {
      clip: rect(52vh, 9999px, 77vh, 0);
    }
    85% {
      clip: rect(19vh, 9999px, 26vh, 0);
    }
    90% {
      clip: rect(29vh, 9999px, 100vh, 0);
    }
    95% {
      clip: rect(2vh, 9999px, 6vh, 0);
    }
    100% {
      clip: rect(51vh, 9999px, 64vh, 0);
    }
  }