/* Base for the labs type studies. Each page sets --bg and --fg. */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body { min-height: 100vh; background: var(--bg); color: var(--fg); font-family: 'Inter Tight', -apple-system, 'Helvetica Neue', Arial, sans-serif; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
::selection { background: var(--fg); color: var(--bg); }

.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 20px; padding: 0 24px; }
.dead { text-decoration: line-through; opacity: 0.4; }
.avatar { display: block; image-rendering: pixelated; }

/* Hover scramble overlay. See Labs.scramble. */
.s { position: relative; }
.s.on { visibility: hidden; }
.s.on::after { content: attr(data-x); visibility: visible; position: absolute; left: 0; top: 50%; transform: translateY(-50%); white-space: nowrap; }

@media (max-width: 700px) {
  .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 12px; padding: 0 16px; }
  .grid > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
}