:root    { --fg: #333; --bg: #fff; --hi: #7eb09b; --lo: #ccc; }
*        { box-sizing: border-box; }
html     { font: 16px/1.25 'Courier Prime', monospace; height: 100vh; }
body     { margin: 0; height: 100%; color: var(--fg); display: flex; align-items: center; justify-content: center; }
p        { margin: 0; }
p:not(:last-child) { margin-bottom: 2.5rem; }
a        { color: var(--hi); text-decoration-color: var(--hi); transition: 0.25s all; text-decoration-thickness: 0.25rem; }
a:hover  { color: var(--bg); background: var(--hi); }
a:active { background: var(--fg); color: var(--bg); text-decoration-color: var(--fg); }
.hi      { color: var(--hi); }
.lo      { color: var(--lo); }
pre      { font-weight: 700; margin: 0; }
.text    { display: flex; flex-flow: column nowrap; justify-content: center; }

.row     { display: flex; flex-flow: row nowrap; }

@media (max-width: 576px) {
  html { font-size: 12px; }
  #portrait { height: 105px; }
}

#portrait { margin-right: 2ch; }
#portrait path { fill: none; stroke: #333; stroke-width: 2; transition: 0.25s all ease-in-out; }
#portrait:hover #eyebrow-right { transform: translateY(1px); }
#portrait:hover #eyebrow-left  { transform: translateY(-2px); }