/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
   

body {
  background-color: white;
  color: black;
  font-family: Arial;

  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  padding: 20px;

  background-image: url("imagem.fundo.png");
  background-repeat: repeat-x;   /* 👈 repete na horizontal */
  background-position: center;
  background-size: 100% 130%; /* 👈 aumenta a altura */
}


.container {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  padding: 20px;
}

#lista-palavras {
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: 6px;
  margin-top: 15px;

  justify-content: center;   /* 👈 centraliza horizontal */
  align-content: center;     /* 👈 centraliza vertical (se crescer) */
}

.palavra-btn {
  padding: 5px 10px;
  font-size: 13px;
  border: none;
  border-radius: 8px;
  background-color: #e0e0e0;
  cursor: pointer;
  transition: 0.2s;
}

.palavra-btn:hover {
  background-color: #cfcfcf;
}

.palavra-item {
  padding: 10px;
  background-color: #e0e0e0;
  border-radius: 8px;
  font-size: 14px;
  text-align: center;
}


/* 🌙 MODO ESCURO */
@media (prefers-color-scheme: dark) {
  body {
    background-color: #111;
    color: white;
  }

  .idiomas label {
    background-color: #222;
    border: 1px solid white;
    color: white;
  }

  input, button {
    background-color: #222;
    color: white;
    border: 1px solid white;
  }

  .idiomas label:hover {
    background-color: #333;
  }
}

/* 🌞 MODO CLARO */
.idiomas label:hover {
  background-color: #f0f0f0;
}

/* 📦 CAIXAS DE IDIOMA */
.idiomas {
  margin: 20px 0;
  display: grid;
  grid-template-columns: repeat(2, 100px);
  gap: 10px;
  justify-content: center;
}

.idiomas label {
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 6px;        /* antes era maior */
  font-size: 12px;     /* texto menor */
  border: 1px solid black;
  border-radius: 6px;
  background-color: white;
  cursor: pointer;
}

/* 📄 ESTILO GERAL */


h1 {
  font-family: 'Segoe UI';
}

body {
  max-width: 800px;
  margin: 0 auto;
  font-family: Arial;
  text-align: center;
  padding: 20px;
}

input {
  padding: 10px;
  width: 220px;
}

button {
  padding: 10px;
  cursor: pointer;
}

#resultado {
  width: 250px;
  margin: 20px auto;   /* 👈 centraliza */
  font-size: 20px;
  font-weight: bold;
  white-space: pre-line;
}

img {
  display: block;
  margin: 15px auto;
  width: 250px;
  border-radius: 10px;
}

button {
    margin-top: 10px;
  margin-left: 5px;
}


#resultado-categorias,
#resultado-BrasilCategorias {
  display: flex;           /* 👈 muda de grid para flex */
  flex-wrap: wrap;         /* quebra linha automaticamente */
  gap: 6px;
  justify-content: center;
  margin-top: 20px;
}

.palavra-item {
  display: inline-block;   /* 👈 faz o tamanho se ajustar ao texto */
  padding: 4px 8px;        /* 👈 menor */
  font-size: 12px;         /* 👈 menor */
  border: 1px solid #ccc;
  border-radius: 6px;
  text-align: center;
}

.contador-rodape {
  text-align: center;
  font-size: 11px;
  color: #888;
  margin-top: 20px;
  margin-bottom: 10px;
}

.contador-rodape span {
  font-weight: bold;
  color: #444;
}

.aulas {
  margin-top: 30px;
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 10px;
  background-color: #f9f9f9;
}

@media (prefers-color-scheme: dark) {
  .aulas {
    background-color: #222;
    border: 1px solid #555;
  }
}

.btn-whatsapp {
  display: inline-block;
  margin-top: 10px;
  padding: 10px 15px;
  background-color: #25D366;
  color: white;
  text-decoration: none;
  border-radius: 8px;
  font-size: 14px;
  transition: 0.2s;
}

.btn-whatsapp:hover {
  background-color: #1ebe5d;
}