* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 8%, rgba(88, 122, 126, 0.3), transparent 28rem),
    linear-gradient(180deg, #08080f 0%, #10131f 48%, #07100d 100%);
  color: #f7ffe8;
  font-family: Georgia, "Times New Roman", serif;
}

.game-shell {
  width: 100vw;
  height: 100vh;
  display: grid;
  place-items: center;
  padding: 10px;
}

canvas {
  display: block;
  width: min(100vw - 20px, calc((100vh - 20px) * 0.6666667));
  height: min(100vh - 20px, calc((100vw - 20px) * 1.5));
  image-rendering: auto;
  border: 1px solid rgba(193, 238, 188, 0.35);
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.03),
    0 20px 80px rgba(0, 0, 0, 0.65),
    0 0 42px rgba(143, 238, 174, 0.18);
  background: #07090f;
}