html, body {
  margin:0;
  overflow:hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

}
#MainCanvas{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
#SecondaryCanvas{
	position: absolute;
	left: 0;
	top: 0;
	width: 250px;
	height: 250px;
}
#AltCanvas{
	position: absolute;
	top: 0;
	left:0;
	width: 120px;
	height: 120px;
	z-index: 1002;
}

#AltCanvas2{
	position: absolute;
	top: 0;
	left:320px;
	width: 120px;
	height: 120px;
	z-index: 1002;
}

#SourceVideo{
  position: absolute;
  left: calc(50% - 100px);
  top: 50px;
  width: 200px;
  height: 200px;
  display: block;
  z-index: 1001;
  margin: 0;
}

#vignette{
	position: absolute;
	bottom: 0;
	left:0;
	width: 100%;
	height:30px;
	background-color:#000000;
	color:#fff;
	font-family: 'Inconsolata', monospace;
	overflow: hidden;
	transition: height 0.2s;
}

#vignette:hover{
	cursor:pointer !important;
}
#vignette p{
	font-size:12px;
	margin-left: 20px;
}
.back {
  position: fixed;
  top: 16px;
  right: 20px;
  z-index: 3000;
  font-family: 'Inconsolata', monospace;
  font-size: 12px;
  color: #fff;
  mix-blend-mode: difference;
  text-decoration: none;
  cursor: pointer;
}

.back:hover {
  text-decoration: underline;
}