#greeting {
  --glitch-trans-x: 0px;
  --glitch-trans-y: 0px;
  --glitch-skew-x: 0deg;
  --glitch-skew-y: 0deg;
}

.glitching{ 
    transform: 
        translate(var(--glitch-trans-x), var(--glitch-trans-y)) 
        skew(var(--glitch-skew-x), var(--glitch-skew-y));
    color: var(--glitch-color) !important;
    font-family: var(--glitch-font-family) !important;

}

.glitching p{
    opacity: 0;
}

#greeting h1, #greeting h4 {
    font-family: 'Playwrite DE SAS'
}

.glitching h1, .glitching h4 {
    font-family: var(--glitch-font-family) !important;
}

.visible {
    opacity: 1 !important;
    pointer-events: var(--arrow-pointer-events);
}

html, body {
    overflow-x: clip; /*to prevent the horizontal scroll bar showing when the text starts glitching*/
}

/* hides the scroll bar so that the glitch effect cannot be broken*/
html {
  scrollbar-width: none; /* Firefox */
}
html::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

@font-face {
    font-family: 'Terminus';
    src: url('TerminusTTF-4.49.3.ttf') format('truetype');
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

.caret {
    animation: blink 1s steps(1) infinite;
}