@font-face {
    font-family: 'Merriweather';
    src: url('/_/Merriweather-Regular.ttf')  format('truetype');
}
body {
	margin: auto;
	background-color:  #1b2631;
}
.box-Z {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
}
.letter-Z {
	font-family: Merriweather;
	font-size: 46rem;
	color: #f9fbde;
	text-shadow: 0.1rem 0 0 orange, 0 0.1rem 0 orange, -0.1rem 0 0 orange, 0 -0.1rem 0 orange, 0px 0px 2px orange, 0px 0px 0.1em orange, 0px 0px 0.1em orange;
	position: absolute;
}
.letter-Z::before,
.letter-Z::after {
	content: attr(data-text);
	position: relative;
	z-index: 1;
}

.letter-Z::before {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	color: transparent;
	text-shadow: 0 0 5px darkgrey;
	animation: orbit-shadow 5s linear infinite;
}
/* the 50px is your offset */
@keyframes orbit-shadow {
  0% {
    transform:rotate(0deg)   translate(12px) rotate(0deg);
  }
  100% {
    transform:rotate(360deg) translate(12px) rotate(-360deg);
  }
}