/*PROJETO LIXO ELETRÔNICO*/

body {/*COR DE FUNDO E A BORDA DO TEXTO*/
	background-color: #cccccc; /*COR DE FUNDO DO SITE*/
	background-attachment: fixed; /*NADA*/
}

h1{ /*COLOCA COR NOS TEXTOS*/
	font-family: helvetica, sans-serif;
	color: green;
}

h1 { /*DEIXA O TEXTO CENTRALIZADO*/
  text-align: center;
}

/*COLOCA UMAS BORDAS E DEIXA E NA HORA QUE VAI SELECIONAR O TEXTO AS LETRAS FICA COM UMA COR DIFERENTE*/

h3:first-of-type::first-line { /*DEIXA A PRIMEIRA LINHA COM UMA COR EXPECIFICA*/
	color: green;
	font-variant: small-caps;
}
h3::selection { /*COLOCA UMAS BORDAS E DEIXA E NA HORA QUE VAI SELECIONAR O TEXTO AS LETRAS FICA COM UMA COR DIFERENTE*/
	background-color: yellow;
	color: black;
}


header { /* SE APAGAR NÃO MUDA EM NADA. BORDA DO TEXTO NA PARTE DE CIMA*/
	
	border-radius: 10px; /* EXPECIFICA O AREDONDAMENTO DA CAIXA DE TEXTO*/
	width: 900px; /*LARGURA DA CAIXA DE TEXTO*/
	margin: auto; /*CENTRALIZA A CAIXA DE TEXTO DE CIMA*/
	margin-bottom: 15px;/* ESPAÇO QUE SE DÁ ENTRE A CAIXA DE TEXTO E OUTRA COISA*/
	padding: 25px; /*TAMANHO DA CAIXA DE TEXTO*/
}

nav { /*RELACIONADO COM MENU EXPECIFICA A LARGURA DA BARRA DE MENU*/
	width: 1400px; /*LARGURA DO MENU*/
	margin: auto; /*MENU FICA CENTRALIZADO*/
	margin-bottom: 15px; /*JOGA A CAIXA DE TEXTO MAIS PRA BAIXO, NÃO MUDA QUASE NADA*/
	padding: 0px; /*JOGA O MANU MAIS PRA BAIXO*/
}

main {
	background-color: rgba(255, 255, 255, 0.7);
	border-radius: 10px;
	width: 440px; /* LARGURA DA CAIXA DE TEXTO*/
	margin: auto;
	margin-bottom: 15px;
	padding: 5px; /*TAMANHO DA CAIXA DE TEXTO*/
}

/*EFEITO NA IMAGEM DAQUI ATÉ*/
.divProduto { /*TEM QUE TER O SEGUNDO NOME SE NÃO TEM EFEITO*/
	width: 370px;
	float: left;
	background-color: #FFFFFF;
	border-radius: 20px;
	padding: 10px;
	margin: 3px;
	
	border-color: white;
	border-width: 2px;
	border-style: solid;
	
	text-align: CENTER;
	font-size: x-large;
}

.divProduto:hover {
	border-color: red;
	
	text-decoration: underline;
}

.divDescricao {
	background-color: #DDDDDD;
	border-radius: 10px;
	
	font-weight: bold;
} /*AQUI*/


h3:first-of-type::first-letter{ /*DEIXA A PRIMEIRA LETRA GRANDE E COM UMA COR EXPECIFICA*/
	color: red;
	font-size: xx-large;
}


.menulist { /*COLOCA A BARRA NO MENU*/
    list-style-type: none; /*NADA*/
    margin: 0; /*NADA*/
    padding: 0; /*JOGA O NOME DO MENU UM POUCO MAIS PARA DIREITA*/
    overflow: hidden; /*FAZ AS BORDAS DO MENU SAIR*/
    background-color: #333; /*DIFINIR A COR DAS BORDAS DA BARRA DE MENU*/
}

.menuitem, .dropdown { /*RELACIONADO COM A BARRA DE MENU, ONDE JÁ COMEÇA A DAR O DESIGNER DO MENU*/
    float: left;
}

.menuitem a, .dropdown a, .dropbtn { /*RELACIONADO COM A BARRA DE MENU, DEIXA COM O TAMANHO MAIS DIFERENTE, TIRA A COR*/
    display: inline-block; /*DIMINUIR O TAMANHO DA BARRA DE MENU*/
    color: white; /*EXPECIFICA A COR DAS PALAVRAS QUE TEM DENTRO DA BARRA DE MENU*/
    text-align: center /*NADA*/;
    padding: 14px 16px;/*EXPECIFICA O TAMANHO DA BARRA DE MENU*/
    text-decoration: none; /*COLOCA UMA LINHA EM BAIXO DO NOME DA BARRA DE MENU*/
}

.menuitem a:hover, .dropdown a:hover, .dropdown:hover .dropbtn { /*EXPECIFICA A COR DA BARRA DO MENU AO PASSAR O MOUSE POR CIMA*/
    background-color: red;
}

.dropdown { /*NADA, NÃO PRECISA COLOCAR*/
    display: inline-block;
}

.dropdown-content { /*RELACIONADO COM A BARRA DE MENU, FAZ O MENU JÁ FICAR NO FORMATO CORRETO*/
    display: none; /*AO RETIRAR ESSE COMANDO FAZ O SUB MENU FICAR A MOSTRAR*/
    position: absolute; /* AO RETIRAR ESSE COMANDO FAZ COM QUE O NOME NO MENU SE DESLOQUE AO PASSAR O MOUSE*/
    background-color: #f9f9f9; /*DAR UMA COR NO SUB MENU AO PASSAR O MOUSE NO MENU*/
    min-width: 160px; /*DAR O TAMANHO AO SUB MENU*/
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a { /*MUDA AS CORES DO NOME DO SUB MENU, TAMANHO DAS CAIXA*/
    color: black; /*MUDA A COR DO NOME QUE TEM DENTRO CAIXA DO SUB MENU*/
    padding: 12px 16px; /*TAMANHO DAS CAIXAS DO SUB MENU*/
    text-decoration: none; /*NADA*/
    display: block; /*AO TIRAR ESSE COMANDO FAZ APARECER UMA LEVE BORDA AO REDOR DO NOME QUE TEM NO SUB MENU*/
    text-align: left; /*MOSTRAR ONDE O TEXTO QUE TEM DENTRO DA CAIXA DO SUB MENU DEVI SER MOSTRADO SE NA ESQUERDA OU DIREITA*/
}

.dropdown:hover .dropdown-content {/*FAZ APARECER O SUB MENU QUANDO PASSA O MOUSE POR CIMA*/
    display: block;
}

.dropdown-content a:hover {background-color: yellow} /*DAR UMA COR AO SUB MENU AO PASSAR O MOUSE POR CIMA*/