@font-face {
  font-family: 'Pictochat';
  src: url('/src/fonts/Pictochat.woff2') format('woff2'),
       url('/src/fonts/Pictochat.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #ffffff;
  --ink: #1c1c1e;
  --brand: #FF29A7;
  --ink-soft: color-mix(in srgb, var(--ink) 64%, var(--paper));
  --edge: color-mix(in srgb, var(--ink) 52%, var(--paper));
  --brand-dark: color-mix(in srgb, var(--brand) 60%, var(--ink));
  --edge-w: 2px;
  --ring-w: 2px;
  --pad: 16px;
  --wallpaper: url('/src/sprites/icons/pattern-1.png');
}

* { box-sizing: border-box; }
html {
  min-height: 100%;
  background-color: var(--paper);
  background-image: var(--wallpaper);
  background-size: 22px 22px;
  background-repeat: repeat;
  image-rendering: pixelated;
}
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background: transparent;
  font-family: 'Pictochat', 'Courier New', ui-monospace, monospace;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: none;
  text-rendering: geometricPrecision;
}
main {
  width: min(720px, 100%);
  margin: 0 auto;
  padding: max(28px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(64px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
}
header, article {
  padding: var(--pad);
  border: var(--edge-w) solid var(--edge);
  box-shadow: inset 0 0 0 var(--ring-w) var(--paper);
  background: var(--paper);
}
header { margin-bottom: 16px; }
h1, h2 { margin: 0; font-size: 1rem; font-weight: 400; text-transform: uppercase; letter-spacing: 0.06em; }
h2 { margin-top: 28px; }
p, ol, ul { margin: 16px 0 0; }
li + li { margin-top: 16px; }
nav { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 28px; }
a { color: var(--brand-dark); }
header nav { margin-top: 16px; }

@media (max-width: 520px) {
  main { padding-left: 12px; padding-right: 12px; }
}