<p class="large rise">Good Morning Friends</p>
<p class="small outline">Rise and shine</p>

@import url("https://fonts.googleapis.com/css2?family=Audiowide&display=swap");

body,
html {
  height: 100%;
  display: grid;
  background-color: #ffdd40;
  font-family: "Audiowide", cursive;
  color: #333;
}

p {
  margin: auto;
}

.large {
  font-size: 6rem;
}

.small {
  font-size: 3rem;
}

.rise {
  text-shadow: -0.01em -0.01em 0.01em #000;
  animation: rise 2s ease-in-out 0.5s forwards;
}

@keyframes rise {
  to {
    text-shadow: 0em 0.01em #ff5, 0em 0.02em #ff5, 0em 0.02em 0.03em #ff5,
      -0.01em 0.01em #333, -0.02em 0.02em #333, -0.03em 0.03em #333,
      -0.04em 0.04em #333, -0.01em -0.01em 0.03em #000, -0.02em -0.02em 0.03em #000,
      -0.03em -0.03em 0.03em #000;
    transform: translateY(-0.025em) translateX(0.04em);
  }
}

.outline {
  background-clip: text;
  color: #ffdd40;
  animation: outline 1s ease-in-out 1.5s forwards;
}

@keyframes outline {
  from {
    text-shadow: 0em -7em 10em #fff;
  }
  to {
    text-shadow: 0 0.02em #fff, 0.02em 0 #fff, -0.02em 0 #fff, 0 -0.02em #fff;
  }
}