/* @import url("https://use.typekit.net/sxk2alg.css"); */
.glitch {
    font-family: Arial, Helvetica, sans-serif;
    position: relative;
    color: rgba(255, 255, 255, 0.892);
    font-size: 7rem;
    font-weight: 1000 !important;
    margin: 0;
    padding: 0;
    font-style: italic !important;
}
@media screen and (max-width: 768px) {
    .glitch {
        font-size: 5rem;
    }
}
@media screen and (max-width: 480px) {
    .glitch {
        font-size: 4rem;
    }
}
@media screen and (min-width: 3500px) {
    .glitch {
        font-size: 15rem;
    }
}
@media screen and (max-width: 500px) {
    .glitch {
        font-size: 3rem;
    }
}
@media screen and (max-width: 350px) {
    .glitch {
        font-size: 2rem;
    }
}
.line:not(:first-child) {
    position: absolute;
    top: 0;
    left: 0;
    -webkit-user-select: none;
    user-select: none;
}
.line:nth-child(1) {
    animation: clip 3000ms -300ms linear infinite, glitch1 1000ms -932ms linear infinite;
}
@keyframes glitch1 {
    0% {
        transform: translateX(0);
   }
    80% {
        transform: translateX(0);
        color: #fff;
   }
    85% {
        transform: translateX(-3px);
        color: #c5f0b0;
   }
    90% {
        transform: translateX(5px);
        color: #f3d4d4;
   }
    95% {
        transform: translateX(4px);
        color: #fff;
   }
    100% {
        transform: translateX(0);
   }
}
.line:nth-child(2) {
    animation: clip 3000ms -600ms linear infinite, glitch2 1000ms -299ms linear infinite;
}
@keyframes glitch2 {
    0% {
        transform: translateX(0);
   }
    80% {
        transform: translateX(0);
        color: #fff;
   }
    85% {
        transform: translateX(-4px);
        color: #c5f0b0;
   }
    90% {
        transform: translateX(1px);
        color: #f3d4d4;
   }
    95% {
        transform: translateX(3px);
        color: #fff;
   }
    100% {
        transform: translateX(0);
   }
}
.line:nth-child(3) {
    animation: clip 3000ms -900ms linear infinite, glitch3 1000ms -224ms linear infinite;
}
@keyframes glitch3 {
    0% {
        transform: translateX(0);
   }
    80% {
        transform: translateX(0);
        color: #fff;
   }
    85% {
        transform: translateX(-2px);
        color: #c5f0b0;
   }
    90% {
        transform: translateX(2px);
        color: #f3d4d4;
   }
    95% {
        transform: translateX(5px);
        color: #fff;
   }
    100% {
        transform: translateX(0);
   }
}
.line:nth-child(4) {
    animation: clip 3000ms -1200ms linear infinite, glitch4 1000ms -823ms linear infinite;
}
@keyframes glitch4 {
    0% {
        transform: translateX(0);
   }
    80% {
        transform: translateX(0);
        color: #fff;
   }
    85% {
        transform: translateX(4px);
        color: #c5f0b0;
   }
    90% {
        transform: translateX(4px);
        color: #f3d4d4;
   }
    95% {
        transform: translateX(1px);
        color: #fff;
   }
    100% {
        transform: translateX(0);
   }
}
.line:nth-child(5) {
    animation: clip 3000ms -11000ms linear infinite, glitch5 1000ms -186ms linear infinite;
}
@keyframes glitch5 {
    0% {
        transform: translateX(0);
   }
    80% {
        transform: translateX(0);
        color: #fff;
   }
    85% {
        transform: translateX(-3px);
        color: #c5f0b0;
   }
    90% {
        transform: translateX(2px);
        color: #f3d4d4;
   }
    95% {
        transform: translateX(5px);
        color: #fff;
   }
    100% {
        transform: translateX(0);
   }
}
.line:nth-child(6) {
    animation: clip 3000ms -1800ms linear infinite, glitch6 1000ms -240ms linear infinite;
}
@keyframes glitch6 {
    0% {
        transform: translateX(0);
   }
    80% {
        transform: translateX(0);
        color: #fff;
   }
    85% {
        transform: translateX(3px);
        color: #c5f0b0;
   }
    90% {
        transform: translateX(3px);
        color: #f3d4d4;
   }
    95% {
        transform: translateX(5px);
        color: #fff;
   }
    100% {
        transform: translateX(0);
   }
}
.line:nth-child(7) {
    animation: clip 3000ms -2100ms linear infinite, glitch7 1000ms -712ms linear infinite;
}
@keyframes glitch7 {
    0% {
        transform: translateX(0);
   }
    80% {
        transform: translateX(0);
        color: #fff;
   }
    85% {
        transform: translateX(1px);
        color: #c5f0b0;
   }
    90% {
        transform: translateX(5px);
        color: #f3d4d4;
   }
    95% {
        transform: translateX(1px);
        color: #fff;
   }
    100% {
        transform: translateX(0);
   }
}
.line:nth-child(8) {
    animation: clip 3000ms -2400ms linear infinite, glitch8 1000ms -156ms linear infinite;
}
@keyframes glitch8 {
    0% {
        transform: translateX(0);
   }
    80% {
        transform: translateX(0);
        color: #fff;
   }
    85% {
        transform: translateX(-4px);
        color: #c5f0b0;
   }
    90% {
        transform: translateX(-4px);
        color: #f3d4d4;
   }
    95% {
        transform: translateX(3px);
        color: #fff;
   }
    100% {
        transform: translateX(0);
   }
}
.line:nth-child(9) {
    animation: clip 3000ms -2700ms linear infinite, glitch9 1000ms -677ms linear infinite;
}
@keyframes glitch9 {
    0% {
        transform: translateX(0);
   }
    80% {
        transform: translateX(0);
        color: #fff;
   }
    85% {
        transform: translateX(2px);
        color: #c5f0b0;
   }
    90% {
        transform: translateX(-1px);
        color: #f3d4d4;
   }
    95% {
        transform: translateX(1px);
        color: #fff;
   }
    100% {
        transform: translateX(0);
   }
}
.line:nth-child(10) {
    animation: clip 3000ms -3000ms linear infinite, glitch10 1000ms -90ms linear infinite;
}
@keyframes glitch10 {
    0% {
        transform: translateX(0);
   }
    80% {
        transform: translateX(0);
        color: #fff;
   }
    85% {
        transform: translateX(-4px);
        color: #c5f0b0;
   }
    90% {
        transform: translateX(4px);
        color: #f3d4d4;
   }
    95% {
        transform: translateX(-4px);
        color: #fff;
   }
    100% {
        transform: translateX(0);
   }
}
@keyframes clip {
    0% {
        clip-path: polygon(0 100%, 100% 100%, 100% 120%, 0 120%);
   }
    100% {
        clip-path: polygon(0 -20%, 100% -20%, 100% 0%, 0 0);
   }
}
