@charset "utf-8";
/* CSS Document */
html,body {height: 100svh;}
        body {
            margin: 0;
            overflow: hidden;
            display: flex;
            flex-direction: column;font-family: "Ubuntu", serif;
            
        }
        #controls {
            padding: 30px 10px;
            text-align: center;
            background:rgba(255,255,255,0); width: 100%; box-sizing: border-box; position: fixed; bottom: 0; left: 0; display: flex;justify-content: center; z-index: 1;
        }
        button {
            margin: 0 0px;
			width: 80px; height: 80px; border: none; background: none; background-color: transparent; background-position: center; background-repeat: no-repeat; background-size: 40px; text-indent: -99999px; background-color: #E10061; border-radius: 50%;
            
        }
        #videoElement {
            object-fit: cover; width: 100%; height: 100svh; object-position: center; position: fixed;
        }
        #canvasElement {
            flex-grow: 1; object-fit: cover; width: 100%; height: 100svh; object-position: center; position: fixed;
        }
		button:disabled { display: none!important;}
		#switchCameraButton { position: absolute; right: 20px; top:50%; transform: translateY(-50%); background-image: url("../img/camera.svg"); background-size: 20px;width: 50px; height: 50px; background-color: rgba(215,215,215,1.00); }
		#playButton { background-image: url("../img/play.svg");}
		#resetButton { background-image: url("../img/pause.svg");}

h1 { color: #FFF; width: 100%; margin: 0; text-align: center; position: fixed; top:50%; left: 50%; transform: translate(-50%,-50%); font-size: 12vw;}