ultra.css

* {
  box-sizing: border-box;
}

a {
  border-radius: 100%;
  display: inline-flex;
  padding: 1ch;
  text-decoration: dotted line-through;
}

html {
  font-family: sans-serif;
  font-size: max(3ch, 3vmax + 2vmin);
  line-height: 1.618;
}

body {
  margin: auto;
  overflow-wrap: anywhere;
  padding: 3ch;
}

figure {
  align-items: space-between;
  contain: layout;
  display: flex;
  justify-content: center; 
  flex-flow: column;
  min-height: 100vh;
}

figcaption {
  flex-basis: calc(10em / 3);
  font-family: monospace;
  line-height: calc(4 / 3);
  margin: auto;
  text-transform: lowercase;
}

ul {
  align-items: center;
  contain: layout;
  display: flex;
  justify-content: space-around;
  font-size: 1.236em;
}

ul ~ ul {
 font-size: 1em; 
}

li {
  display: inline-flex;
}

abbr {
  font-size: 1.618em;
  line-height: 1;
  margin: auto;
}

small {
  font-size: .8rem;
}

@media (orientation: portrait) {
  ul {
    flex-flow: column;
  }
}

@media (orientation: landscape) {
  figcaption {
    writing-mode: sideways-lr;
  }
}