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

@font-face {
  font-family: 'Commissioner';
  src: url('/static/fonts/commissioner/Commissioner-Variable.ttf') format('truetype-variations');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --bg: #080402;
  --panel: rgba(20, 9, 3, 0.86);
  --amber: #fea712;
  --orange: #e76219;
  --cream: #fddca9;
  --dim: #aa6022;
  --line: rgba(254, 167, 18, 0.28);
  --error: #ef593c;
  --font: 'IBM Plex Mono', Menlo, 'SFMono-Regular', Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  height: 100dvh;
  margin: 0;
  overflow: hidden;
  background: var(--bg);
  color: var(--amber);
  font-family: var(--font);
}

#experience,
#terminal-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  height: 100dvh;
}

#terminal-canvas {
  display: block;
  z-index: 1;
  outline: 0;
  cursor: text;
  touch-action: none;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}