* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  background: #0d0d18;
  color: #d8d4c8;
  font-family: "Courier New", monospace;
}

.shell {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px;
}

.screen-frame {
  border: 4px solid #c81e1e;
  box-shadow: 0 0 0 4px #1b1b26, 0 0 40px rgba(200, 30, 30, 0.35);
  line-height: 0;
}

#game-canvas {
  display: block;
  /* as big as the window allows, keeping 960 x 600 */
  width: min(calc(100vw - 36px), calc((100vh - 90px) * 1.6));
  height: auto;
  image-rendering: pixelated;
  cursor: crosshair;
}

.controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 28px;
  font-size: 13px;
}

.controls p {
  margin: 0;
}

.controls strong {
  color: #ffd23f;
}