@charset "utf-8";
/* CSS Document */
body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background: #000;
        }
        .container {
        }
        .video-container { width: 100%; height: 100svh; position: fixed; top:0; left: 0;
        }
        video, canvas {
            width: 100%; height: 100%; object-fit: cover; position:absolute;top:0; left: 0; object-position: center;
            border-radius: 4px;
        }
		.play video,.pause video { opacity: 0!important;}
        canvas {
            display: none; opacity: .5;
        }
        .controls { position: fixed; bottom: 40px; left: 50%; transform: translateX(-50%);
            margin: 20px 0; display: flex; justify-content: center; align-items: center; z-index: 2;
        }
.controls > * { margin: 0 10px;}
        button {
            
            border: none;
            
            
            cursor: pointer;
            transition: background-color 0.3s;
        }
        button:hover {
            background: #45a049;
        }
        button:disabled {
            background: #cccccc;
            cursor: not-allowed;
        }
		#resetBtn { position: fixed; top:0; left:0; width: 60px; height: 60px; background: none; border: none; border-radius: 0;background-image: url("../img/arrow.svg"); background-position: center; background-repeat: no-repeat; background-size: 30px; }
		#playBtn,#stopBtn,#resetBtn { display: none;}
        .status { position: fixed; width: 100%; text-align: center; left: 0; top:50%; transform: translateY(-50%);
            display: none; color: #FFF;
        }
		.play button,.pause button { display: none;}
		.play #playBtn { display: block;width: 80px; height: 80px; border-radius: 50%; box-sizing: border-box; display: block; cursor: pointer; background-color: rgba(234,12,15,1.00); background-image: url("../img/play.svg"); background-position: center; background-repeat: no-repeat; background-size: 50px;}
		.pause #stopBtn { display: block;width: 80px; height: 80px; border-radius: 50%; box-sizing: border-box; display: block; cursor: pointer; background-color: rgba(234,12,15,1.00); background-image: url("../img/pause.svg"); background-position: center; background-repeat: no-repeat; background-size: 50px;}
		.play #resetBtn,.pause #resetBtn { display: block;}
		#switchCameraBtn { }
		.play #switchCameraBtn,.pause #switchCameraBtn { display: none!important;}
.play #captureBtn,.pause #captureBtn { display: none;}
.div.divs { display: none;}
.play .div.divs,.pause .div.divs { display: block;}
		
        .status.error {
            display: block;
        }
        .status.info {
            display: block;
        }
        .params-display { position: fixed; top:0%; right: 0%;
            margin-top: 0px;
            
            font-size: 9vw; color: #FFF; text-align: right; padding: 10px; opacity: .2;font-family: "Oswald", sans-serif;
        }
        .loading {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: none; color: #FFF;
        }
        .loading.active {
            display: block;
        }
		
		#captureBtn { width: 80px; height: 80px; border-radius: 50%; border: 6px solid #FFF; box-sizing: border-box; display: block; cursor: pointer; background-color: #fff; position: relative;}
#captureBtn:before { content: ""; display: block; width: 70px; height: 70px; border: 0px solid #000; position: absolute; top:50%; left: 50%; transform: translate(-50%,-50%); box-sizing: border-box; border-radius: 50%; background-color: rgba(234,12,15,1.00);}
		
		#switchCameraBtn { background-image: url("../img/switch.svg"); background-position: center; background-repeat: no-repeat; background-size: 30px; cursor: pointer;width: 50px; height: 50px; border-radius: 50%; background-color: rgba(255,255,255,1);}
div.div { width: 50px; height: 50px; border-radius: 50%;}

h1 { margin: 0; width: 100%; text-align: center; position: fixed; top:50%; left: 0; transform: translateY(-50%); color:#FFF; font-size: 12vw;font-family: "Oswald", sans-serif; transition: all 1s ease 0s; }
.play h1,.pause h1 { opacity: 0;}
p { margin: 0;}

.desktop .div.divs { display: block;}

@media (orientation: landscape) {
  h1 {font-size: 6vw;}
	
}