body {
  font-family: monospace;
  background: #111;
  color: #fff;
  padding: 20px;
}

#logOutput {
  white-space: pre-wrap;
  background: #222;
  padding: 10px;
  border: 1px solid #444;
  max-height: 400px;
  overflow-y: auto;
  margin-bottom: 20px;
  z-index: 9999;
  position: relative;
}

.log {
  color: #0f0;
}

.warn {
  color: #ff0;
}

.error {
  color: #f55;
}

#downloadBtn {
  position: relative;
  z-index: 9999;
}

video { position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; object-fit: cover; z-index: -1; }
canvas { position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; object-fit: cover; z-index: 0; }

.loader { display:block; position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; object-fit: cover; z-index: 9; background-color: #FFFFFF; opacity:1; }
.mandiv { display:block; position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; object-fit: cover; z-index: 10; background-color: #BEBEBE; opacity:1; }

.loaderin 
{
	position:absolute;
	top:50%;
	left:50%;
	display:block;
	margin-top: -50px;
    margin-left: -25px;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	border: 3px solid rgb(213,0,0,1);
	border-top-color: transparent;
	animation: rot1 1.2s linear infinite;
}

@keyframes rot1 
{
	to 
	{
		transform: rotate(360deg);
	}
}

.instruct 
{
	position: absolute; /* or relative */
	left: 50%;
	top: 30%;
	transform: translate(-50%, -50%);
	display : block; 
	
}

.contbutton 
{
	position: absolute; /* or relative */
	left: 50%;
	bottom: 15%;
	width: 35%;
	transform: translate(-50%, -50%);
	
}
.contbutton  {
  cursor: pointer;
  font-weight: 700;
  font-family: Helvetica,"sans-serif";
  transition: all .2s;
  padding: 10px 20px;
  border-radius: 100px;
  background: white;
  border: 1px solid transparent;
  display: block;
  align-items: center;
  vertical-align: center;
  font-size: 100%;
}

.contbutton :hover {
  background: white;
}


.contbutton :active {
  transform: scale(1.5);
}



.sendbutton 
{
	position: absolute; 
	bottom: 10px; 
	left: 10px; 
	width : 35%; 
	display : none; 
	z-index: 1; 
}

.sendbutton 
{
	padding: 17px 40px;
	border-radius: 10px;
	border: 0;
	background-color: rgb(66, 139, 202);
	letter-spacing: 1.5px;
	font-size: 15px;
	transition: all 0.3s ease;
	box-shadow: rgb(45, 95, 138) 0px 10px 0px 0px;
	color: hsl(0, 0%, 100%);
	cursor: pointer;
}

.sendbutton:hover 
{
	box-shadow: rgb(45, 95, 138) 0px 7px 0px 0px;
}

.sendbutton:active 
{
	background-color: rgb(66, 139, 202);
	/*50, 168, 80*/
	box-shadow: rgb(45, 95, 138) 0px 0px 0px 0px;
	transform: translateY(5px);
	transition: 200ms;
}


.retakebutton 
{ 
	position: absolute; 
	bottom: 10px; 
	right: 10px; 
	width : 35%; 
	display : none; 
	z-index: 1; 
}

.retakebutton 
{
	padding: 17px 40px;
	border-radius: 10px;
	border: 0;
	background-color: rgb(217, 83, 79);
	letter-spacing: 1.5px;
	font-size: 15px;
	transition: all 0.3s ease;
	box-shadow: rgb(130, 50, 47) 0px 10px 0px 0px;
	color: hsl(0, 0%, 100%);
	cursor: pointer;
}

.retakebutton:hover 
{
	box-shadow: rgb(130, 50, 47) 0px 7px 0px 0px;
}

.retakebutton:active 
{
	background-color: rgb(217, 83, 79);
	/*50, 168, 80*/
	box-shadow: rgb(130, 50, 47) 0px 0px 0px 0px;
	transform: translateY(5px);
	transition: 200ms;
}

.torchbutton 
{ 
	position: absolute; 
	top: 10px; 
	left: 10px; 
	width : 50px;
	height :50px;
	display : none; 
	z-index: 1; 
}

.torchbutton 
{
	padding: 1px 1p   x;
	border-radius: 10px;
	border: 0;
	background-color: rgb(128, 128, 128);
	letter-spacing: 1.5px;
	font-size: 15px;
	transition: all 0.3s ease;
	box-shadow: rgb(96, 96, 96) 0px 10px 0px 0px;
	color: hsl(0, 0%, 100%);
	cursor: pointer;
}

.torchbutton:hover 
{
	box-shadow: rgb(96, 96, 96) 0px 7px 0px 0px;
}

.torchbutton:active 
{
	background-color: rgb(128, 128, 128);
	/*50, 168, 80*/
	box-shadow: rgb(96, 96, 96) 0px 0px 0px 0px;
	transform: translateY(5px);
	transition: 200ms;
}