landing.css

@import url('https://fonts.googleapis.com/css2?family=Rubik+Mono+One&display=swap');

:root {
  --letter-expand-duration: 0.5s;
  --subscribe-link-slide-duration: 0.5s;
  --letter-color: var(--accent-color);
  --feed-link-color: var(--letter-color);
}

body#landing {

  nav a {
    position: fixed;
    font-size: clamp(1rem, 5vw, 30vh);

    &#about {
      bottom: 2vw;
      left: 2vw;
    }

    &#posts {
      bottom: 2vw;
      right: 2vw;
    }
  }

  div.expansion#landing-expansion {

    &>div.components {
      color: var(--accent-color);

      &>span {
        margin: 0;
        font-family: 'Rubik Mono One', monospace;
        transition-property: width, margin;
        font-size: clamp(1rem, 10vw, 20vh);
        width: 1ch;
      }
    }

    &>a.link#feed {
      font-family: 'Rubik', sans-serif;
      font-style: italic;
      font-size: clamp(1rem, 5vw, 20vh);
    }

    &:hover,
    &:has(a.link#feed:focus) {
      div.components {
        span {
          margin: 0 0.15ch;

          &#watch {
            width: 5ch;
          }

          &#this {
            width: 4ch;
          }

          &#space {
            width: 5ch;
          }
        }
      }
    }
  }
}