:root {
  color-scheme: light;
}

html {
  height: 100%;
}

body {
  background-color: rgb(32, 32, 32);
  touch-action: none;
  overflow: hidden;
  margin: 0;
  cursor: none;
  /*display: flex;*/
  height: 100%;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-text-size-adjust: none;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwIiBmaWxsPSIjMzAzMDMwIj48L3JlY3Q+PHJlY3QgeD0iMTAiIHk9IjEwIiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIGZpbGw9IiMzMDMwMzAiPjwvcmVjdD48L3N2Zz4=");
  background-size: 4px 4px;
  background-repeat: repeat;
  cursor: url('cursors/precise.svg') 12 12, auto;
}

/* Remove checkerboard for embedded contexts (like VS Code notebooks) */

body.nogap {
  background-image: none;
  /* background-color: none; */
  background-color: transparent !important;
}

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

body.embed {
  background-color: transparent;
}

body.vscode {
  background-color: rgb(32, 32, 32) !important;
}

body.native-cursor {
  cursor: auto;
  /* touch-action: none; */
  /* TODO: Did this break anything with zooming? 22.09.04.23.33 */
}

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

canvas {
  touch-action: none;
}

input,
form {
  pointer-events: none;
  user-select: none;
}

#console {
  font-family: Berkeley Mono Variable, sans serif;
  position: absolute;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 1000;
  padding: 0.8em;
  font-size: 1.25em;
}

#console.hidden {
  display: none;
}

#aesthetic-computer {
  position: relative;
  overflow: hidden;
  border-radius: 2.5px;
}

body.nogap #aesthetic-computer {
  border-radius: 0px;
}

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

#aesthetic-computer.reloading {
  filter: blur(2px) grayscale(0.75);
  transition: 0.25s filter;
}

/* Overlay DOM Content */
#content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
  pointer-events: all;
  touch-action: manipulation;
  -webkit-touch-callout: default;
  display: flex;
}

/* Underlay DOM Content */
#underlay {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
}

#underlay video {
  width: 100%;
  height: 100%;
  /* Checkerboard background... */
  /* background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='2' height='2'><rect x='0' y='0' width='1' height='1' fill='%23fff' fill-opacity='0.1'/><rect x='1' y='1' width='1' height='1' fill='%23fff' fill-opacity='0.1'/></svg>"); */
  /* background-size: 12px; */
  object-fit: contain;
  /* object-fit: cover; */
  background: rgb(32, 32, 32);
}

/* Always letterbox the `tape` canvas. */
#underlay canvas {
  display: block;
  margin: 0 auto;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  /* background-color: rgba(255, 0, 0, 0.5); */
}

#recordings {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  pointer-events: all;
  touch-action: manipulation;
  background: rgba(0, 0, 0, 0.25);
  width: 100%;
  height: 100%;
  display: flex;
  font-family: YWFTProcessing-Regular, sans-serif;
  font-size: 4vmin;
  /* font-family: Berkeley Mono Variable, sans serif; */
}

#recordings video {
  height: 80%;
  width: 100%;
}

#recordings a,
#recordings-close {
  text-align: center;
}

#recordings a {
  color: white;
  padding: 2vmin;
  text-decoration: none;
  background: rgba(0, 0, 200, 1);
  cursor: none;
}

#recordings a:hover {
  background: rgba(0, 0, 255, 1);
}

#recordings-close:hover {
  background: rgba(255, 0, 0, 1);
}

#recordings-close {
  display: inline-block;
  padding: 2vmin;
  background: rgba(200, 0, 0, 1);
}

#recordings-wrapper {
  border-radius: 2vmin;
  width: 80vw;
  height: 80vh;
  margin: auto;
  background: rgba(127, 127, 127, 1);
  display: flex;
  flex-direction: column;
}

/* Picture in Picture */

/*
#pip-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 4;
  pointer-events: none;
  touch-action: none;
  display: flex;
  width: 100%;
  height: 100%;
}

#pip {
  pointer-events: all;
  touch-action: manipulation;
  border: none;
  width: 80%;
  height: 80%;
  margin: auto;
}
*/

/*font-family: 'Berkeley Mono Variable', monospace;*/
/*
#modal {
  font-variation-settings: 'wght' 120;
  font-family: 'YWFTProcessing-Regular', monospace;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  color: rgb(128, 128, 128);
  backdrop-filter: saturate(0);
  display: none;
}

#modal.on { display: flex; }

#modal #bumper {
  margin: 1em auto auto 1em;
  background: rgb(0, 0, 0, 0.25);
  padding: 1.15em 1em 1em 1em;
}
*/

canvas {
  pointer-events: none;
  image-rendering: pixelated;
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
}

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

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


canvas[data-type="glaze"].first-glaze {
  transition: 0.5s opacity;
}


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

canvas[data-type="freeze"] {
  z-index: 3;
}

canvas[data-type="freeze"] {
  position: fixed;
}

canvas[data-type="ui"] {
  z-index: 6;
  /* filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.5)); */
  /* This is *really* slow. */
  /* display: none; */
}

canvas[data-type="2d"] {
  z-index: 7;
}

canvas[data-type="debug"] {
  z-index: 8;
  /* filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.5)); */
  /* transform: rotateX(0.01deg); */
  /* Make sure we are using the GPU compositor. */
  /* display: none; */
}

canvas[data-type="3d"] {
  z-index: 0;
  /* width: 100% !important; */
  /* height: 100% !important; */
  opacity: 0;
}

canvas[data-type="3d"].visible {
  opacity: 1;
}

#VRButton {
  position: absolute;
  bottom: 0.5em;
  right: 0.5em;
  cursor: none;
  font-family: YWFTProcessing-Regular, sans-serif;
  padding: 0.2em 0.2em 0.1em 0.18em;
  line-height: 100%;
  border: 0.05em solid rgb(200, 0, 0);
  color: rgb(200, 0, 0);
  background: none;
  font-size: 2.5em;
  z-index: 5;
}

#VRButton:hover {
  border: 0.05em solid rgb(0, 200, 200);
  color: rgb(0, 200, 200);
  background: rgb(23, 2, 99, 0.25);
}

#VRButton:focus {
  outline: none;
  box-shadow: none;
}

#camera-feed {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}