@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@699;700&display=swap"); :root { --lower: 100; --upper: 700; } body { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #70c9db; } h1 { font-family: 'Roboto Mono', monospace; font-size: 7rem; text-align: center; position: absolute; top: 50%; left: 50%; white-space: nowrap; transform: translate(-50%, -50%) translate(calc(var(--x, 0) * 1%), calc(var(--y, 0) * 1%)); font-variation-settings: 'wght' var(--lower); margin: 0; } h1 span { color: hsla(180, 100%, 90%, var(--alpha-l)); animation: rise 2.25s infinite ease-in-out; animation-delay: calc((var(--index) - 6) * 0.225s); display: inline-block; } @keyframes rise { 50% { font-variation-settings: 'wght' var(--upper); color: hsla(180, 100%, 100%, var(--alpha-u)); transform: translate(0, -15%); } } ^_^ AWSOME API