body,
h1,
h2 {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  line-height: 1;
  color: #555;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: linear-gradient(90deg, #aaa, transparent, #aaa), linear-gradient(0deg, #aaa, #fff, #ccc);
}

svg {
  width: 80%;
  max-width: 640px;
}

.score {
  position: absolute;
  top: 0;
  left: 0;
}

#Q {
  animation: 3s reverse Q;
}

@keyframes Q {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0.01;
    transform: translateX(-50px);
  }
}
#J {
  animation: 3s reverse J;
}

@keyframes J {
  0% {
    opacity: 1;
    transform: translate(0);
  }
  100% {
    opacity: 0.01;
    transform: translate(-50px, 40px);
  }
}
#U {
  animation: 3s reverse U;
}

@keyframes U {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0.01;
    transform: translateX(-25px);
  }
}
#N {
  animation: 3s reverse N;
}

@keyframes N {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0.01;
    transform: translateX(25px);
  }
}
#E {
  animation: 3s reverse E;
}

@keyframes E {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0.01;
    transform: translateX(50px);
  }
}
#I {
  animation: 3s reverse I;
}

@keyframes I {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0.01;
    transform: translateX(80px);
  }
}