html, body
{
    height: 100%; /*ocupa 100% da área visível do navegador*/
    margin: 0;
    font-family: sans-serif;
    color:#1d0202;
}

.parallax1{
    position: relative; /*define posicionamento relativo*/
    background-image: url("../img/img_parallax.jpg"); /*insere a imagem de fundo*/
    height: 100%; /*ocupa 100% da div parallax1*/
    opacity: 0.5; /*deixa a imagem mais opaca*/
    background-attachment: fixed; /*deixa a imagem fixa*/
    background-position: center; /*centraliza a imagem*/
    background-repeat: no-repeat; /*não repete a imagem caso a tela seja maior que a imagem*/
    background-size: cover; /*ajuda a proporção da imagem na tela*/
}
.caption{
    position: absolute; /*define o posicionamento da div*/
    left: 0; /*gruda o quadro no canto esquerdo*/
    top: 50%; /*coloca o quadro com o texto no centro da div parallax1*/
    width: 100%; /*largura de 100%*/
    text-align: center; /*define o texto ao centro*/
}
.caption span.border{
    background-color: #f90202; /*define a cor de fundo do texto*/
    color: white; /*define a cor do texto*/
    padding: 20px; /*define o espaçamento entre a caixa e o texto*/
    font-size: 25px; /*aumentar tamanho da fonte*/
    letter-spacing: 10px; /*aumenta espaçamento entre as letras*/
}

.parallax2{
    position: relative;
    background-image: url("../img/img_parallax2.jpg");
    height: 100%;
    opacity: 0.5;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.parallax3{
    position: relative;
    background-image: url("../img/img_parallax3.jpg");
    height: 100%;
    opacity: 0.5;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.box1{
    background-color: white;
    text-align: justify;
    padding: 50px 80px;
}

.box1 h3{
    text-align: center; 
}

.box2{
    background-color: #808080f7;
    color: white;
    text-align: center;
    padding: 50px 80px;

}

/*Exercício
Crie um hotsite utilizando o efeito parallax sobre Pokemon*/