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

.banner::before {
  
}
.banner {
  --ch: 80ch;
  --clr:white;
  font-family: "Poppins";
	text-align: center;
  width: 100%;
  height:80px;
	
  color: transparent;
  background-color: #f06;
/*  display: flex;
  align-items: center;
  justify-content: flex-start;
*/	margin-top:56px;
	padding:1% 0;
  font-size: 0.8rem;
  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;
}


@media (min-width: 900px) {
 .banner {
  --ch: 70ch;
  --clr:white;
  font-family: "Poppins";
	text-align: center;
  width: 100%;
 height: 100px;
  color: transparent;
  background-color: #f06;
 /* display: flex;
  align-items: center;
  justify-content: flex-start;*/
	 margin-top:0px;
  font-size: 1.3rem;
  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);
  }
}