@font-face {
  font-family: 'Orbitron';
  src: url('../fonts/orbitron.woff2') format('woff2');
  font-weight: 400 900;
  font-display: swap;
}

:root {
  --bz-bg: #000;
  --bz-surface: #0b0b12;
  --bz-text: #e8e8ee;
  --bz-muted: #8a8a99;
  --bz-accent: #9fd3ff;
  --bz-line: rgba(255, 255, 255, .12);
  --bz-display: 'Orbitron', 'Eurostile', 'Segoe UI', system-ui, sans-serif;
  --bz-body: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bz-bg); }
body {
  margin: 0;
  background: var(--bz-bg);
  color: var(--bz-text);
  font: 1rem/1.65 var(--bz-body);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--bz-display); font-weight: 700; letter-spacing: .06em; line-height: 1.2; color: #fff; }
a { color: var(--bz-accent); text-underline-offset: .2em; }
a:hover, a:focus { color: #fff; text-shadow: 0 0 8px rgba(159, 211, 255, .6); }
img { max-width: 100%; height: auto; }

input, select, textarea, button {
  font: inherit; color: inherit;
  background: var(--bz-surface);
  border: 1px solid var(--bz-line);
  border-radius: 4px;
  padding: .55em .8em;
}
input:focus, select:focus, textarea:focus { outline: 1px solid var(--bz-accent); border-color: var(--bz-accent); }
button, input[type="submit"], .button {
  cursor: pointer; font-family: var(--bz-display); letter-spacing: .1em; text-transform: uppercase;
  border-color: rgba(255, 255, 255, .5); background: transparent; color: #fff;
}
button:hover, input[type="submit"]:hover, .button:hover { box-shadow: 0 0 14px rgba(255, 255, 255, .35); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}
.visually-hidden.focusable:focus { position: static !important; width: auto; height: auto; clip: auto; }