:root {
  --main-font-size: 14vw;
  --sub-font-size: 9vw;
}

@font-face {
  font-family: MonaSans;
  src: url('/mona-sans.woff2') format('woff2 supports variations'),
    url('/mona-sans.woff2') format('woff2-variations');
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-display: swap;
}

@font-face {
  font-family: Monaspace;
  src: url('/monaspace-neon.woff2') format('woff2');
  font-weight: 200 800;
  font-stretch: 100% 125%;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding:0; }

*:focus {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

html { font-family: MonaSans, sans-serif; }

body { padding: 3rem 1rem; height: 100svh; }

a { color: currentColor; text-underline-offset: 2px; }

main {
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 8ch;
  height: 100%;
  text-align: right;
  font-family: Monaspace, monospace;
  font-size: var(--main-font-size);
  font-variation-settings: 'wght' 600, 'wdth' 125;
}

footer {
  font-family: MonaSans, sans-serif;
  font-size: initial;
  font-variation-settings: 'wght' 500, 'wdth' 125;
  transition: opacity .5s ease-in;

  * ~ * { margin-left: 1rem; }
}

section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 75svh;
  font-size: initial;
}

.loading :where(footer, #d, #hms, #at) { opacity: 0; }

#d {
  font-size: var(--sub-font-size);
  font-variation-settings: 'wght' 300, 'wdth' 110;
  transition: opacity 1s;
}

#hms { font-size: var(--main-font-size); transition: opacity 1s .2s ease-in; }

#at {
  margin-top: 2rem;
  display: block;
  font-family: MonaSans, sans-serif;
  font-variation-settings: 'ital' 10, 'wdth' 125;
  transition: opacity .5s .5s ease-in;
}