<div class="container">
  <div>
    <p id="hello-world">Hello World!</p>
  </div>
</div>

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

body {
  height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  font: 8vw "Merienda", cursive;
  text-shadow: 5px 3px 3px blue;
  background-color: green;
  color: aqua;
}

@keyframes fontzoom {
  0%,
  100% {
    font-size: 0px;
  }

  75% {
    font-size: 120px;
  }
}

@media screen and (max-width: 750px) {
  @keyframes fontzoom {
    0%,
    100% {
      font-size: 0px;
    }

    75% {
      font-size: 75px;
    }
  }
}

@media screen and (max-width: 500px) {
  @keyframes fontzoom {
    0%,
    100% {
      font-size: 0px;
    }

    75% {
      font-size: 40px;
    }
  }
}

document.getElementById("hello-world").style.animation =
  "fontzoom 20s infinite";