/* TUDO QUE TIVER ":hover" DUPLICA E FAZ COM ":focus"*/
/*
:root {
	 --cor-label-checked: #48ee48; 
}
*/
*{box-sizing: border-box; appearance:none; font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; /* border: solid 1px #0001; */ }
body{margin:0; position: relative; background: #fff}
/* body container {
	display: flex;
	justify-content: center;
} */


/* === Designs Gerais (antes tava escrito só "Gerias"...) === */
a{  text-decoration: none;
	color: inherit;}

button { 
	width: fit-content;
	align-self: center;
	border-radius: 5px;
	background-color: rgb(0,0,0,0.4);
	cursor: pointer;
}

p{margin: 0;}


/* === Cabeçalho === */
header{
	display: flex;
	justify-content: center;
	margin-bottom: 40px;
	background-color: transparent;
}

#titulo { margin: 8px 0; }


/* === Menu === */
#menu {
	position: fixed;
	top: 0; left: -250px;
	width: 250px; height: 100%;
	background-color: rgba(118, 146, 207, 0.9);
	display: flex;
	flex-direction: column;
	align-items: left;
	padding: 20px 20px;
	gap: 8px;
	z-index: 1;
	transition: 0.3s;
}
/* Item do menu - Estilo 1 */
.im {
	width: 100%;
	height: fit-content;
	border-bottom: inset 1px #000;
	padding-left: 10px;
	cursor: pointer;
	justify-content: left;
	transition: 0.1s;
}
.im:hover {	border-bottom: inset 3px #000; }
/* Item do menu - Estilo 2 */
.im2 { padding-left: 10px; }

#btnAbrirMenu{
	position: fixed;
	top: 100px; 
	width: 60px; height: 40px;
	background-color: rgb(0,0,0,0.4);
	border-radius: 0 5px 5px 0;
	padding: 5px;
	padding-left: 25px;
	cursor: pointer;
	z-index: 2;
	transition: 0.3s;
}
#btnAbrirMenu img { width: 100%; height: 100%; }

/* === Escopo Configuração === */
label {
	width: 100%;
	height: fit-content;
	border-bottom: solid 1px #000;
	cursor: pointer;
	transition: 0.1s;
}
label:hover {
	border: solid 3px var(--cor-label-checked);
	border-radius: 4px;
	padding: 2px 3px;
}
.selecao input[type="radio"]:checked,
.selecao label:has(input[type="radio"]:checked) {
    background-color: var(--cor-label-checked);
	color: #ffffff;
	border-radius: 4px;
}
.selecao {
	display: flex;
	background-color: rgb(0,0,0, 0.2);
	border-radius: 5px;
	padding: 5px;
	flex-direction: column;
	align-items: left;
	gap: 5px;
	height: min-content;
}


/* === Parte principal === */
#app{
	display: flex;
	flex-direction: column;
	align-items: center;
 	justify-content: center;
	gap: 10px;
	/* clamp(minimum, preferred value, maximum) */
}

#app section{
	display: flex;
	flex-direction: column;
	align-items: center;
}


/* === Escopo Cores === */
.escopoCores {
	display: flex;
	flex-direction: column;
	align-items: center;
}

#quadrado {
	display: grid;
	grid-template-areas: 
	"verme cor"
	"verde cor"
	"azul cor"
	"preto cor"
	"branco cor";
	border: solid 2px #000;
	border-radius: 10px;
}
#corDesafio {
	grid-area: cor;
	height: 200px; width: 220px;
	background-color: #fff;
	border-radius: 0 10px 10px 0;
}
.corNoVetor {
	z-index: 1;
	left: 0px;
	width: 40px;
}
#vermelhoNoVetor {grid-area: verme; background-color: #f00;
	border-radius: 10px 0 0 0;
}
#verdeNoVetor {grid-area: verde; background-color: #0f0;
}
#azulNoVetor {grid-area: azul; background-color: #00f;
}
#pretoNoVetor {grid-area: preto; background-color: #000;
}
#brancoNoVetor {grid-area: branco; background-color: #fff;
	border-radius: 0 0 0 10px;}


/* === Escopo Entrada da Cor === */
#entradaCor {
	height: 24px;
	padding: 5px 5px 5px 25px;
	background: #8a8a8a4d;
	border: 1px #000;
}
#entradaCor:focus {
	border: 30px;
	background: #8a8a8a4d;
	border: 1px #000;
	border-bottom: solid 1px #000;
}

/* Configuração apenas do input RGB */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none;
}



/* === Escopo Tentativas === */
#escopoTentativas {
	display: flex;
	width: 200px;
	/* Essa linha será apagada futuramente*/flex-direction: column-reverse;
}

/* Aviso de input invalido */
#escopoTentativas span {
	color: #f00;
}

/* === Objeto de cada tentativa === *
#objetoTentativa {
	display: flex;
	height: 70px;
	padding: 10px;
	margin-bottom: 15px;
	margin-bottom: 15px;
	background-color: white;
	border: solid 1px #000;
	border-radius: 50px;
	box-shadow: -2px 5px;
}

#objetoTentativa .itemTentativa {
	margin-right: 10px;
}

#corTentativa {
	position: relative;
	width: 50px; height: 50px;
	margin: none;
	border-radius: 50px;
}
.seta {
	margin-top: 10px;
	width: 30px; height: 30px;
}
.seta #setaVermelha {
	fill: #f00;
}
.seta #setaVerde {
	fill: #0f0;
}
.seta #setaAzul {
	fill: #00f;
}
*/