.loader {
  width: fit-content;
  font-size: clamp(40px, 8vw, 100px); /* Responsive font size */
  font-family: monospace;
  font-weight: bold;
  text-transform: uppercase;
  color: #0000;
  -webkit-text-stroke: 1px #000;

  --g: conic-gradient(#5094F3 0 0) no-repeat text;

  background: var(--g) 0, var(--g) 1ch, var(--g) 2ch, var(--g) 3ch, var(--g) 4ch,
              var(--g) 5ch, var(--g) 6ch, var(--g) 7ch, var(--g) 8ch,
              var(--g) 9ch, var(--g) 10ch;

  animation:
    l17-0 1s linear infinite alternate,
    l17-1 2s linear infinite;
}

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

@keyframes l17-0 {
  0%   { background-size: 1ch 0; }
  100% { background-size: 1ch 100%; }
}

@keyframes l17-1 {
  0%,50%    { background-position-y: 100%, 0; }
  50.01%,to { background-position-y: 0, 100%; }
}


.container {
            width: 100vw;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }
            .indicator {
                width: 24vw;
        }