.top-header img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0;
  padding: 0;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background-color: #212122; /* fundo noite*/
  color: #FFFAFA;         /* texto padrão */
  line-height: 1.6;
  margin: 0;
  padding: 0;     /* padding ao redor da página */
}

/* ===== Títulos ===== */
h1, h2, h3, h4 {
  font-weight: 600;
  margin: 24px 0 12px 0; /* topo maior, base menor */
  color: #FFFAFA;
}

h1 {
  font-size: 2em;
}

h2 {
  font-size: 1.5em;
}

h3 {
  font-size: 1.25em;
}

/* ===== Parágrafos ===== */
p {
  margin: 0 0 16px 0; /* espaço entre parágrafos */
  color: #FFFAFA;
}
p:empty {
  height: 20px;   /* altura do espaço */
  display: block; /* garante que apareça */
}
.chapter-text {
  white-space: pre-line;      /* transforma quebras em quebras de linha */
  font-family: inherit;       /* usa a mesma fonte do resto do site */
  font-size: 1rem;            /* ajuste: 1rem = tamanho base (pode mudar) */
  line-height: 1.6;           /* espaçamento entre linhas */
  color: #eaeaea;             /* cor do texto (ajuste pro seu tema) */
  margin: 0 0 1.2em 0;  
}
header, footer {
  text-align: center;
  margin-bottom: 20px;
}

ul {
  list-style: none;
  padding: 0;
}

ul li {
  margin: 10px 0;
}

a {
  color: #F8F8FF;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

main img {
  margin-top: 20px;
  border-radius: 8px;
}
.cover {
  background-color: #555D50;
  border-radius: 10px;
  padding: 20px;
  width: 300px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  display: inline-block;
  vertical-align: top;
  color: #F8F8FF;

  transform: translateX(150px); /* move pra direita */
}

.cover h2 {
  color: #F8F8FF;              /* cor do título */
}

.cover p {
  color: #555;              /* cor do parágrafo */
}
.cover img {
  width: 70%;      /* 70% da largura do card */
  height: auto;    /* Mantém proporção */
  display: block;
  margin: 0 auto;  /* Centraliza a imagem */
  border-radius: 8px;
}
.cover a {
  color: #F8F8FF;      /* cor do link */
  text-decoration: none; /* remove o sublinhado padrão */
  font-weight: bold;    /* deixa o link em negrito, opcional */
}

.cover a:hover {
  color: #F8F8FF;       /* cor do link quando o mouse passa por cima */
  text-decoration: underline; /* opcional: sublinha ao passar o mouse */
}

.cover a:visited {
  color: #F8F8FF;       /* cor do link visitado */
}
.chapterilu img {
  width: 90%;      /* 70% da largura do card */
  height: auto;    /* Mantém proporção */
  display: block;
  margin: 0 auto;  /* Centraliza a imagem */
  border-radius: 8px;
}
.container {
  max-width: 720px;   /* largura máxima do conteúdo */
  margin: 0 auto;      /* centraliza horizontalmente */
  padding: 0 20px;     /* espaço interno nas laterais */
  box-sizing: border-box; /* garante que padding não aumente largura */
}
.containerchapter {
  max-width: 720px;   /* largura máxima do conteúdo */
  margin: 0 auto;      /* centraliza horizontalmente */
  padding: 0 20px;     /* espaço interno nas laterais */
  box-sizing: border-box; /* garante que padding não aumente largura */
  margin-top: 80px;
}

/* ===== Código / blocos especiais ===== */
pre, code {
  font-family: "Courier New", Courier, monospace;
  background-color: #f5f5f5;
  padding: 4px 8px;
  border-radius: 4px;
}

/* ===== Galleria ===== */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin: 40px auto;
  max-width: 250px;
}
.gallery-item img {
  width: 100%;
  aspect-ratio: 1 / 1; /* mantém quadrado */
  object-fit: cover;
  border-radius: 10px;
}
.gallery-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.3);
}
/* ===== Menu bar ===== */
.breadcrumb {
  font-size: 14px;
  color: #999;
  padding: 10px 0 20px 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.breadcrumb a {
  color: #ccc;
  text-decoration: none;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

.breadcrumb span {
  color: #666; /* cor da setinha */
}