:root {

  /* COLORS */
  --canvas-background: #BDF6B0;
  --viz-normal: #A6A6A6;
  --viz-highlight: #C50B5F;
  --lines: #7030A0;
  --box-bg: #E9E7E3;
}


html, body {
  margin: 0;
  padding: 0;
  /* background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" viewBox="0 0 700 700" width="700" height="700"><defs><filter id="nnnoise-filter" x="-20%" y="-20%" width="140%" height="140%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="linearRGB"><feTurbulence type="fractalNoise" baseFrequency="0.112" numOctaves="4" seed="15" stitchTiles="stitch" x="0%" y="0%" width="100%" height="100%" result="turbulence"></feTurbulence><feSpecularLighting surfaceScale="21" specularConstant="0.9" specularExponent="20" lighting-color="%239542bd" x="0%" y="0%" width="100%" height="100%" in="turbulence" result="specularLighting"><feDistantLight azimuth="3" elevation="91"></feDistantLight></feSpecularLighting></filter></defs><rect width="700" height="700" fill="%23e9e7e3ff"></rect><rect width="700" height="700" fill="%239542bd" filter="url(%23nnnoise-filter)"></rect></svg>'); */
  background-color: black; 
}

.navbar {
  z-index: 1000;
}

.btn {
  font-size: 15px;
}

/* canvas {
  display:block; 
  border: 3px solid var(--lines);
  box-shadow: 10px 10px 1px 0px rgba(0, 0, 0, 0.50);
  background-color: transparent;
} */

#layer0 {
  z-index: 0;
}

#layer1 {
  z-index: 1;
}

button {
  z-index: 1000;
}

#calibrateMapping {
  width: 100%;
}

/* video {
  filter: grayscale(100%) blur(15px) contrast(2) brightness(1.2);
} */