CSS: Estilo e Layout

CSS (Cascading Style Sheets) é a aparência da página: cores, fontes, espaçamento, tamanho, posição. Você escreve regras do tipo "todo <h1> fica vermelho e centralizado".

h1 {
  color: #bd93f9;          /* roxo Dracula */
  font-family: "Archivo", sans-serif;
  text-align: center;
}

p {
  line-height: 1.6;        /* espaço entre linhas, mais confortável de ler */
  max-width: 70ch;         /* largura boa pra leitura */
}

Três conceitos valem ouro desde o começo:

• Box model — toda caixa tem conteúdo, padding (espaço interno), border (borda) e margin (espaço externo). Entender isso é entender 80% do CSS.
• Flexbox — alinhamento e distribuição em uma dimensão (linha ou coluna). É o canivete suíço do layout.
• Grid — layout em duas dimensões (linhas e colunas). Mais poderoso, mas use quando flexbox não bastar.

.container {
  display: flex;
  gap: 1rem;
  justify-content: center;   /* alinha no eixo principal */
  align-items: center;       /* alinha no eixo cruzado */
}