:root {
  color-scheme: dark;
  font-family:
    Consolas,
    "Courier New",
    monospace;

  background: #070b0c;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;

  width: 100%;
  height: 100%;

  overflow: hidden;

  background:
    radial-gradient(
      circle at top,
      #152126 0%,
      #070b0c 55%,
      #020303 100%
    );
}

body {
  min-height: 100vh;
  min-height: 100dvh;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 20px;
}

#game-shell {
  position: relative;

  width: min(
    92vw,
    156.44vh,
    1600px
  );

  aspect-ratio: 16 / 9;

  flex: 0 0 auto;

  overflow: hidden;

  border:
    1px solid
    rgba(
      92,
      220,
      190,
      0.48
    );

  background: #080d0f;

  box-shadow:
    0 0 0 1px
    rgba(
      8,
      22,
      24,
      0.9
    ),

    0 0 30px
    rgba(
      28,
      255,
      168,
      0.08
    ),

    inset 0 0 20px
    rgba(
      28,
      255,
      168,
      0.025
    );
}

#game-container {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;
}

#game-container canvas {
  display: block;

  max-width: 100%;
  max-height: 100%;

  margin: auto;

  image-rendering: pixelated;
  image-rendering: crisp-edges;
}