/*
 * Kentasmic Games. The arcade itself is in arcade.css; this is the page around it.
 */

:root {
  --ink: #f1ecff;
  --ink-soft: #b9b0d6;
  --font-display: "Big Shoulders", "Arial Narrow", sans-serif;
  --font-body: "Atkinson Hyperlegible Next", system-ui, sans-serif;
  --step--1: 0.875rem;
  --step-0: 1rem;
  --gutter: clamp(16px, 4vw, 48px);
  color-scheme: dark;
}

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

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

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.55;
  color: var(--ink);
}

main { flex: 1; }

img { max-width: 100%; display: block; }

h1 { margin: 0; }
p { margin: 0; }

:focus-visible { outline: 3px solid #5ff3ff; outline-offset: 3px; border-radius: 2px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.footer {
  padding: 24px var(--gutter);
  color: var(--ink-soft);
  font-size: var(--step--1);
}