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

	/*font-family: "Orbitron";*/
	font-family: "Luckiest Guy", cursive;
}

#loading_screen {
	position: fixed;
	top: 0; left: 0;
	width: 100%; height: 100%;
	background: #000;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1000;
}

.loader {
	width: 50px; height: 50px;
	border: 3px solid #111;
	border-top: 3px solid #00f2ff;
	border-radius: 50%;
	animation: spin 1s linear infinite;
}

img.qr{
	position: absolute;
	bottom: 10px;
	right: 10px;
	border-radius: 10px;
	width: 10%;
	min-width: 100px;
	z-index: 200;
}

#inputVideo{
	/*width: 300px;*/
	width: 13%;
	/*height: 100%;*/
	transform: scaleX(-1);
	position: absolute;
	bottom: 10px;
	left: 10px;
	border: 2px solid white;
	border-radius: 10px;
	z-index: 9999;
}

.debugCursor{
	background-color: red;
}

#staticImage{
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 100dvh;
    z-index: 100;
    text-align: center;
    object-fit: contain;
	z-index: 100;
}

#movingImage{
	width: 200px;
}

#cursor, #cursorMouth{
	position: absolute;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 10;
}

#cursor{
	top: 31.7%;
	height: 19vh;
}

#cursorMouth{
	top: 46%;
	height: 20vh;
	z-index: 10;
}

#targetContainer{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	opacity: 0.7;
	z-index: 200;
	max-width: 100%;
	max-height: 100%;
	text-align: center;
}

@keyframes spin { 100% { transform: rotate(360deg); } }