/* FrancisOS - MS-DOS style homepage. VGA text mode: 80x25 feel, light gray on black. */
@font-face {
  font-family: 'Web437 IBM VGA 8x16';
  src: url('fonts/Web437_IBM_VGA_8x16.woff') format('woff');
  font-display: swap;
}
:root {
  --fg: #aaaaaa;      /* VGA light gray (attr 07) */
  --hi: #ffffff;      /* VGA bright white (attr 0F) */
  --dim: #555555;     /* VGA dark gray */
  --bg: #000000;
  --fs: 16px;         /* native 8x16 cell */
}
@media (min-width: 700px)  { :root { --fs: 24px; } }
@media (min-width: 1400px) { :root { --fs: 32px; } }   /* 2x: 80 columns = 1280px */

html, body { margin: 0; height: 100%; background: var(--bg); }
body {
  color: var(--fg);
  font-family: 'Web437 IBM VGA 8x16', 'Perfect DOS VGA 437', 'Lucida Console', 'Consolas',
               'DejaVu Sans Mono', 'Courier New', monospace;
  font-size: var(--fs);
  line-height: 1;               /* 8x16 cell: line height = font size */
  -webkit-font-smoothing: none;
  font-smooth: never;
  -webkit-text-size-adjust: 100%;
  cursor: text;
  overflow: hidden;
}
#screen {
  box-sizing: border-box;
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
  padding: calc(var(--fs) * .5) calc(var(--fs) * .5) calc(var(--fs) * 2);
  padding-bottom: max(calc(var(--fs) * 2), env(safe-area-inset-bottom));
  scrollbar-width: none;
}
#screen::-webkit-scrollbar { display: none; }
#out, #line { white-space: pre-wrap; word-break: break-all; }
.hi { color: var(--hi); }
.dim { color: var(--dim); }
a, .run { color: var(--hi); text-decoration: none; cursor: pointer; }
a:hover, .run:hover, a:focus-visible, .run:focus-visible { background: var(--fg); color: var(--bg); outline: none; }

/* DOS cursor: blinking underscore (insert mode). Sits on the character at the caret. */
.cursor { position: relative; display: inline-block; min-width: .5em; }
.cursor::after {
  content: ''; position: absolute; left: 0; right: 0;
  bottom: 0; height: .19em; background: var(--fg);
  animation: blink 1.07s steps(1) infinite;
}
.cursor.block::after { top: 0; bottom: 0; height: auto; mix-blend-mode: difference; background: #fff; }
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cursor::after { animation: none; } }

/* Real input stays off-screen-ish; 16px avoids iOS zoom-on-focus. */
#kbd {
  position: fixed; left: 0; bottom: 0; width: 1px; height: 1px;
  opacity: 0; border: 0; padding: 0; font-size: 16px; color: transparent; background: transparent;
}
.noscript { padding: 1em; }
.noscript a { color: var(--hi); }