@media all{
	:root {
		--bgcolor: #171595;
		--whitecolor: #FFFFFF;
		--whilecolor-opacity: rgba(255,255,255,0.8);
		--blackcolor: #000000;
		--fontfam: arial, sans-serif, monospace;
	}

	[data-theme="dark"] {
		--bgcolor: #171595;
		--whitecolor: #FFFFFF;
		--whilecolor-opacity: rgba(255,255,255,0.8);
		--blackcolor: #000000;
		--fontfam: arial, sans-serif, monospace;
	}

	:root {
		color-scheme: only light;
		forced-color-adjust: none;
	}

	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;
		background-color: var(--bgcolor);
		font-size: 0.90em;
		color: var(--whitecolor);
		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;
	}

	.content {
		border: 0;
		margin: 0;
		padding: 0;
		text-align:center;
	}

	.loader {
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		position: fixed;
		width: calc(100% - 1px);
		background-color: var(--whilecolor-opacity);
	}
	
	.loader p {
	  left: 0;
	  top: 45%;
	  margin: 0;
	  width: 100%;
	  color: var(--blackcolor);
	  font-size: 2.00em;
	  position: fixed;
	  font-weight: 100;
	  text-align: center;
	  font-family: var(--fontfam);
	}

	div.sound-level-infos {
		clear:both;
		width:100%;
	}

	div.sound-level-infos .sound-level-info {
		float:left;
		width:25%;
	}

	div.sound-level-data {
		clear:both;
		padding-top:30px;
		width:100%;
		text-align:center;
	}

	div.sound-level-data .db-level-data {
		float:left;
		width:100%;
	}

	div.sound-level-data div#db {
	  border: 0;
	  font-size: 0.90em;
	}
	
	div.sound-level-data div#level {
	  color: var(--whitecolor);
	  padding: 20px 0;
	  font-size: 28px;
	  user-select: none;
	  text-align: center;
	  font-family: var(--fontfam);
	  background-color: transparent;
	}

	div.sound-level-data div#noise {
	  border: 0;
	  font-size: 0.90em;
	}

	div.graph {
		clear:both;
		border: 0;
		padding: 0;
		text-align:center;
		position: relative;
		margin: auto;
		width: 100vw;
		height: auto;
	}

	.icon-refresh {
		position:fixed;
		top:5px;
		right:5px;
		height:50px;
		width:50px;
		-webkit-tap-highlight-color:transparent;
		outline:none;
		cursor:pointer;
		background:url(../imagens/icon-refresh.svg) 50% 50%/contain no-repeat;
		border: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;
		--whilecolor-opacity: rgba(255,255,255,0.8);
		--blackcolor: #000000;
	}

	[data-theme="dark"] {
		--bgcolor: #171595;
		--whitecolor: #FFFFFF;
		--whilecolor-opacity: rgba(255,255,255,0.8);
		--blackcolor: #000000;
	}

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

	.loader {
	  background-color: var(--whilecolor-opacity);
	}

	.loader p {
	  color: var(--blackcolor);
	}

	div.sound-level-data div#level {
	  color: var(--whitecolor);
	  background-color: transparent;
	}

	.icon-refresh {
		-webkit-tap-highlight-color:transparent;
	}

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