*{
  margin: 0; padding: 0;
}
body {
  height: 100vh;
  background-color: #e3edf7;
  display: flex;
  justify-content: center;
  align-items: center;
}
.hwContainer span {
  display: inline-block;
  font-family: sans-serif;
  font-size: 4em;
  font-weight: bold;
  color: #e3edf7; /* same as background color*/
  text-shadow: 1px 1px #ccc, -1px -1px #fff;
  animation: zoom 0.7s ease-in forwards;
}
.hwContainer span:nth-of-type(1){
  animation-delay: 1s;
}
.hwContainer span:nth-of-type(2){
  animation-delay: 1.05s;
}
.hwContainer span:nth-of-type(3){
  animation-delay: 1.10s;
}
.hwContainer span:nth-of-type(4){
  animation-delay: 1.15s;
}
.hwContainer span:nth-of-type(5){
  animation-delay: 1.20s;
}
.hwContainer span:nth-of-type(6){
  animation-delay: 1.25s;
}
.hwContainer span:nth-of-type(7){
  animation-delay: 1.30s;
}
.hwContainer span:nth-of-type(8){
  animation-delay: 1.35s;
}
.hwContainer span:nth-of-type(9){
  animation-delay: 1.40s;
}
.hwContainer span:nth-of-type(10){
  animation-delay: 1.45s;
}
.hwContainer span:nth-of-type(11){
  animation-delay: 1.50s;
}

@keyframes zoom {
  25%{
    transform: scale(0.7);
    color: #fdac53;
  }
50% {
  color: #00a170;
  text-shadow: none;
}
75%{
  transform: scale(1.6);
  text-shadow: none;
}
100% {
  transform: scale(1);
}
}