/* kenlet.at: C64 techdemo homepage. Palette: Pepto C64 (VIC-II). */
:root {
  color-scheme: dark;
  --black: #000000;
  --white: #ffffff;
  --blue: #352879;
  --light-blue: #6c5eb5;
  --light-grey: #959595;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--black);
  color: var(--light-grey);
  font: 16px/1.5 ui-monospace, "DejaVu Sans Mono", "Menlo", monospace;
}

body {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 2rem 1rem;
}

a { color: var(--white); }

a:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 2px;
}

/* No-JS fallback: a plain, readable page. */
#border, #screen { display: none; }
.copy h1 { color: var(--white); margin: 0 0 .5rem; font-size: 2rem; letter-spacing: .1em; }
#services { padding-left: 1.2rem; }

/* JS on: the canvas demo is the page, the HTML becomes an accessible overlay. */
.js body { padding: 0; overflow: hidden; }
.js #border {
  display: block;
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  image-rendering: pixelated;
}
.js .stage { position: relative; }
.js #screen {
  display: block;
  position: relative;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.js .copy {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.js #services {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  visibility: hidden;
}
.js.demo #services { visibility: visible; }
.js #services li,
.js .hoster {
  position: absolute;
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  color: transparent;
}
.js #services li span { pointer-events: none; }
.js #services a,
.js .hoster a {
  display: block;
  width: 100%;
  height: 100%;
  color: transparent;
  text-decoration: none;
}
.js .hoster { visibility: hidden; }
.js.demo .hoster { visibility: visible; }