@font-face {
  font-family: "DirtyLine";
  src: url("../fonts/Dirtyline 36daysoftype 2022.woff") format("woff"),
    url("../fonts/Dirtyline 36daysoftype 2022.woff2") format("woff2"),
    url("../fonts/Dirtyline 36daysoftype 2022.ttf") format("truetype");
  font-style: normal;
  font-weight: normal;
  text-rendering: optimizeLegibility;
}

#text_change {
  color: white;
  font-size: 10em;
}

.words {
  overflow: hidden;
  height: 1.4em;
}
.words_rotating_span {
  display: block;
  width: 100%;
  height: 100%;
  padding-left: 10px;
  color: white;
  animation: spin_words 2.5s ease-out forwards;
  display: grid;
  justify-content: center;
  align-content: center;
  justify-items: center;
  align-items: center;
}

#hello {
  font-family: DirtyLine;
}

#world {
  font-family: DirtyLine;
}

#main_hello_world {
  display: flex;
}

@keyframes spin_words {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-1900%);
  }
}

.progress-loader-helloworld {
  margin-top: 5em;
  width: 20%;
  background: rgba(236, 236, 238, 0.253);
  height: 3px;
  border-radius: 7px;
}

.progress-helloworld {
  content: "";
  width: 0%;
  height: 3px;
  border-radius: 7px;
  background: rgb(255, 255, 255);
  transition: 0.5s;
  -webkit-transition: 0.5s;
  transition: width 3s ease-in-out;
  animation: progress_bar_loading 2.5s ease-in-out forwards;
}

@keyframes progress_bar_loading {
  0% {
    width: 0%;
  }

  100% {
    width: 100%;
  }
}

/* !Responsive */
@media screen and (max-width: 600px) {
  .progress-loader-helloworld {
    margin-top: 40px;
  }

  .words {
    height: 0.4em;
  }
}