:root {
	--neon-blue: #00f2ff;
	--laser-red: #ff0000;
	--selection-yellow: #ffff00;
	--dark-bg: #000000;
}

body, html {
	margin: 0; padding: 0;
	width: 100%; height: 100%;
	overflow: hidden;
	background-color: var(--dark-bg);
}

#input_video { 
	/*position: absolute;*/
	display: none;
	/*width: 200px; */
	/*transform: scaleX(-1);*/
	/*width: 400px;*/
	/*z-index: 9999;*/

}

#output_canvas {
	position: absolute;
	top: 0; left: 0;
	width: 100vw; height: 100vh;
	z-index: 5;
	transform: scaleX(-1);
}

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

.loader {
	width: 50px; height: 50px;
	border: 3px solid #111;
	border-top: 3px solid var(--neon-blue);
	border-radius: 50%;
	animation: spin 1s linear infinite;
}

#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;
}

#poseImg{
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /*width: 100%;*/
    height: 80vh;
    opacity: 0.7;
    z-index: 100;
    max-width: 100%;
    max-height: 100%;
    text-align: center;
    object-fit: contain;
}

.target{
	width: 20%;
	/*height: 100px;*/
	aspect-ratio: 1;
	display: block;
	position: absolute;
	top: 30%;
	left: 90%;
	height: 80vh;
	z-index: 300;
	background: radial-gradient(circle, orange 45%, transparent 56%);
	transition: all 0.3s ease-in;
	opacity: 0.7;
}

.target.highlighted{
	background: radial-gradient(circle, green 45%, transparent 56%);
}

button{
	z-index: 999;
	position: absolute;

	padding: 15px 40px;
    font-size: 1.2rem;
    border: none;
    border-radius: 50px;
    background: linear-gradient(45deg, #00d4ff, #14619a);
    color: #fff;
    transition: transform 0.2s, box-shadow 0.2s;
}

button:hover{
	cursor: pointer;
	transform: scale(1.1);
	box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
}

#btnSavePic{
	top: 20px;
	left: 20px;
}

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