:root {
  --pyxel-black: #000000;
  --pyxel-navy: #2b335f;
  --pyxel-purple: #7e2072;
  --pyxel-green: #19959c;
  --pyxel-brown: #8b4852;
  --pyxel-dark-blue: #395c98;
  --pyxel-light-blue: #a9c1ff;
  --pyxel-white: #eeeeee;
  --pyxel-red: #d4186c;
  --pyxel-orange: #d38441;
  --pyxel-yellow: #e9c35b;
  --pyxel-lime: #70c6a9;
  --pyxel-cyan: #7696de;
  --pyxel-gray: #a3a3a3;
  --pyxel-pink: #ff9798;
  --pyxel-peach: #edc7b0;
  --pyxel-background-color: #202224;
}

.pyxel-scheme {
  color: #ffffff;
  background-color: var(--pyxel-background-color);
}

.pyxel-scheme a:link {
  color: var(--pyxel-light-blue);
}

.pyxel-scheme a:visited {
  color: var(--pyxel-cyan);
}

.pyxel-scheme pre {
  white-space: pre-wrap;
}

.pyxel-scheme .code {
  color: var(--pyxel-orange);
  font-family: monospace;
  font-size: large;
}

div#pyxel-screen {
  position: absolute;
  left: 0%;
  top: 0%;
  width: 100%;
  height: 100%;
  background-color: var(--pyxel-background-color);
}

canvas#canvas {
  position: absolute;
  left: 0%;
  top: 0%;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}

img#pyxel-logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  --min-width-ratio: 0.2;
  image-rendering: pixelated;
  pointer-events: none;
}

img#pyxel-prompt {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  --min-width-ratio: 0.25;
  image-rendering: pixelated;
  pointer-events: none;
}

img#pyxel-gamepad-cross {
  position: absolute;
  left: 1%;
  bottom: 5%;
  --min-width-ratio: 0.2;
  image-rendering: pixelated;
  pointer-events: none;
}

img#pyxel-gamepad-button {
  position: absolute;
  right: 1%;
  bottom: 5%;
  --min-width-ratio: 0.2;
  image-rendering: pixelated;
  pointer-events: none;
}

img#pyxel-gamepad-menu {
  position: absolute;
  left: 50%;
  bottom: 1%;
  transform: translateX(-50%);
  --min-width-ratio: 0.2;
  image-rendering: pixelated;
  pointer-events: none;
}