/*
  filename: retrotxt.css

  Loads fonts and initialises the basic page layout
  For themes and text colouring, see `css/text_colors*.css`
  For ECMA-48/ANSI-X3.64/ANSI.SYS 'SGR' codes in CSS, see `text_ecma_48.css`
  For the styling of the Options dialogue, see `css/options*.css`
*/
/* spellcheck: off */
@import "fonts_modern.css";
@import "fonts_home.css";
@import "fonts_ibm.css";

/*
  these :root variables are accessible by all CSS files,
  except `css/retrotxt_loader.css`
*/
:root {
  /* blinking text timers */
  --blink-timer: 500ms;
  --blink-fast-timer: 300ms;
}

/* Not user selectable */

@font-face {
  font-family: "mona";
  src: url("../fonts/mona.woff2") format("woff2");
  font-display: auto;
}
.font-mona {
  font-family: mona;
  font-size: 1em;
  line-height: 1em;
}

/* Fallback browser font */

.font-monospace {
  font-family: monospace;
  font-size: 1em;
  line-height: 1em;
}

/* Manipulation */

.text-1x {
  line-height: 1;
}

.text-2x {
  font-size: 125%;
  line-height: 1;
}

.text-3x {
  font-size: 150%;
  line-height: 1;
}

/*
  Primitive scanline effects only works on background not over text.
  Learned from A Pen By Oliver Kühn https://codepen.io/0x04/pen/qlayi
*/

.scanlines-dark {
  background-image: repeating-linear-gradient(
    to top,
    transparent 0,
    transparent 1px,
    rgba(255, 255, 255, 0.075) 1px,
    rgba(255, 255, 255, 0.075) 2px
  );
  /* avoid artefacts in Firefox */
  background-size: 100% 4px;
}

.scanlines-light {
  background-image: repeating-linear-gradient(
    to top,
    transparent 0,
    transparent 1px,
    rgba(0, 0, 0, 0.075) 1px,
    rgba(0, 0, 0, 0.075) 2px
  );
  /* avoid artefacts in Firefox */
  background-size: 100% 4px;
}

/*
  Blinking terminal prompt that works with
  any background/foreground colour combination
*/

.dos-cursor {
  /* 31/08/2022 -
    var(--blink-fast-timer) causes a memory leak here in Chrome 106,
    but only with https://retrotxt.com/e/preview_00.ans */
  animation: 300ms blink step-end infinite;
  text-shadow: none;
}

@keyframes blink {
  50% {
    opacity: 0.5;
  }
}
