/* From Uiverse.io by 212004ALJI (editted) */ 

.lunazea-button,
.lunazea-button::after {
  padding: 30px 100px;
  font-size: 48px;
  border: none;
  border-radius: 0;
  color: white;
  background-color: transparent;
  position: relative;
  font-family: "Poppins", sans-serif;
  cursor: pointer;
  outline: none;
  box-shadow: none;
}

.lunazea-button::after {
  --move1: inset(50% 50% 50% 50%);
  --move2: inset(31% 0 40% 0);
  --move3: inset(39% 0 15% 0);
  --move4: inset(45% 0 40% 0);
  --move5: inset(45% 0 6% 0);
  --move6: inset(14% 0 61% 0);
  clip-path: var(--move1);
  content: 'Lunazea';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  animation: glitch_4011 1s infinite;
  animation-timing-function: steps(2, end);
  text-shadow: -3px -3px 0px #1df2f0, 3px 3px 0px #E94BE8;
}

.lunazea-button {
  text-shadow: -1px -1px 0px #1df2f0, 1px 1px 0px #E94BE8;
}

@keyframes glitch_4011 {
  0% { clip-path: var(--move1); transform: translate(0px,-10px); }
  10% { clip-path: var(--move2); transform: translate(-10px,10px); }
  20% { clip-path: var(--move3); transform: translate(10px,0px); }
  30% { clip-path: var(--move4); transform: translate(-10px,10px); }
  40% { clip-path: var(--move5); transform: translate(10px,-10px); }
  50% { clip-path: var(--move6); transform: translate(-10px,10px); }
  60% { clip-path: var(--move1); transform: translate(10px,-10px); }
  70% { clip-path: var(--move3); transform: translate(-10px,10px); }
  80% { clip-path: var(--move2); transform: translate(10px,-10px); }
  90% { clip-path: var(--move4); transform: translate(-10px,10px); }
  100% { clip-path: var(--move1); transform: translate(0); }
}