*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.banner::before {
  
}

.banner {
  --ch: 70ch;
  --clr:white;
  font-family: "Poppins";
	text-align: center;
  width: 100%;
  height: 140px;
  color: transparent;
  background-color: #f06;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 2.5rem;
  text-shadow: calc(var(--ch) * 0) 0 1px var(--clr),
    calc(var(--ch) * 1) 0 1px var(--clr), calc(var(--ch) * 2) 0 1px var(--clr),
    calc(var(--ch) * 3) 0 1px var(--clr), calc(var(--ch) * 4) 0 1px var(--clr);
  animation: move 11s linear infinite;
}

@keyframes move {
  to {
    text-shadow: calc(var(--ch) * -1) 0 1px var(--clr),
      calc(var(--ch) * 0) 0 1px var(--clr), calc(var(--ch) * 1) 0 1px var(--clr),
      calc(var(--ch) * 2) 0 1px var(--clr), calc(var(--ch) * 3) 0 1px var(--clr);
  }
}