/*confugração padrão*/


body, html {
    background-color: #000000;
    height: 100%;
    margin: 0;
    color: #ffffff; /*cor do texto*/
    font: 16px "Lato", sans-serif;
}

/* A tela inicial ocupa toda a área visível */
#splash, #splash button{
    z-index: 10; /* fica por cima do site */
}

#splash {
position: fixed;       /* fixa na tela */
top: 0;
left: 0;
width: 100vw;          /* largura total da viewport */
height: 100vh;         /* altura total da viewport */
background: url('img/quasar.jpg') no-repeat center center;
background-size: cover; /* faz a imagem cobrir toda a tela */
display: flex;
align-items: center;
justify-content: center;
}

/* botão centralizado na tela inicial */
#splash button {
padding: 12px 24px;
font-size: 18px;
cursor: pointer;
border: none;
border-radius: 8px;
background-color: rgba(0,0,0,0.6);
color: white;
}

/* quando a tela inicial for escondida */
#splash.hidden {
display: none;
}
/*fim da splach screen*/

h2 {
    text-align: center;
    text-transform: uppercase;
    color: #ffffff;
}
h4 {
    text-align: center;
    text-transform: uppercase;
    color: #ffffff;
    font: 12px "Lato", sans-serif;
}

p {
    margin-bottom: 20px;
    color: #ffffff;
    font: 18px;
}

/*efeito parallax*/

.caixa1, .caixa2, .caixa3, .caixa4 {
    /* The image used */
    position: relative; /*posição a qualquer parte*/
    height: 100%;
    opacity: 0.7; /*transparência da imagem*/
    background-repeat: no-repeat;
    background-size: cover; /*cobre toda a área da div*/
    background-position: center;
    background-attachment: fixed; 
}

.caixa1 {
    background-image: url('img/blackhole.jpg');
}
.caixa2 {
    background-image: url('img/pulsar.jpg');
}
.caixa3 {
    background-image: url('img/nebulosa.jpg');
}
.caixa4 {
    background-image: url('img/bluestar.jpg');
}

.conteudo-titulo{
    position: absolute;
    top: 50%;
    width: 100%;
    text-align: center;
}
.conteudo-titulo span.titulo{
    color: #ffffff;
    background-color: rgb(3, 4, 49);
    font-size: 25px;
    padding: 18px;
    letter-spacing: 5px;
    text-transform: uppercase;
}
.conteudo {
color: #ffffff;
background-color: rgb(3, 4, 49);
text-align: justify;
padding: 50px 80px;
/*   display: none;  começa escondido 
padding: 20px;  */
}