@supports (padding-top: env(safe-area-inset-top)) {
  html {
    --safe-area-inset-top: env(safe-area-inset-top);
    --safe-area-inset-right: env(safe-area-inset-right);
    --safe-area-inset-bottom: env(safe-area-inset-bottom);
    --safe-area-inset-left: env(safe-area-inset-left);
  }
}

html,
body {
  margin: 0px;
  padding: 0px;
  overflow: hidden;
  height: 100%;
  font-size: 16px;
}


#root {
  height: 100%;
  overflow: hidden;
  background-color: black;
  display: flex;
  touch-action: none;
}

canvas {
  image-rendering: optimizeSpeed;
  image-rendering: -moz-crisp-edges;
  image-rendering: -o-crisp-edges;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: optimize-contrast;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  -ms-interpolation-mode: nearest-neighbor;

  display: block;
  /*touch-action: none;*/
}

@media all and (display-mode: standalone) {
  body,
  #root,
  canvas {
    height: 99.9vh;
    position: fixed;
  }
}

* {
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

input,
select {
  font-size: 16px;
  touch-action: manipulation;
}

input[type="color"] {
	border: none;
}

input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
input[type="color"]::-webkit-color-swatch { border: none; }
input[type="color"]::-moz-color-swatch { border: none; }