purpIe_ghost

2022

@import url('https://fonts.googleapis.com/css2?family=Moo+Lah+Lah&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Shizuru&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Special+Elite&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Audiowide&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Carter+One&display=swap');

*, body {
 background-color: black;
 margin: 0;
 overflow: hidden;
}

h1 {
 text-shadow: 0px 3px 10px blue;
 color: hotpink;
 font-size: 90px;
 position: absolute;
 left: 50%;
 transform: translate(-50%,-50%);
 top: 50%;
 font-family: Moo Lah Lah;
 animation-name: blue-pink, launch, purple-green, launch, green-purple, launch;
 animation-duration: 2s, .5s, 2s, .5s, 2s, .5s;
 animation-iteration-count: 3, 3, 3, 3, 3, 3;
 animation-delay: 0s, 6s, 8s, 14s, 16s, 24s;
}

@keyframes blue-pink {
 from {
  text-shadow: 0px 3px 10px blue;
  color: pink;
  font-family: Moo Lah Lah;
 }
 to {
  text-shadow: 0px 3px 10px hopink;
  color: blue;
  font-family: Shizuru;
 }
}

@keyframes launch {
 0% {
  left: 0%;
  font-family: Shizuru;
  color: hotpink;
 }
 50% {
  left: 50%;
  font-family: Special Elite;
  color: blue;
 }
 100% {
  left: 100%;
  font-family: Moo Lah Lah;
  color: white;
 }
}

@keyframes purple-green {
 from {
  text-shadow: 0px 3px 10px purple;
  color: green;
  font-family: Moo Lah Lah;
 }
 to {
  text-shadow: 0px 3px 10px green;
  color: purple;
  font-family: Audiowide;
 }
}

@keyframes green-purple {
 from {
  text-shadow: 0px 3px 10px green;
  color: purple;
  font-family: Moo Lah Lah;
 }
 to {
  text-shadow: 0px 3px 10px purple;
  color: green;
  font-family: Carter One;
 }
}