.loader {
    width: fit-content;
    font-size: 40px;
    font-family: Archivo, sans-serif;
    font-weight: bold;
    color: #0000;
    -webkit-text-stroke: 1px #666d74;
    --l: #0000 45%,#666d74 0 55%,#0000 0;
    --g: 0/300% 120% no-repeat text;
    background: linear-gradient(-60deg,var(--l)) var(--g), linear-gradient( 60deg,var(--l)) var(--g);
    animation: l7 4s linear infinite;
    display: flex;
    align-items: center;
    justify-content: center;
}


    .loader:before {
        content: "jaramillomora";
    }

@keyframes shimmer {
    0% {
        background-position: 200% center;
    }

    100% {
        background-position: -200% center;
    }
}

@keyframes l7 {
    0% {
        background-position: 100%,0
    }

    50% {
        background-position: 0,0
    }

    to {
        background-position: 0,100%
    }
}

/* RESPONSIVE DESIGN */
@media (min-width: 768px) {
    .loader {
        -webkit-text-stroke: 1px #666d74;
        --l: #0000 45%,#666d74 0 55%,#0000 0;
        --g: 0/200% 100% no-repeat text;
    }
}

@media (min-width: 1024px) {
    .loader {
        -webkit-text-stroke: 1px #666d74;
        --l: #0000 45%,#666d74 0 55%,#0000 0;
        --g: 0/50% 100% no-repeat text;
    }
}