/* quaxes.com — minimal personal site */

:root {
  --bg: #fafaf7;
  --fg: #1a1a1a;
  --muted: #666;
  --rule: #e5e5e0;
  --link: #2a5db0;
  --tag-bg: #efece4;
  --tag-fg: #555;
  --pad: 1rem;
  --col: 640px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--fg);
  background: var(--bg);
  margin: 0;
  padding: 2.5rem var(--pad) 4rem;
}

.wrap { max-width: var(--col); margin: 0 auto; }

a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
a:hover { text-decoration: none; }

h1 { font-size: 1.5rem; margin: 0 0 .25rem; font-weight: 600; }
h2 { font-size: 1rem; margin: 2rem 0 .75rem; font-weight: 600; letter-spacing: .02em; color: var(--muted); border-bottom: 1px solid var(--rule); padding-bottom: .25rem; }
h3 { font-size: 1rem; margin: 0 0 .25rem; font-weight: 600; }

p { margin: .5rem 0; }

header.intro { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 2rem; }
header.intro img.avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; background: var(--rule); flex-shrink: 0; }
header.intro .bio { flex: 1; min-width: 0; }
header.intro .meta { color: var(--muted); font-size: .9rem; margin-top: .25rem; }

article.entry { margin: .9rem 0; }
article.entry .desc { color: var(--muted); margin: .1rem 0; font-size: .95rem; }
article.entry .tags { font-size: .8rem; color: var(--tag-fg); }
article.entry .tags span { background: var(--tag-bg); padding: 1px 6px; border-radius: 3px; margin-right: 4px; }

footer { margin-top: 4rem; padding-top: 1rem; border-top: 1px solid var(--rule); color: var(--muted); font-size: .85rem; }

/* games gallery */
.gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-top: 1.5rem; }
.card { border: 1px solid var(--rule); border-radius: 4px; overflow: hidden; background: #fff; display: flex; flex-direction: column; }
.card img { width: 100%; height: 160px; object-fit: cover; background: var(--rule); display: block; }
.card .body { padding: .75rem .9rem 1rem; }
.card h3 { margin-bottom: .25rem; }
.card .desc { color: var(--muted); font-size: .9rem; margin: .25rem 0 .6rem; }
.card .play { font-size: .9rem; }

.backlink { font-size: .9rem; margin-bottom: 1rem; display: inline-block; }

/* mobile */
@media (max-width: 560px) {
  body { padding-top: 1.5rem; }
  header.intro { flex-direction: column; align-items: flex-start; }
  .gallery { grid-template-columns: 1fr; }
}

/* dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #15161a;
    --fg: #e8e6e0;
    --muted: #9b988f;
    --rule: #2a2c33;
    --link: #8ab4ff;
    --tag-bg: #23252b;
    --tag-fg: #b8b5ad;
  }
  .card { background: #1b1d22; }
}