html {
  width: 100%;
  height: 100%;
}

body {
  display: flex;
  margin: 0;
  width: 100%;
  height: 100%;
  user-select: none;
  overflow: hidden;
  cursor: default;
}

body[data-edition=red] {
  background-color: rgb(64, 0, 0);
}

body[data-edition=red] canvas#bg {
  background-color: rgb(250, 20, 20);
}

body[data-edition=orange] {
  background-color: rgb(64, 32, 0);
}

body[data-edition=orange] canvas#bg {
  background-color: rgb(250, 135, 20);
}

body[data-edition=yellow] {
  background-color: rgb(64, 64, 0);
}

body[data-edition=yellow] canvas#bg {
  background-color: rgb(187, 174, 13);
}

body[data-edition=green] {
  background-color: rgb(0, 64, 0);
}

body[data-edition=green] canvas#bg {
  background-color: rgb(36, 173, 16);
}

body[data-edition=blue] {
  background-color: rgb(0, 0, 64);
}

body[data-edition=blue] canvas#bg {
  background-color: rgb(50, 20, 250);
}

body[data-edition=violet] {
  background-color: rgb(32, 0, 64);
}

body[data-edition=violet] canvas#bg {
  background-color: rgb(92, 16, 173);
}

body[data-edition=indigo] {
  background-color: rgb(64, 0, 64);
}

body[data-edition=indigo] canvas#bg {
  background-color: rgb(173, 16, 136);
}

body[data-edition=grayscale] {
  background-color: rgb(64, 64, 64);
}

body[data-edition=grayscale] canvas#bg {
  background-color: rgb(115, 115, 115);
}

body[data-edition=inverted] {
  filter: invert(1);
  background-color: rgb(16, 16, 16);
}

body[data-edition=inverted] canvas#bg {
  background-color: rgb(166, 166, 166);
}

body[data-edition=wild] {
  background-color: rgb(0, 0, 0);
  animation: wild 30s linear infinite;
}

body[data-edition=wild] canvas#bg {
  background-color: rgb(32, 0, 0);
}

@keyframes wild {
  0% {
    filter: hue-rotate(0deg);
  }

  50% {
    filter: hue-rotate(360deg);
  }

  100% {
    filter: hue-rotate(0deg);
  }
}

#wrapper {
  margin: auto;
  width: 100vh;
  height: 100vh;
  position: relative;
}

canvas {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}

canvas#main {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

canvas#bg {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  pointer-events: none;
}

#wrapper.running canvas#bg {
  background-color: rgb(0, 0, 0);
}

body.button #wrapper {
  cursor: pointer;
  touch-action: manipulation;
}

body.button #wrapper:hover {
  filter: grayscale(0.1);
  opacity: 0.8;
}

body.button #wrapper:active {
  filter: grayscale(0.2);
  opacity: 0.9;
}

#wrapper.hidden { display: none; }

@media all and (orientation: portrait) {

  #wrapper {
    width: 100vw;
    height: 100vw;
  }

  body.in-app-ios #wrapper {
    margin-top: 0 !important;
  }

}