#banner 
{
    min-height: 100vh; /* definimos uma altura mínima do banner para 100vh (view height), que significa que o banner terá 100% da altura da tela*/
    box-sizing: border-box; /* fazendo com o que no cálculo da altura do banner leve em conta o tamanho da borda e do padding */
    padding: 20px; /* Padding evita que o conteúdo encoste na borda ou a borda encoste no banner */
    color: white;
    
	background-image: url("../img/banner.jpg"); /* com a propriedade background-image definimos a imagem de fundo passando o valor url("") com o caminho da imagem*/
    background-size: cover; /*  utilizamos a propriedade background-size: cover para que a imagem de fundo cubra toda a área do banner proporcionalmente */
    background-position: center; /* Vai centralizar a imagem no centro do banner */
    
	background-color: rgba(0, 0, 0, 0.4); /* Defini uma cor do backgroud para ser misturada como na linha de baixo */
    background-blend-mode: multiply;/* Mistura a cor do background com a imagem */
    
	display: flex; /*  para organizar os elementos dentro do banner*/
    flex-direction: column; /*  Modificar o eixo horizontal para o vertical*/
    justify-content: center; /*  Centralizando o conteúdo verticalmente */
    align-items: center; /*  Centralizando o conteudo horizontalmente */
}

#banner h1
{
	margin-bottom:10px;
	font-size:80px;

}

#banner h2
{
	margin: 0;
	font-size: 30px;
	text-align: center;
}

#navbar /* Tira a borda arredondada do menu e mantém a margem padrão*/
{
    margin: 0;
    border-radius: 0;
}

section
{
	box-sizing: border-box;
	padding: 20px 0 50px;
}

section:nth-child(odd) /* utilizando o seletor section:nth-child(odd) selecionamos todas as seções ímpares, e com a propriedade background-color definimos uma cor de fundo, assim alternando a cor de cada seção; */
{
    background-color: #e2e2e2;
}
section .title /* criamos a aparência do título de cada seção, definindo o display para inline-blockborder-bottom definindo um risco abaixo do título. */
{
    display: inline-block;
    margin: 10px auto 40px;
    padding: 0 10px 5px;
    border-bottom: 3px solid #222222;
}

#sobre .content /* modificamos a aparência do conteúdo da descrição */
{
    padding-top:20px;
}