@media all{
      :root {
            --bgcolor: #171595;
            --whitecolor: #FFFFFF;
		--fontfam: arial, sans-serif, monospace;
	}

	[data-theme="dark"] {
            --bgcolor: #171595;
            --whitecolor: #FFFFFF;
		--fontfam: arial, sans-serif, monospace;
	}

	:root {
		color-scheme: only light;
		forced-color-adjust: none;
		background:var(--bgcolor);
		color:var(--whitecolor);
		font-family: var(--fontfam);
		font-size:16px;
	}

	body {
		overscroll-behavior:contain;
		margin:0;
		position:absolute;
		top:0;
		bottom:0;
		left:0;
		right:0;
		display:grid;
		place-items:center;
		/*transition:all .2s linear;*/
		user-drag: none;
		-webkit-user-drag: none;
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-khtml-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}

	body:fullscreen {
		width: 100%;
		height: 100%;
	}

	img {
		pointer-events: none;
	}

	input[type="range"] {
		width: 50vw;
	}

	.option-label {
		text-align:center;
	}

    	.container {
		height: auto;
		overflow: hidden;
	}

	/*MENU*/
	.menuText {
		position: absolute;
		top: 60px;
		left: 0px;
		width: 100%;
		font-size: 11px;
		text-align: center;
		background: var(--bgcolor);
		background: none;
		transition: opacity 0.2s;
		opacity: 0;
	}

	.burger,
	.rotBtn,
	.refBtn {
		position: fixed;
		top: 5px;
		right: 5px;
		transform: translate(0%, 0%);
		width: 60px;
		height: 60px;
		background: var(--bgcolor);
		border-radius: 60px;
		transition: 0.2s;
	}

	.b1,
	.b2,
	.b3 {
		position: absolute;
		top: 28px;
		left: 12px;
		width: 36px;
		height: 4px;
		border-radius: 1px;
		background: var(--whitecolor);
	}

	.b2 {
		top: 18px;
	}
	.b3 {
		top: 38px;
	}

	.rotBtn {
		transform: translate(6%, 7%);
	}

	.rotBtn .screen-rotate-unlock {
		height:45px;
		width:45px;
		-webkit-tap-highlight-color:transparent;
		outline:none;
		cursor:pointer;
		background:var(--bgcolor) url(../imagens/icon-screen-rotate.svg) 50% 50%/contain no-repeat;
		border:none;
		display:none;	
		z-index:999;
	}

	.rotBtn .screen-rotate-lock {
		height:45px;
		width:45px;
		-webkit-tap-highlight-color:transparent;
		outline:none;
		cursor:pointer;
		background:url(../imagens/icon-screen-rotate.svg) 50% 50%/contain no-repeat;
		border:none;
		display:none;	
		z-index:999;
	}

	.refBtn {
		transform: translate(6%, 7%);
	}

	.refBtn .reset-adjustment {
		height:50px;
		width:50px;
		-webkit-tap-highlight-color:transparent;
		outline:none;
		cursor:pointer;
		background:url(../imagens/icon-reset.svg) 50% 50%/contain no-repeat;
		border:none;
		display:none;	
		z-index:999;
	}

	.back {
		position:fixed;
		top:5px;
		left:5px;
		height:50px;
		width:50px;
		-webkit-tap-highlight-color:transparent;
		outline:none;
		cursor:pointer;
		background:url(../imagens/icon-back.svg) 50% 50%/contain no-repeat;
		border:none;
		z-index:999;
	}
}


@media (prefers-color-scheme: dark) {
      :root {
            --bgcolor: #171595;
            --whitecolor: #FFFFFF;
	}

	[data-theme="dark"] {
            --bgcolor: #171595;
            --whitecolor: #FFFFFF;
	}

	:root {
		background:var(--bgcolor);
		color:var(--whitecolor);
	}

	/*MENU*/
	.menuText {
		background: var(--bgcolor);
		background: none;
	}

	.burger,
	.rotBtn,
	.refBtn {
		background: var(--bgcolor);
	}

	.b1,
	.b2,
	.b3 {
		background: var(--whitecolor);
	}

	.rotBtn .screen-rotate-unlock {
		-webkit-tap-highlight-color:transparent;
	}

	.rotBtn .screen-rotate-lock {
		-webkit-tap-highlight-color:transparent;
	}

	.refBtn .reset-adjustment {
		-webkit-tap-highlight-color:transparent;
	}

	.back {
		-webkit-tap-highlight-color:transparent;
	}
}