header {
  background: #bbbbbb;
  /* colocando um espaçamento interno de 20px para cima e para baixo e 0 para direita e esquerda */
  padding: 20px 0;
}

.caixa {
  /* posição da caixa, para deixar ela ao centro */
  position: relative;
  /* tamanho médio de resolução dos dispositivos atuais */
  width: 940px;
  /* definindo  a div para ser centralizada*/
  /* topo 0 e as laterais sempre se ajustando ao tamanho da tela do dispositivo */
  margin: 0 auto;
}

#nav-produtos {
  /* menu é absoluto */
  position: absolute;
  top: 110px;
  right: 0;
}

#nav-produtos li {
  /* Transformando a lista de links na horizontal com display: inline */
  display: inline;
  /* aumentando o espaçamento entre os itens da linha */
  /* topo, direita, abaixo, esquerda */
  margin: 0 0 0 15px;
}

#nav-produtos a {
  /* Transformando o texto todo em todo MAIUSCULA */
  text-transform: uppercase;
  /* Tirando o sublinhado do texto */
  text-decoration: none;
  /* Definindo a cor dos links */
  color: black;
  /* definindo que o texto será todo em negrito */
  font-weight: bold;
}

/* definindo o comportamento do elemento quando o mouse for posicionado sobre ele */
#nav-produtos a:hover {
  color: #c78c19;
  text-decoration: underline;
}

.produtos {
  width: 940px;
  /* definindo o espaçamento externo */
  margin: 0 auto;
  /* definindo o espaçamento interno */
  padding: 50px 0;
}

.produtos li {
  /* definindo os itens como em linha */
  display: inline-block;
  /* alinhando os elementos no centro */
  text-align: center;
  /* mexendo na distribuição/largura do conteúdo */
  width: 30%;
  /* orientar o alinhamento do inline-block pela linha de cima, por default é pela linha abaixo */
  vertical-align: top;
  /* Ajustando espaçamento externo dos itens */
  margin: 0 1.5%;
  /* Ajustando o espaçamento interno do itens */
  padding: 30px 20px;
  /* Ajustando as margens para que o CSS não some o espaçamento interno com o espaçamento total (em porcentagem) */
  box-sizing: border-box;
  /* 
  #######################################################################################
  Ajustando as propriedades da borda dos itens, pelos seus 3 principais aspectos:
  tamanho: border-width: 2px;
  tipo: border-style: solid;
  cor: border-color: black;
  #######################################################################################
  É possível realizar a mesma declaração utilizando o comando: boder: <tamanho> <estilo> <cor>
  */
  border: 2px solid black;
  /* Arredondando a borda, utilizando o border radius, 
  você pode especificar cada tamanho dos cantos da borda ou passar tudo de uma vez com um valor fixo para todos os cantos*/
  border-radius: 10px;
}

/* Mudando a cor dos itens quando o mouse estiver por cima */
.produtos li:hover {
  border-color: #c78c19;
}

/* Mudando a cor do item quando clicado */
.produtos li:active {
  border-color: #088c19;
}

/* Alterando as propriedades do elemento h2 quando o mouse estiver emcima */
.produtos li:hover h2 {
  font-size: 34px;
}

.produtos h2 {
  /* definindo o tamanho */
  font-size: 30px;
  /* definindo o texto como negrito */
  font-weight: bold;
}

.produto-preco {
  /* definindo o tamanho */
  font-size: 22px;
  /* definindo o texto como negrito */
  font-weight: bold;
  /* definindo o espaçamento externo 
  topo, baixo e laterais*/
  margin: 10px 0 0;
}

.produto-descricao {
  /* definindo o tamanho */
  font-size: 18px;
}

footer {
  text-align: center;
  background: black;
  /* margin-top: 20px; */
  padding: 40px 0;
}

.copyright {
  color: white;
  font-size: 13px;
  margin: 20px 0 0;
}