*{ /* quando ussa o asteriscos está selecionando tudo que tem na página*/
    margin: 0;
    padding: 0;
}
header{

    background-color: rgb(27, 173, 173);
    padding: 10px; /*espaço entre o cabeçalho e o texto que é o tpitulo*/
    text-align: center; /*alinhamento do cabeçalho*/
    color: rgb(255, 255, 255);  /* cor do texto do cabeçalho*/  

}

.title{
    
    font-size: 26px;/*tamanho da fonte do título*/
    

}

.container{
    
    margin: auto; /*centralizar a class container*/
    width: 1230px; /*tamanho máximo da class container*/
}

body{
    font-family: Arial, Helvetica, sans-serif; /*família de fonte a ser colocada na página toda, ou seja no body*/
    background-color: black; /*cor da pa´gina*/
    color: rgb(0, 0, 0);
    
}

.formContainer{
         
    max-width: 230px; /*limitar o tamanho do div cformContainer*/
    background-color: #FFFFFFBB;
    padding: 20px; /* colocar espaçamento do texto para as bordas*/
    float: right; /* flutuar o texto para direita*/




}

h2{
    font-size: 16px; /* tamanho da fonte*/
}

.mb{
    margin-bottom: 10px; /* Distancia abaixo do texto*/
    

}

section{ /* mechendo da div section*/
   
    padding: 20px; /* colocando um espaço entre a imagem do background*/
    background-image: url('./IMAGE/people.jpg'); /* colocando imagem como backgound na section*/
    overflow: hidden; /* Fazer com que a imagem preencha tudo o que ela dev preencher*/
    background-size: cover; /* tamanho da imagem exato com o tamanho da div*/
}

input, select{

    width: 100%;
    box-sizing: border-box; /* pra ficar alinhado os box com as caixas de texto*/
    padding: 10px; /* aumentar o tamanho das caixas de texto tanto do select quanto do input*/
    border: none; /* tirar a borda */
    margin-bottom: 10px; /* Distancia abaixo das caixas*/

}
input[type="submit"]{ /* seletor input toda vez que tiver um botão tipo submit será aplicado esse style*/
    background-color: rgb(27, 173, 173);/* cor do submit*/
    color: #FFFFFF; /* cor do texto*/
    font-weight: bold; /* peso do texto negrito*/

}


select{
  
    appearance: none; /* aparencia*/
    -moz-appearance: none; /* aparencia no mozila*/
    -webkit-appearance: none; /* aparencia no safari */
    background-image: url(IMAGE/arrow.jpg); /* definir a imagem no select, um icone de seta, podemos usar outas tambem*/
    background-repeat: no-repeat; /* não repetir a imagem no select*/
    background-position: calc(100% - 10px) center; /* posicionar a seta, primeiro definindo ocalc do x em 100% para
                             ficar no final, menos 10px da esquerda para direita e o center para ficar centralizada*/
}

footer{
    background-color: #202121;
    padding: 40px;
    text-align: center;
}

.picture{
    width: 160px;  /* Alterar o tamanho da imagem*/


}


.description{
  /*   background-color: #FFFFFF;*/
    color: #FFFFFF; /* cor do texto*/
    display: inline-block; /* aparencia*/
    max-width: 40%; /* tamanho máximo*/
    margin-left: 40px; /* afastar para esquerda 20 pixels*/
}



.description p, .description h3{ /* Fazer as configurações apenas no paragrafo e no h3 do description*/
    margin-bottom: 20px; /* espaço entre os textos */
    text-align: left;

}
.descriptionh3{
    font-size: 24px;
}

@media screen and (max-width: 600px){

   

        
.container{
    
   
    width: 100%; /*tamanho máximo da class container*/
}
    
.formContainer{
    float:  none;
    width: 100%; /*tamanho máximo da class container*/
    position: absolute;
            top: 80px;
            left: 15%;
            



}

footer{
  
    width: 100%; /*tamanho máximo da class container*/
    position: absolute;
            top: 570px;
            left: 0;
            
           
}


.picture{
    position: absolute;
    top: 40px;
    left: 55px;
    width: 300px;  /* Alterar o tamanho da imagem*/
   

}



.description{
    /*   background-color: #FFFFFF;*/
    float: none;
    position: absolute;
    top: 500px;
    left: 15%;
      font-size: 20px;
      
      
  }

  .description p, .description h3{ /* Fazer as configurações apenas no paragrafo e no h3 do description*/
    
    text-align: center;

}



function{
    background-color: aqua;

}

}