@font-face { font-family: "JetBrains Mono"; font-weight: 400; font-display: swap; src: url(fonts/jetbrains-mono-400.woff2) format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 700; font-display: swap; src: url(fonts/jetbrains-mono-700.woff2) format("woff2"); }

:root { --bg: #1e1e1e; }

body {
  margin: 0;
  padding: 4rem 16px;
  max-width: 560px;
  background: var(--bg);
  color: #ddd;
  font: 15px/1.6 "JetBrains Mono", Consolas, ui-monospace, monospace;
}

@media (min-width: 1100px) {
  body { margin-left: 8vw; }
}

/* phones: centre vertically instead of a fixed top/bottom padding that forces a scroll */
@media (max-width: 600px) {
  body {
    box-sizing: border-box;
    min-height: 100dvh;
    padding-block: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  h2 { margin-top: 1.75rem; }
}

/* outline in the background colour keeps text readable where it overlaps the portrait.
   set on a as well, otherwise visited links fall back to the text colour */
body, a {
  -webkit-text-stroke: 4px var(--bg);
  paint-order: stroke fill;
}

/* text-stroke would paint over text-decoration */
a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid;
}

h2 { font-size: 1em; margin: 2.5rem 0 .5rem; }

table { width: 100%; border-collapse: collapse; }
td:last-child { text-align: right; white-space: nowrap; padding-left: 1rem; }
span { white-space: nowrap; } /* text only wraps between spans */

/* links: all in one line, or all stacked once they don't fit (32ch = their text length) */
main { container-type: inline-size; }
@container (width < 32ch) {
  .links { display: flex; flex-direction: column; align-items: flex-start; }
}

.portrait {
  position: fixed;
  right: 4vw;
  bottom: 0;
  z-index: -1;
  width: min(70vh, 92vw, 800px);
  height: auto;
  transition: opacity .4s;
}

.portrait.dim { opacity: .3; }

#bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  pointer-events: none;
}