@import url('https://fonts.googleapis.com/css2?family=Fira+Mono:wght@400;500;700&display=swap');

:root {
  --bg-dark: oklch(0.1 0 264);
  --bg: oklch(0.15 0 264);
  --bg-light: oklch(0.2 0 264);
  --text: oklch(0.96 0 264);
  --text-muted: oklch(0.76 0 264);
  --highlight: oklch(0.5 0 264);
  --border: oklch(0.4 0 264);
  --border-muted: oklch(0.3 0 264);
  --primary: oklch(0.76 0.1 264);
  --secondary: oklch(0.76 0.1 84);
  --danger: oklch(0.7 0.05 30);
  --warning: oklch(0.7 0.05 100);
  --success: oklch(0.7 0.05 160);
  --info: oklch(0.7 0.05 260);
}

body.matrix {
  --bg-dark: oklch(0.04 0.01 148);
  --bg: oklch(0.07 0.015 148);
  --bg-light: oklch(0.11 0.02 148);
  --text: oklch(0.93 0.18 145);
  --text-muted: oklch(0.72 0.11 145);
  --highlight: oklch(0.78 0.24 145);
  --border: oklch(0.35 0.08 145);
  --border-muted: oklch(0.22 0.05 145);
  --primary: oklch(0.78 0.24 145);
  --secondary: oklch(0.62 0.18 155);
  --danger: oklch(0.68 0.21 25);
  --warning: oklch(0.84 0.19 105);
  --success: oklch(0.76 0.23 145);
  --info: oklch(0.73 0.17 220);
}

html, body {
  font-family: "Fira Mono", monospace;
  color: var(--text);
  background-color: var(--bg-dark);
  margin:0;
}

header {
  border-bottom:2px solid var(--border);
  position: fixed;
  top:0;
  left:0;
  width:100%;
  background-color: var(--bg-dark);
  display:flex;
  height:55px;
  align-items:center;
}

header h1 {
  margin:0 15px;
}

#display {
  margin:60px 5px;
}

.label {
  margin-right: 6px;
  white-space: nowrap;
  display:inline;
}

.input {
  display:inline;
  outline: none;
  word-break: break-word;
  white-space: pre-wrap;
  min-width:100%;
}

p {
  margin:0;
  padding:0;
}

.input {
  caret-color: var(--primary);
}

::selection {
  background: var(--primary);
  color: var(--bg-dark);
}

#matrix-canvas {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: black;
}