@media all {
	:root {
            --bgcolor: #171595;
		--whitecolor: #FFFFFF;
		--darkwhitecolor: #EEEEEE;
		--blackcolor: #000000;
		--lightredcolor: #dc402d;
		--darkredcolor: #a30003;
		--darkgreycolor: #1b1b1b;
		--greycolor: #646464;
		--lightgreycolor: #DDDDDD;
		--orangecolor: #DB5733;
		--fontfam: arial, sans-serif, monospace;
	}

	[data-theme="dark"] {
            --bgcolor: #171595;
		--whitecolor: #FFFFFF;
		--darkwhitecolor: #EEEEEE;
		--blackcolor: #000000;
		--lightredcolor: #dc402d;
		--darkredcolor: #a30003;
		--darkgreycolor: #1b1b1b;
		--greycolor: #646464;
		--lightgreycolor: #DDDDDD;
		--orangecolor: #DB5733;
		--fontfam: arial, sans-serif, monospace;
	}

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

	* {
	    pointer-events:none;
	}

	a,button,input {
	    pointer-events:all;
	}

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

	img {
		pointer-events: none;
	}

	h1 {
		color: var(--whitecolor);
		position: initial;
	}

	.torch-toggle {
	    transition:all .1s ease-in-out;
	    position:relative;
	    top:0;
	    height:100px;
	    width:130px;
	    -webkit-tap-highlight-color:transparent;
	    outline:none;
	    cursor:pointer;
	    border-radius:50%;
	    background:var(--orangecolor) url(../imagens/icon-torch.svg) 50% 50%/contain no-repeat;
	    box-shadow:0 9px 0 var(--lightredcolor),0 9px 25px var(--greycolor);
	    border:1px solid var(--lightredcolor);
	}

	@media (max-width:520px) {
	    .torch-toggle {
	        margin-top:5vh;
	    }
	}

	.torch-toggle img {
	    max-width:70%;
	    max-height:90%;
	}

	body.torch-on-ios {
	    background:var(--whitecolor);
	}

	body.torch-on {
	    background:var(--blackcolor);
	}

	body.torch-on-ios .torch-toggle, body.torch-on .torch-toggle {
	    top:6px;
	    box-shadow:0 3px 0 var(--button-shadow),0 6px 30px var(--greycolor);
	}

	body.modal-open:after {
	    content:"";
	    background:var(--blackcolor);
	    opacity:.75;
	    width:100%;
	    height:100%;
	    position:fixed;
	    pointer-events:all;
	}

	.dialog-modal {
	    z-index:1;
	    position:absolute;
	    transform:translateY(-100vh);
	    width:80vw;
	    max-width:400px;
	    background:var(--whitecolor);
	    padding:20px;
	    box-shadow:0 0 40px -10px var(--blackcolor);
	    display:none;
	}

	.dialog-modal.animate {
	    display:block;
	    transition:all .2s linear;
	}

	.dialog-modal.show {
	    transform:translateY(0);
	}

	.dialog-modal .title {
	    font-weight:700;
	    font-size:20px;
	    margin:0 0 20px;
	}

	.dialog-modal .body {
	    opacity:.7;
	    margin:0 0 20px;
	}

	.dialog-modal .button {
	    text-transform:uppercase;
	    width:100%;
	    padding:10px 20px;
	    background:var(--darkwhitecolor);
	    border:none;
	    font-weight:700;
	    color:var(--blackcolor);
	    outline:none;
	    cursor:pointer;
	}

	.dialog-modal .button+.button {
	    margin-top:10px;
	}

	.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;
		--darkwhitecolor: #EEEEEE;
		--blackcolor: #000000;
		--lightredcolor: #dc402d;
		--darkredcolor: #a30003;
		--darkgreycolor: #1b1b1b;
		--greycolor: #646464;
		--lightgreycolor: #DDDDDD;
		--orangecolor: #DB5733;
	}

	[data-theme="dark"] {
            --bgcolor: #171595;
		--whitecolor: #FFFFFF;
		--darkwhitecolor: #EEEEEE;
		--blackcolor: #000000;
		--lightredcolor: #dc402d;
		--darkredcolor: #a30003;
		--darkgreycolor: #1b1b1b;
		--greycolor: #646464;
		--lightgreycolor: #DDDDDD;
		--orangecolor: #DB5733;
	}

	:root {
	    background:var(--bgcolor);
	    color:var(--blackcolor);
	    font-family: var(--fontfam);
	}

	h1 {
		color: var(--whitecolor);
	}

	.torch-toggle {
	    -webkit-tap-highlight-color:transparent;
	    background:var(--orangecolor) url(../imagens/icon-torch.svg) 50% 50%/contain no-repeat;
	    box-shadow:0 9px 0 var(--lightredcolor),0 9px 25px var(--greycolor);
	    border:1px solid var(--lightredcolor);
	}

	body.torch-on-ios {
	    background:var(--whitecolor);
	}

	body.torch-on {
	    background:var(--blackcolor);
	}

	body.torch-on-ios .torch-toggle, body.torch-on .torch-toggle {
	    box-shadow:0 3px 0 var(--button-shadow),0 6px 30px var(--greycolor);
	}

	body.modal-open:after {
	    background:var(--blackcolor);
	}

	.dialog-modal {
	    background:var(--whitecolor);
	    box-shadow:0 0 40px -10px var(--blackcolor);
	}

	.dialog-modal .button {
	    background:var(--darkwhitecolor);
	    color:var(--blackcolor);
	}

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