:root {
  color-scheme: dark;
}

body {
  background-color: rgb(32, 32, 32);
  touch-action: pinch-zoom;
  overflow: hidden;
  margin: 0;
  display: flex;
  cursor: none;
  height: 100%;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-text-size-adjust: none;
}

* { -webkit-tap-highlight-color: transparent; }

body.embed { background-color: transparent; }

body.native-cursor {
  cursor: auto;
  /*touch-action: manipulation;*/
}

body.native-cursor canvas[data-type="ui"] { opacity: 0 !important; }

/* body.native-cursor canvas { touch-action: pan-x pan-y; } */

canvas { touch-action: none; }

input { pointer-events: none; }

#aesthetic-computer {
  margin: auto;
  position: relative;
  overflow: hidden;
}

#aesthetic-computer.hidden { opacity: 0; }

#content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /*background: rgba(255, 255, 0, 0.5);*/
  z-index: 3;
  pointer-events: all;
  touch-action: manipulation;
}

canvas {
  pointer-events: none;
  image-rendering: pixelated;
}

canvas[data-type="ui"], canvas[data-type="glaze"] {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}

canvas[data-type="freeze"] { pointer-events: none; }

canvas[data-type="glaze"] { z-index: 1; }
canvas[data-type="freeze"] { z-index: 2; }
canvas[data-type="freeze"] { position: fixed; }

canvas[data-type="ui"] {
  z-index: 4;
  filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.5));
}