@import url('https://fonts.googleapis.com/css2?family=Audiowide&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Audiowide&family=Comfortaa:wght@500&display=swap');
/*Usando 100% da pagina web*/
*{

   padding: 0;
   margin: 0;
   box-sizing: border-box;

}
html{

    scroll-behavior: smooth;

}
body{

    font-family: 'Comfortaa', cursive;
}
/*o titulos de cada topico*/
h3{

    background-color:rgba(63, 27, 163, 0.829);
    color:white;

    text-align: center;
    
    font-size: 23px;
    font-family: 'Audiowide', cursive;
    font-weight: 200;

    padding: 10px;
    padding-top:10px;

    border: 3px solid black;
    width: 200px;

    /*CENTRALIZAR TEXTO COM BORDA*/
    margin-left: auto;
    margin-right: auto;
    /*----------------------------*/
}
/*os nomes de personagens*/
h4{

    text-align:center;
    font-size:22px;
    flex-wrap:wrap;
    padding: 10px;

    background-color:orange;

    border-bottom:3px solid black;

}
/* as descricoes*/
p{

    text-align:center;
    font-size:18px;

}
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Header - - - - - - - - - - - - - - - - - - - - - - - - - -*/
/*O titulo, subtitulo e links*/
.header{

    /*width:100%;*/
    height:300px;

    font-size:25px;
    text-align: center;

    border-bottom: 1px solid black;
    background-color:rgba(107, 25, 145, 0.788);

    flex-wrap: wrap;

}
/*a imagen do titulo principal*/
figure{

    text-align: center;

    flex-wrap:wrap;

}
/*links d header*/
.header a{

    color:white;
    background-color:rgba(63, 27, 163, 0.829);

    text-decoration: none;
    font-weight: 600;

    padding-left:30px;
    padding-right:30px;
    padding-top: 5px;
    padding-bottom: 5px;

    border: 3px solid black;
    border-radius: 20px;

}
/*reacao quando mouse passa em cima*/
.header a:hover{

    background-color:white;
    color:black;

}
/*titulo*/
.header__titulo{

    width:75vw;
    height:100%;

}
/*subtitulo*/
.header__subtitulo{

    width:45vw;
    height:50%;
    margin-bottom: 30px;

}
.capa{

    background-color:black;

}
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - hitoria - - - - - - - - - - - - - - - - - - - - - - - - - -*/
/*fundo de historia*/
.historia{
        /*width: 100%;*/

        height: 700px;

        border-top: 1px solid black;

        padding-top:10px;

        flex-wrap:wrap;

        /*background-color:rgb(85, 84, 84);*/
        background-image: url(../Imagens/Space);
        background-size: cover;
        background-repeat: no-repeat;

}
/*a imagen de historia*/
.historia img{

    height: 400px;

    padding-top: 50px;
    padding-bottom: 50px;

}
/*paragrafo de historia*/
.historia p{

    border: 3px solid black;

    margin-right: 10%;
    margin-left: 10%;
    margin-bottom: 20px;
    padding: 10px;

    background-color:rgb(39, 83, 109);
    color:white;

}
/*link de historia*/
.historia a{

    margin-left:10%;
    font-size: 20px;
    border: 3px solid black;
    padding: 10px;
    border-radius: 20px;

    background-color: black;
    color:blue;

    text-decoration: none;
    font-weight: 600;

}
.historia a:hover{

    background-color:white;

}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Personagens - - - - - - - - - - - - - - - - - - - - - - - - - -*/
/*div de fundo*/
.personagens{

    /*width: 100%;*/

    height: 1000px;

    padding-top:10px;
    padding-bottom:10px;

    border-top: 1px solid black;

    /*background-color:rgb(173, 88, 8);*/
    background-image: url(../Imagens/astronaut_cat_10_fundo.png);
    background-size: cover;
    background-repeat: no-repeat;

    flex-wrap:wrap;

}
/*separa titulo dos personagens*/
.grupo{

    display: flex;
    align-items:center;
    justify-content:space-around;
    flex-wrap: wrap;

}
/*grupo de imagens*/
.personagens__imagem{

    width:20vw;
    text-align:center;

    margin-top: 10px;

    border: 3px solid black;
    background-color:black;

    flex-wrap: wrap;

}
/*a imagen em se*/
.personagens__imagem img{

    width:100%;
    height:29vh;

    padding-top:10px;

}
/*texto de personagens*/
.personagens p{

    border-top: 3px solid black;

    background-color:yellow;

    flex-wrap:wrap;

    padding: 10px;

}
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Galeria - - - - - - - - - - - - - - - - - - - - - - - - - -*/
/*div de fundo*/
.galeria{

    height: 800px;

    padding-top:10px;

    /*background-color:rgba(12, 11, 90, 0.89);*/
    background-image: url(../Imagens/Journey);
    background-size: cover;
    background-repeat: no-repeat;

}
/*grupo de imagens*/
.galeria__imagem{

    width:20vw;
    text-align:center;

    margin-top: 10px;

    border: 3px solid black;
    background-color:black;

}
/*a imagen em se*/
.galeria__imagem img{

    width:100%;
    height:29vh;

    padding-top:10px;

}
/*video*/
.galeria__imagem iframe{

    width:100%;
    height:29vh;

    padding-top:10px;

}
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Footer - - - - - - - - - - - - - - - - - - - - - - - - - -*/
.footer{

   /* width: 100%;*/

    height:200px;

    padding-top:10px;

    border-top:1px solid black;
    background-color:black;

}
.footer p{

    color:white;

}