<style>/*<![CDATA[ */
/* Please ❤ this if you like it! */

@import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@300&display=swap");

* {
  outline: none;
  box-sizing: border-box;
}

body {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  min-height: 100vh;
  background-color: steelblue;
  color: white;
  font-family: "Source Code Pro", monospace;
  font-weight: 300;
  background-image: url("https://images.pexels.com/photos/673857/pexels-photo-673857.jpeg?auto=compress&cs=tinysrgb&h=1280&w=1920"); /* Photo by Irina Iriser from Pexels */
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-blend-mode: multiply;
}

h1 {
  font-size: 3vw;
}

.typing-text {
  width: 14ch;
  white-space: nowrap;
  overflow: hidden;
  border-right: 3px solid;
  font-size: 6vw;
  animation: typing 2s steps(14) infinite alternate,
    blink 0.4s step-end infinite alternate;
  text-shadow: 0px 0px 3px white;
}

@keyframes typing {
  from {
    width: 0;
  }
}

@keyframes blink {
  50% {
    border-color: transparent;
  }
}

@media (max-width: 767px) {
  h1 {
    font-size: 4vw;
  }
  .typing-text {
    font-size: 8vw;
  }
}/*]]>*/</style>

<script>//<![CDATA[
        const text = document.querySelector(".sec-text");
        const textLoad = () => {
            setTimeout(() => {
                text.textContent = "Freelancer";
            }, 0);
            setTimeout(() => {
                text.textContent = "Blogger";
            }, 4000);
            setTimeout(() => {
                text.textContent = "YouTuber";
            }, 8000); //1s = 1000 milliseconds
        }
        textLoad();
        setInterval(textLoad, 12000);
//]]></script>