/* Estilo básico do formulário */
form {
  width: 400px;
  margin-left: 50px;
  margin-top: 10%;
  box-sizing: border-box;
}

label {
  display: block;
  margin-bottom: 15px;
  margin-top: 10px;
  font-size: 16px;
}

input,
textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

button {
  background-color: #4caf50;
  color: #fff;
  border: none;
  cursor: pointer;
  width: 100px;
  height: 45px;
  border-radius: 4px;
  box-sizing: border-box;
}

button:hover {
  background-color: #29802e;
}

.message {
  display: none; /* Ocultar as mensagens inicialmente */
  margin-top: 20px;
  padding: 10px;
  border-radius: 5px;
}

#success-message {
  width: 100%;
  font-size: 17px;
  margin-left: 3%;
  background-color: #50c756;
  color: #fff;
}

/* MEDIA QUERY para telas menores */
@media (max-width: 768px) {
  form {
      width: 90%; /* Reduzir o formulário para 90% da largura da tela */
      margin-left: 5%;
      margin-top: 5%; /* Menos margem no topo em telas menores */
  }

  button {
      width: 80%; /* Botão vai ocupar 80% da largura do formulário */
      height: 40px; /* Ajustar a altura do botão */
  }
}

/* Para telas muito pequenas (exemplo: celulares em retrato) */
@media (max-width: 480px) {
  form {
      width: auto;
      margin-left: 5%;
      margin-right: 5%;
      margin-top: 5%;
  }

  label {
      font-size: 14px; /* Reduzir o tamanho da fonte para telas pequenas */
  }

  input,
  textarea {
      padding: 10px; /* Aumentar o padding em dispositivos móveis para facilitar o clique */
  }

  button {
      width: 90%;
      height: 50px;
  }
}