/**
 * @file Base styles of every page: the Tantale's palette (#050505, amber #FFB000, alert #FF2A2A, cold
 * #7FD8FF), controls and scan lines. Pages add their own stylesheets.
 */
:root {
  --bg: #050505;
  --bg2: #0d0b07;
  --panel: #12100b;
  --line: #3a2e12;
  --amber: #ffb000;
  --amber2: #c98a00;
  --dim: #7a5a10;
  --text: #ffcf66;
  --red: #ff2a2a;
  --cyan: #7fd8ff;
  --green: #8fd694;
  --grey: #555;
  --mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--mono);
}
body {
  -webkit-font-smoothing: antialiased;
}
button,
input,
select,
textarea {
  font-family: var(--mono);
  font-size: inherit;
}
button {
  background: transparent;
  color: var(--amber);
  border: 1px solid var(--amber2);
  padding: 0.45em 0.8em;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
button:hover {
  background: rgba(255, 176, 0, 0.1);
}
button:active {
  background: rgba(255, 176, 0, 0.25);
}
button.red {
  color: var(--red);
  border-color: var(--red);
}
button.cyan {
  color: var(--cyan);
  border-color: var(--cyan);
}
button.on {
  background: var(--amber);
  color: #000;
}
button:disabled {
  opacity: 0.35;
  cursor: default;
}
input,
select,
textarea {
  background: #000;
  color: var(--text);
  border: 1px solid var(--line);
  padding: 0.4em 0.5em;
}
a {
  color: var(--amber);
}

/* Scan lines over the whole page. */
.scanlines::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 900;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 3px);
}