style.css

@font-face {
  font-family: "Inconsolata";
  src: url("https://ggayane.github.io/css-experiments/Inconsolata-VF.ttf");
  font-weight: 275 900;
  font-stretch: 50% 200%;
}

body {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #000119;
  color: white;
  font-size: 8em;
  font-family: "Inconsolata";
}

main {
  white-space: nowrap;
  width: 80vw;
  margin: auto;
}

.static {
  font-size: 3vw;
  font-variation-settings: "wght" 900, "wdth" 200;
}

.variable {
  display: flex;
  font-variation-settings: "wght" 275, "wdth" 50;
  text-align: center;
  animation: swapthings 3s infinite both cubic-bezier(0.17, 0.04, 0.04, 0.99);
}

.work {
  animation: swapthings2 3s infinite both cubic-bezier(0.17, 0.04, 0.04, 0.99);
  color: #00a2ff00;
  background-clip: text;
  background-image: linear-gradient(to right, #33ff00, #d0ff00);
}

.study {
  animation: swapthings2 3s infinite both cubic-bezier(0.17, 0.04, 0.04, 0.99);
  color: #00a2ff00;
  background-clip: text;
  background-image: linear-gradient(to right, #ab11f3, #00ccff);
}

.life {
  background-clip: text;
  background-image: linear-gradient(
    to right,
    #09f1b8,
    #00a2ff,
    #ff00d2,
    #fed90f
  );
  color: #000119;
  -webkit-text-stroke-color: transparent;
  -webkit-text-stroke-width: calc(1em / 16);
}

.work,
.study,
.life {
  font-size: 8vw;
}

@keyframes swapthings {
  0% {
    font-variation-settings: "wght" 275, "wdth" 50;
  }

  50% {
    font-variation-settings: "wght" 900, "wdth" 200;
  }

  100% {
    font-variation-settings: "wght" 275, "wdth" 50;
  }
}

@keyframes swapthings2 {
  0% {
    font-variation-settings: "wght" 900, "wdth" 200;
  }

  50% {
    font-variation-settings: "wght" 275, "wdth" 50;
  }

  100% {
    font-variation-settings: "wght" 900, "wdth" 200;
  }
}

@media screen and (max-width: 600px) {
  .variable {
    font-size: 4vw;
  }
}