d.css

* {
  box-sizing: border-box;
}

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

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

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

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;
}

menu {
  align-items: center;
  display: flex;
}

li {
  display: inline-flex;
}

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

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

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