* {
  box-sizing: border-box;
  margin: 0;
  
/*ajuste da borda do site inteiro*/
}

body{
  background-color: #5fcfaf;
}

#page-home {
  height: 100vh;
  background-color: #5fcfaf;
  height: 35vw bottom;
/*ajuste do bloco inteiro */
}

/*.cabeçalho {
  display: flex;
}*/

.cabeçalho {
  /* chamar ou por header ou cabeçalho funciona
  retangulo cabeçalho*/
  display: flex;
  /*ajusta imagem e texto no cabeçalho para ficar um do lado do outro*/
  border: #f0f2f2;
  background-color: #f0f2f2;
  /*cor do cabebeçalho*/
}

.cabeçalho img {
  width: 130px;
  height: 130px;
  /*ajuste balança*/
}

.cabeçalho div {
  display: flex;
  flex-direction: column;
  margin: 25px 0;
  /*ajuste da escrita do cabeçalho*/
}

.cabeçalho div p {
  margin-top: 10px;
  /*ajuste da posição do slogan que esta no cabeçalho*/
  color: #398f76;
  font-weight: 400;
  font-style: italic;
}

.cabeçalho div h1{
  color: black;
  font-weight: 700;
}

.conteudo {
  padding: 50px;
  /*centraliza o texto que estava no canto esquerdo*/
}

.conteudo h4{
  height: 70px;  
  /*ajuste da posição do texto*/
  font-weight: 500;
  /*negrito da fonte*/
}

.conteudo input {
  background-color: #f0f0f5;
  color: #000;
  /*cor dentro do input*/
  border: 0;
  /*tira a borda do input*/
  padding: 5px 5px;
  /*aumenta a caixa do input*/
  font-size: 16px;
  /*aumenta o texto dentro do input*/

  outline: none;
  /*efeito visual*/
}

.coluna {
  display: flex;
  /*coloca insira seus dados e resultados em colunas*/
}

/*.coluna li img {
  width: 50px;
  height: 50px;
}*/

.um {
  margin-right: 250px;
  /*distanciamento das duas colunas*/
}

.um .titulo {
  /*ajuste da imagem com o titulo das colunas*/
  display: flex;
  /*coloca a imagem do lado do titulo*/
  margin-bottom: 25px;
  /*ajuste da distancia do textin */
}

.um .titulo img {
  /*ajuste imagem*/
  height: 50px;
  /*ajuste horizontal*/
  margin-right: 25px;
  /*distancia entre titulo e imagem*/
  width: 50px;
  /*ajuste vertical*/
}

.um .titulo h3 {
  justify-content: center;
  margin: auto 0;
  /*ajuste do titulo*/
}

.um button {
  /*ajuste botão calular*/
  background-color: #398f76;
  border: none;
  /*borda preta*/
  border-radius: 10px;
  /*deixar sem ponta a borda*/
  color: #fff;
  /*cor do botão*/
  cursor: pointer;
  font-weight: 700;
  /*negrito*/
  margin-top: 25px;
  margin-left: 40px;
  /*ajuste do bloco para ficae "depois" da linha da imagem*/
  padding: 10px 25px;
  /*grossura do botão*/
  transition: filter 0.5s;
  /*efeito ao colocar o mouse em cima*/
  
}

.um button:hover {
  filter: brightness(0.7);
  /*efeito cor mudando ao colocar o mouse em cima*/
  
}

.formulario {
  display: grid;
  margin-left: 40px;
  /*ajuste do bloco para ficae "depois" da linha da imagem*/
  /*colocar digite sua altura e digite seu peso um em baixo do outro*/
}

.formulario label:nth-child(3) {
  margin-top: 25px;
  /*espaçamento entre as areas para serem preenchidas ( entre campos)*/
}


.formulario input:nth-child(4) {
  margin-top: 5px;
  /*espaçamento entre as areas para serem preenchidas(entre o campo de escreve e digite seu peso)*/
}

.formulario input:nth-child(2) {
  margin-top: 5px;
  /*espaçamento entre as areas para serem preenchidas (entre o campo de escreve e digite sua altura)*/
}

.dois .titulo{
  display: flex;
  /*coloca o titulo do lado da imagem*/
}

.dois img {
  height: 50px;
  margin-right: 25px;
  width: 50px;
}

.dois h3 {
  margin-top: 15px;
  /*ajuste vertical titulo*/
}

/*  preferi criar o stylesheet 
 * Se serve de dica prefira utilizar 'classes' ao inves de 'ids' pra caso de precisar repetir o nome.
 */

 .resposta{
   display: grid;
   margin-left: 45px;
  /*ajuste do bloco para ficae "depois" da linha da imagem*/
 }

#resultado {
  transition: border-radius 0.5s;
}

.dois .resposta h4{
  margin-top: 15px;
  /*ajuste vertical */
  font-weight: 500;
  /*negrito da fonte*/
}

@media screen and (max-width: 425px){
  
  *{
    
  }
  .coluna{
    margin-top: 30vh;
    display: inline-block;
    
  }