/* Source Code Pro (SIL Open Font License 1.1, siehe fonts/OFL-source-code-pro.txt), lokal eingebunden. */
@font-face {
  font-family: "Source Code Pro";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/source-code-pro-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Code Pro";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/source-code-pro-latin-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Farbschema: Everforest (dunkel) */
:root {
  color-scheme: dark;
  --bg: #232a2e;
  --fg: #d3c6aa;
  --muted: #859289;
  --heading: #a7c080;
  --link: #7fbbb3;
  --link-hover: #dbbc7f;
  --font: "Source Code Pro", ui-monospace, Menlo, Consolas, monospace;
}

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

html {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 1rem;
}

::selection { background: var(--heading); color: var(--bg); }

a { color: var(--link); text-underline-offset: .22em; text-decoration-thickness: 1px; }
a:hover, a:focus-visible { color: var(--link-hover); }

h1, p, figure { margin: 0; }

.container {
  width: min(100%, 46rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.5rem;
}

h1 {
  margin-bottom: 1rem;
  font-size: 2rem;
  line-height: 1.2;
  font-weight: 700;
  color: var(--heading);
}
h1::before { content: "# "; color: var(--muted); font-weight: 400; }

.label { color: var(--muted); }

.portrait {
  display: block;
  flex: none;
  width: 9.5rem;
  height: 9.5rem;
  border-radius: 50%;
  object-fit: cover;
}

@media (max-width: 34rem) {
  .container { flex-direction: column-reverse; align-items: flex-start; gap: 1.4rem; }
  h1 { font-size: 1.6rem; }
}