:root {
  /*--cursor-width: 130px;*/
  --cursor-width: 20vw;
}

body, html {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}


/* Background content */
.behind {
	position: fixed;
	top: 0; left: 0;
	width: 100%;
	height: 100%;
	/*background: url('../img/background.jpg') center/cover;*/
	z-index: 1;

	/*margin: auto;
	text-align: center;
	align-content: center;
	align-items: center;*/
}

#backgroundVideo, #foregroundVideo{
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

/* Covering mask */
.mask {
	position: fixed;
	top: 0; left: 0;
	width: 100%; height: 100%;
	background-color: rgba(0, 0, 0, 1);
	/*background: url('../img/background.jpg') center/cover;*/
	z-index: 2;
	pointer-events: none; /* Allows interaction behind */

	/* Dynamic Mask Property */
	--x: 50%;
	--y: 50%;
	/*-webkit-mask-image: radial-gradient(circle 100px at var(--x) var(--y), transparent 100%, black 100%);*/
	/*mask-image: radial-gradient(circle 100px at var(--x) var(--y), transparent 100%, black 100%);*/

	-webkit-mask-image: radial-gradient(circle var(--cursor-width) at var(--x) var(--y), transparent 70%, black 100%);
	mask-image: radial-gradient(circle var(--cursor-width) at var(--x) var(--y), transparent 70%, black 100%);
}

.cursor{
	position: fixed;
	/*width: calc(var(--cursor-width) * 2);*/
	width: calc(var(--cursor-width) * 4);
	top: 50%;
	left: 50%;
	z-index: 99;
	
}

.cursor, .target{
	transform: translate(-50%, -50%);
}

#overlayGestures{
	width: 100%;
	height: 100%;
	position: fixed;
	top:0;
	left: 0;
	z-index: 9999;
}


.mask:hover, .behind:hover {
	cursor: pointer;
}


#webcamCanvas{
	/*width: 100%;
	height: 100%;*/
	transform: scale(-1, 1);
	position: absolute;
	z-index: 9999;
}

.handCursor{
	position: absolute;
}

.handCursor.closed{
	border: 2px solid red;
}
.handCursor, .handCursor.open{
	border: 2px solid green;
}

.target{
	position: relative;
	width: 50px;
	height: 50px;
}

.semi-transparent{
	background-color: rgba(0, 0, 0, 0.9);
}