@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,700;0,800;1,100&display=swap");

.box-with-text h2 {
  position: relative;
  text-transform: uppercase;
  font-size: 17em;
  font-weight: bold;
  color: white;
  font-family: "Poppins", sans-serif;
  margin: 0px;
}

.box-with-text h2 {
  color: transparent;
  -webkit-text-stroke: 5px rgb(153, 174, 250);
}

.box-with-text h2::before {
  position: absolute;
  content: attr(data-text);
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  color: #fff;
  -webkit-text-stroke: 0px rgb(153, 174, 250);
  /*border-right: 5px solid #fff;*/
  overflow: hidden;
  animation: animate 6s linear infinite;
}

/*animação de preenchimento do nome*/

@keyframes animate {
  0%,
  10%,
  20% {
    width: 0;
  }
  70%,
  90% {
    width: 100%;
  }
}

@media (max-width: 900px) {
  .box-with-text h2 {
    font-size: 8em;
  }
}

@media (max-width: 500px) {
  .box-with-text h2 {
    font-size: 8em;
  }
}

@media (max-width: 360px) {
  .box-with-text h2 {
    font-size: 7em;
  }
}