/* Huskworks's page: the HUD's colours, Orbitron for the name and Saira for
   the words (the user's picks), and little else (the user's: the first,
   panels and lists, was messy). */

@font-face { font-family: "Orbitron"; src: url("fonts/orbitron.ttf") format("truetype"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Saira"; src: url("fonts/saira.ttf") format("truetype"); font-weight: 100 900; font-stretch: 50% 125%; font-display: swap; }

:root {
  --ground: #05080a;
  --rule: #425c61;
  --print: #80a8a0;
  --amber: #ffb340;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--ground); }
body {
  color: var(--print);
  font: 19px/1.6 "Saira", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

main {
  max-width: 960px;
  margin: 0 auto;
  padding: 18vh 16px 64px;
  text-align: center;
}

h1 {
  margin: 0;
  font: 700 clamp(38px, 8.5vw, 84px)/1 "Orbitron", sans-serif;
  letter-spacing: 0.06em;
  color: var(--amber);
  text-shadow: 0 0 6px rgba(255, 179, 64, 0.5), 0 0 22px rgba(255, 179, 64, 0.22);
}

.line { margin: 28px 0 56px; font-size: 19px; }

/* (The clip, framed: a rule round it, a little ground between, the HUD's
   amber at two corners.) */
.shot {
  position: relative;
  margin: 0;
  padding: 8px;
  border: 1px solid var(--rule);
}
.shot::before, .shot::after { content: ""; position: absolute; width: 18px; height: 18px; border: 2px solid var(--amber); }
.shot::before { top: -3px; left: -3px; border-right: 0; border-bottom: 0; }
.shot::after { bottom: -3px; right: -3px; border-left: 0; border-top: 0; }
.shot video { display: block; width: 100%; height: auto; image-rendering: pixelated; background: #000; }

/* (Where it plays: a line icon each, amber, its name under it.) */
.devices { display: flex; justify-content: center; gap: clamp(28px, 7vw, 72px); margin: 48px 0 0; }
.device { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.device svg { width: 56px; height: 46px; fill: none; stroke: var(--amber); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 5px rgba(255, 179, 64, 0.35)); }
.device span { font: 500 14px/1 "Saira", sans-serif; letter-spacing: 0.18em; text-transform: uppercase; color: var(--print); }

.status {
  margin: 40px 0 0;
  font: 400 13px/1 "Saira", sans-serif;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--rule);
}

.links { display: flex; justify-content: center; flex-wrap: wrap; gap: 28px; margin-top: 20px; }
.links:empty { display: none; }
.links a { font: 500 14px/1 "Saira", sans-serif; letter-spacing: 0.18em; color: var(--amber); text-decoration: none; }
.links a:hover, .links a:focus-visible { text-shadow: 0 0 8px rgba(255, 179, 64, 0.6); }

@media (max-width: 520px) {
  main { padding-top: 12vh; }
  .line { font-size: 17px; margin-bottom: 40px; }
}