/* Estilos gerais */
body {
  font-family: "Roboto", sans-serif;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #234854;
}

.container {
  max-width: 500px;
  padding: 25px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h1 {
  font-size: 20px;
  margin-bottom: 10px;
  color: rgb(0, 0, 0); /* Cor do título */
}

p {
  font-size: 15px;
  margin-bottom: 20px;
  color: #696969; /* Cor do subtítulo */
}

label,
textarea,
input[type="text"],
button {
  width: 100%;
  margin-bottom: 10px;
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #ccc;
}

textarea {
  height: 80px;
}

button {
  background-color: #22d16b;
  color: #fff;
  border: none;
  cursor: pointer;
}

button:hover {
  background-color: #49b882;
}

button[type="submit"] {
  font-size: 18px; /* Tamanho da fonte do botão */
}

/* Estilos específicos para index.html */
#phoneNumber {
  margin-top: 5px; /* Adiciona espaço entre os campos */
  border: 1; /* Remove a borda no campo do número de WhatsApp */
}

#message {
  margin-top: 5px; /* Adiciona espaço entre os campos */
  border: 1; /* Remove a borda no campo de mensagem personalizada */
  height: 80px; /* Reduz a altura da caixa de mensagem */
}

/* Estilos específicos para index.html */
#phoneNumber,
#message {
  /* ... outros estilos ... */
  font-family: Arial, sans-serif; /* Define a fonte para o texto digitado */
}

/* Estilizando o placeholder */
#phoneNumber::placeholder,
#message::placeholder {
  font-family: Arial, sans-serif; /* Define a fonte para o texto do placeholder */
  color: rgb(190, 190, 190); /* Cor do texto dentro dos campos de entrada */
}

.generate-another-link {
  text-align: left;
  margin-bottom: 20px; /* Ajuste conforme necessário */
}

.generate-another-link a {
  color: blue; /* Cor do link */
  text-decoration: underline; /* Adiciona sublinhado ao link */
}
/* Estilos gerais */

/* Estilos para dispositivos menores, como tablets e celulares */
@media only screen and (max-width: 768px) {
  /* Adicione estilos específicos para dispositivos menores aqui */
  .container {
    max-width: 90%; /* Por exemplo, reduza a largura máxima do contêiner */
    padding: 15px; /* Reduza o preenchimento */
  }

  /* Ajuste outros estilos conforme necessário */
}

/* Estilos para dispositivos maiores, como computadores */
@media only screen and (min-width: 769px) {
  /* Adicione estilos específicos para dispositivos maiores aqui */
  .container {
    max-width: 500px; /* Mantenha uma largura máxima adequada para telas maiores */
    padding: 30px; /* Preenchimento padrão */
  }

  /* Ajuste outros estilos conforme necessário */
}