/* style.css
   Esse arquivo controla a APARÊNCIA. O HTML diz "isso é um título",
   o CSS diz "e esse título é vermelho, grande, nessa fonte". */

body {
  background-color: #111111;
  /* Cor de fundo escura, tipo a da referência (quase preto-azulado). */

  color: #eedddd;
  /* Cor padrão do texto — cinza claro, não branco puro (menos cansativo pro olho). */

  font-family: 'Libre Baskerville', serif;
  /* Fonte do corpo do texto. O navegador tenta Georgia primeiro;
     se não tiver, cai pro próximo da lista. */

  font-size: 1.1rem;
  line-height: 1.5;
  /* Espaçamento entre linhas do texto — 1.6x a altura da fonte.
     Sem isso o texto fica "grudado", difícil de ler em blocos longos. */
  font-weight: 400;

  max-width: 700px;
  /* Impede que o texto se estique até a borda da tela em monitores largos —
     linhas muito longas são difíceis de ler. */

  margin: 0 auto;
  /* "0" em cima/baixo, "auto" nas laterais = centraliza o bloco na página. */

  padding: 40px 20px;
  /* Respiro entre o conteúdo e a borda da janela. */


}

a {
  color: #e05252;
  /* Cor dos links — vermelho, como na referência. */

  text-decoration: none;
  /* Remove o sublinhado padrão dos links. */
}

a:hover {
  text-decoration: underline;
  /* :hover = estilo aplicado SÓ quando o mouse está em cima.
     Aqui, o sublinhado volta ao passar o mouse, como sinal visual de "isso é clicável". */
}

h1, h2 {
  color: #f5e9da;
  /* Cor "creme" pros títulos, puxando pro bege claro da referência. */

  font-weight: normal;
  /* Tira o negrito padrão dos headings — dá um ar mais "editorial", menos "corporativo". */

  border-bottom: 1px solid #333;
  /* Linha fina embaixo do título, só decorativa. */

  padding-bottom: 8px;
}

ul {
  list-style: none;
  /* Remove as bolinhas padrão da lista. */

  padding-left: 0;
  /* Remove o recuo padrão que <ul> tem por causa das bolinhas removidas. */
}

li {
  margin-bottom: 10px;
  /* Espaço entre cada item da lista, senão tudo fica colado. */
}

.badge-new,
.badge-pick {
  /* A vírgula deixa as duas classes compartilharem o mesmo estilo base.
     Selecionar múltiplas classes assim evita repetir o mesmo bloco de CSS duas vezes. */

  display: inline-block;
  /* Permite dar padding numa tag <span>, que por padrão é "inline"
     (não aceita padding/margin vertical direito sem isso). */

  font-size: 0.7em;
  /* Tamanho relativo ao texto ao redor — 70% do tamanho normal. */

  padding: 2px 6px;
  border: 1px solid currentColor;
  /* currentColor = usa a MESMA cor que já está definida pro texto/borda desse elemento,
     útil pra não repetir o valor da cor em dois lugares. */

  margin-left: 6px;
  vertical-align: middle;
}

.badge-new {
  color: #ff4d4d;
}

.badge-pick {
  color: #f5e9da;
}