geral.css

body {
  /* então: ../ significa que vc deve SAIR um nível para trás para entrar na outra pasta */
  /* o caminho é sempre RELATIVO ao arquivo que estou trabalhando! */
  background: url(../img/background.jpg);
  /* se quiser mudar o tamanho de um background pode usar o size (mas com cuidado!) */
  /* background-size: 100% 20%; */
  /* podemos centralizar o background se a imagem for menor que a tela */
  /* background-position: center; */
  /* por padrão zeramos a margin e o padding do body */
  margin: 0;
  padding: 0;
  font-family: 'Trebuchet MS';
}

header {
  background: #ede1b7;
  /* min-height: no minimo XX de altura, se alguma coisa DENTRO do elemento for maior que 100 */
  /* ele vai se esticar sozinho! */
  min-height: 100px;
  padding: 4px;
}

.container {
  /* border: 1px solid red; */
  width: 960px;
  min-height: 100px;
  /* aplica no sentido horário : top, right, bottom & left (topo, direita, embaixo, esquerda) */
  /* como centralizar uma CAIXA */
  /* margin: 0 auto 0 auto; */
  /* mas podemos atalhar ainda mais passando apenas dois valores */
  margin: 0 auto;
}

/* ==================== MENU ==================== */
#menu {
  /* faz o elemento "flutuar" dentro do elemento pai */
  float: right;
  border-top: 1px solid #999999;
  border-bottom: 1px solid #999999;
  margin-top: 40px;
}

#menu a {
  display: inline-block;
  text-decoration: none;
  padding: 10px 20px;
  color: #42382f;
}
/* com a , (virgula) podemos passar mais de um "seletor" para aplicar a MESMA regra */
/* como lê: TODA tag 'a' que estiver dentro de um elemento com o id="menu" */
/* como lê: TODO elemento que possuir a classe "ativa" que estiver dentro de outro elem. com o id="menu" */
#menu a:hover,
#menu .ativa {
  color: #ffffff;
  background: #42382f;
}
/* um outro exemplo: se quisessemos pintar todas tags p, span de amarelo poderiamos fazer algo assim: */
/*
p, span {
 color: yellow;
}
*/

/* ===================== RODAPÉ ===================== */
footer {
  background: #ede1b7;
  /* position: absolute permite colocar o elemento em QUALQUER lugar da página */
  /* não precisando respeitar a hierarquia. Para mover o elemento usamos as coordenadas */
  /* top, left, right, bottom */
  /* position: absolute; */
  position: fixed;
  bottom: 0;
  width: 100%;
  padding: 10px;

  text-align: center;
}

/* ===================== SEÇÃO / CONTEÚDO ===================== */
/*
largura: 760 pixels
fundo: rgba(188, 183,143,0.8)
altura minima: 200 pixels
borda: 2 pixels solida e branca
centralizar o elemento da secao no meio da tela horizontalmente
gordurinha de 20 pixels
afastar a caixa do cabeçalho uns 60 pixels
*/
section {
  width: 760px;

  background: rgba(188, 183, 143, 0.8);

  /* imagem semi transparente de fundo */
  /* background: url(../img/fundo-semi-transparente.png) no-repeat;
  background-position: center; */
  /* tamanho da imagem como fundo */
  /* background-size: 100%;  */

  min-height: 200px;
  border: 2px solid white;
  margin: 60px auto; /* 60px no top e no bottom & auto nas laterais */
  padding: 20px;
  /* funciona como o margin, aceita até 4 configurações */
  border-radius: 20px;
  /* x, y, distancia, intensidade, cor (podemo colocar o inset - para dentro) antes das medidas */
  box-shadow: 1px 1px 1px 1px #ede1b7;
}

.destaque {
  color: brown;
  font-weight: bold; /* negrito / bolder */
  text-shadow: 2px 2px 3px #333333;
}