@media all {
	:root {
		--bgcolor: linear-gradient(to bottom, #03192f, #09253f, #113150, #193e62, #214b74, #214b74, #214b74, #214b74, #193e62, #113150, #09253f, #03192f);
		--whitecolor: #FFFFFF;
		--blackcolor: #000000;
		--fontfam: arial, sans-serif, monospace;
	}

	[data-theme="dark"] {
		--bgcolor: linear-gradient(to bottom, #03192f, #09253f, #113150, #193e62, #214b74, #214b74, #214b74, #214b74, #193e62, #113150, #09253f, #03192f);
		--whitecolor: #FFFFFF;
		--blackcolor: #000000;
		--fontfam: arial, sans-serif, monospace;
	}

	:root {
		color-scheme: only light;
		forced-color-adjust: none;
		background:var(--blackcolor);
		color: var(--whitecolor);
		font-family: var(--fontfam);
		font-size:1.2em;
	}

	body {
		background-image: var(--bgcolor);
		overscroll-behavior:contain;
		margin:0;
		position:absolute;
		top:0;
		bottom:20px;
		left:0;
		right:0;
		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;
	}

	.main-uteis {
		overscroll-behavior:contain;
		margin:0;
		position:absolute;
		top:0;
		bottom:20px;
		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;
	}

	.glass {
	    height: 100vh;
	    width: 100%;
	    position: relative;
	}

	/* fallback ligeiramente transparente */
	.glass::before {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background: rgba(3, 9, 23, 0.5);
		transform: scaleX(1.0);
	}

	/* Se houver suporte a backdrop: muito transparente e desfocado */
	@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
		.glass::before {
		    content: '';
		    position: absolute;
		    bottom: 0;
		    left: 0;
		    width: 100vw;
		    height: 100vh;
		    background: rgba(3, 9, 23, 0.01);
		    -webkit-backdrop-filter: blur(12px);
		    backdrop-filter: blur(12px);
		    -webkit-transform: scaleX(1.0);
		    transform: scaleX(1.0);
		}
	}

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

	.logo {
		text-align:center;
		z-index: 1;
	}


	.logo img {
		width: 90%;
		height: auto;
	}

	.info {
		text-align:center;
		width:65%;
		z-index: 1;
	}

	.ferramenta1 {
		position: fixed;
		width: 800px;
		height: auto;
		transform: rotate(39deg);
		top: 23%;
		left: 29%;
	}

	.ferramenta1 img {
		width: 100%;
		height: 100%;
	}

	.ferramenta2 {
		position: fixed;
		width: 340px;
		height: auto;
		left: -48%;
		top: 50%;
	}

	.ferramenta2 img {
		width: 100%;
		height: 100%;
	}

	.botao {
		position: relative;
		top: 0;
		height: 130px;
		width: 130px;
		outline: none;
		cursor: pointer;
		border-radius: 15%;
		text-align: center;
		float:left;
		margin: 4%;
		background:url(../imagens/btn.png) 50% 50%/contain no-repeat;
		box-shadow: 0 0 15px #00000057;
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	}
	
	.botao .img-botao {
		padding-top: 11%;
	}

	.botao .img-botao img {
		width: 100%;
		top: 0px;
		position: absolute;
		left: 0px;
	}

	.botao .label-botao {
		padding-top: 5px;
		color: var(--whitecolor);
		font-family: var(--fontfam);
		font-size:70%;
		font-weight: bold;
		top: 90px;
		width:100%;
		position: absolute;
	}

	.botoes-outros {
		clear:both;
	}
	
	.botoes-apps {
		width: 100vw;
		margin: auto;
		max-width: 1200px;
		padding: 0 15%;
		box-sizing: border-box;
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	}

	.ferramentas {
		display: flex;
		flex-wrap: wrap;
	}

	.botao-academy {
		position: relative;
		top: 0;
		height: 100px;
		width: 310px;
		outline: none;
		cursor: pointer;
		border-radius: 10px;
		text-align: left;
		float: left;
		margin: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background:url(../imagens/btn-retangular.png) 50% 50%/contain no-repeat;
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	}

	.botao-academy .img-botao-academy {
		 padding-top: 26px;
		 padding-left: 15px;
		 float: left;
		 margin: 0;
		 text-align: center;
		 width: 30%;
	}

	.botao-academy .img-botao-academy img {
		width: 70%;
	}

	.botao-academy .label-botao-academy {
		color: var(--whitecolor);
		font-family: var(--fontfam);
		padding-top: 8%;
		width: 65%;
		float: left;
	}

	.botao-academy .label-botao-academy span.academy-titulo {
		font-size: 1.2em;
		font-weight: bold;
	}

	.botao-academy .label-botao-academy span.academy-subtitulo {
		font-size: 0.55em;
	}
}

@media only screen and (min-width: 1920px) { 
}

@media only screen and (min-width: 1440px) and (max-width: 1900px) { 
	.botoes-apps {
		width: 100%;
		max-width: 1200px;
	}
	.ferramenta2 {
		left:0;
	}
}

@media only screen and (min-width: 1280px) and (max-width: 1440px) {
	.ferramenta2 {
		left:0;
	}
}

@media only screen and (min-width: 1000px) and (max-width: 1280px) {
	.ferramenta2 {
		left:0;
	}
}

@media only screen and (min-width: 901px) and (max-width: 999px) { 
	.ferramenta2 {
		left:0;
	}
}

@media only screen and (min-width: 541px) and (max-width: 900px) { 
	.ferramenta2 {
		left:0;
	}
}

@media only screen and (min-width: 416px) and (max-width: 500px) { 
	.botao {
		margin:3px 3px 10px 3px;
	}
}

@media only screen and (min-width: 400px) and (max-width: 415px) { 
	.botao {
		margin:3px 3px 10px 3px;
	}
}

@media only screen and (min-width: 391px) and (max-width: 399px) { 
	.botao {
		margin:3px 3px 10px 3px;
	}

	.botoes-apps {
		padding:0 13%;
	}
}

@media only screen and (min-width: 370px) and (max-width: 390px) { 
	.botao {
		margin:3px 3px 10px 3px;
	}

	.botoes-apps {
		padding:0 13%;
	}
}

@media only screen and (min-width: 321px) and (max-width: 369px) { 
	.botao {
		margin:3px 3px 10px 3px;
	}

	.botoes-apps {
		padding:0 13%;
	}
}

@media only screen and (min-width: 361px) and (max-width: 369px) { 
	.botao {
		margin:3px 3px 10px 3px;
	}

	.botoes-apps {
		padding:0 5%;
	}
}

@media only screen and (min-width: 321px) and (max-width: 369px) { 
	.botao {
		margin:3px 3px 10px 3px;
	}

	.botoes-apps {
		padding:0 5%;
	}
}

@media only screen and (min-width: 300px) and (max-width: 320px) { 
	.botao {
		margin:3px 3px 10px 3px;
	}

	.botoes-apps {
		padding:0 5%;
	}
}

@media only screen and (max-width: 299px) {
	.home {
		height:35px;
		width:35px;
	}

	.botoes-apps {
		padding:0 0%;
	}

	.botao {
		margin:3px 3px 10px 3px;
	}

	.botao-academy {
		height: 80px;
		width: 260px;
	}

	.botao-academy .img-botao-academy {
		width: 28%;
	}

	.botao-academy .label-botao-academy span.academy-titulo {
		font-size: 0.9em;
	}

	.botao-academy .label-botao-academy span.academy-subtitulo {
		font-size: 0.49em;
	}
}

@media (prefers-color-scheme: dark) {
	:root {
		--bgcolor: linear-gradient(to bottom, #03192f, #09253f, #113150, #193e62, #214b74, #214b74, #214b74, #214b74, #193e62, #113150, #09253f, #03192f);
		--whitecolor: #FFFFFF;
		--blackcolor: #000000;
	}

	[data-theme="dark"] {
		--bgcolor: linear-gradient(to bottom, #03192f, #09253f, #113150, #193e62, #214b74, #214b74, #214b74, #214b74, #193e62, #113150, #09253f, #03192f);
		--whitecolor: #FFFFFF;
		--blackcolor: #000000;
	}

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

	body {
		background-image: var(--bgcolor);
	}

	/* fallback ligeiramente transparente */
	.glass::before {
		background: rgba(3, 9, 23, 0.5);
	}

	/* Se houver suporte a backdrop: muito transparente e desfocado */
	@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
		.glass::before {
		    background: rgba(3, 9, 23, 0.01);
		}
	}

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

	.botao {
		box-shadow: 0 0 15px #00000057;
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	}

	.botao .label-botao {
		color: var(--whitecolor);
	}

	.botoes-apps {
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	}

	.botao-academy {
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	}

	.botao-academy .label-botao-academy {
		color: var(--whitecolor);
	}
}