* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: #0a0a0a;
  color: #d4d4d4;
  font: 15px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  overflow: hidden;
}

/* The whole viewport — room, monitor and glass — is one WebGL canvas (src/crt.js). */
#crt, #flat {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}
/* no WebGL: the flat screen sits where the glass would be */
#flat { inset: auto; }

/* ---- mail link ----------------------------------------------------------
   The address is painted on the screen in pixel type. This link sits exactly
   over it: invisible, but clickable, focusable and readable by screen
   readers. Without JS it is shown as plain text instead. */
.mail {
  position: fixed;
  left: 24px;
  bottom: 24px;
  color: #d4d4d4;
  text-decoration: none;
  z-index: 1;
}
.js .mail {
  bottom: auto;
  color: transparent;
  font-size: 1px;
  overflow: hidden;
}
.mail:focus-visible { outline: 1px solid #8a8a8a; outline-offset: 4px; }

.fallback-logo {
  position: fixed;
  top: 50%;
  left: 50%;
  width: min(56vw, 520px);
  transform: translate(-50%, -50%);
  image-rendering: pixelated;
}

/* type-to-screen: the real input is invisible, the screen draws what is typed */
#say {
  position: fixed;
  left: 24px;
  bottom: 24px;
  width: 1px;
  height: 1px;
  opacity: 0;
  border: 0;
  padding: 0;
  pointer-events: none;
}

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