/* ============================================================
   site.css — shared base for every 640x480 "window" page
   Do NOT put page-specific colors/positions in here. Each page
   gets its own tiny stylesheet (resources/<page>/style.css) for
   that. This file only holds things every page has in common.
   ============================================================ */

@font-face {
  font-family: 'vcr_osd_mono';
  src: url(vcr_osd_mono/vcr_osd_mono_1.001-webfont.woff2) format('woff2'),
       url(vcr_osd_mono/vcr_osd_mono_1.001-webfont.woff) format('woff');
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  display: block;
  background-color: black;
  font-family: 'vcr_osd_mono', monospace;
}

a:link { color: #CCCCFF; }
a:visited { color: #CC66FF; }

/* Outer wrapper that centers the 640x480 window on the page.
   Every page body should contain exactly one of these. */
.page-wrapper {
  margin-left: auto;
  margin-right: auto;
  margin-top: 15px;
  width: 640px;
  height: 480px;
}

/* The window itself. Fixed 640x480, always centered via
   .page-wrapper above. Each page sets its own look by adding a
   `background` rule for #content in its own style.css — that's
   the one line to touch to swap a page's background image. */
#content {
  position: relative;
  width: 640px;
  height: 480px;
  overflow: hidden;
  background-color: black; /* fallback until a page overrides it */
}

/* Hand-drawn frame overlay, drawn on top of everything inside
   #content. Defaults to the shared border.png; a page can swap
   it for its own art (like index does with overlay.png) simply
   by not using this class, or by overriding background-image
   in its own stylesheet. */
.border {
  position: absolute;
  inset: 0;
  background-image: url(/resources/common/border.png);
  background-size: 100% 100%;
  pointer-events: none;
}

/* A scrollable pane inside the window. Use on its own for a
   small scrollable panel (positioned + sized per page), or with
   .panel--full for a single pane that fills the whole window. */
.panel {
  position: absolute;
  overflow: auto;
  color: white;
}

.panel--full {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 15px;
}