@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap');

* {
    text-decoration: none;
    list-style: none;
    font-family: "Lexend", sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /*Evita que os elementos aumente de tamanho inesperadamente facilitando o controle de responsividade*/
}

/* personalização do header */
.header {
    background-color: #000000;
    color: white;
    padding: 1.5rem;
    /*poderia ser 24px*/

    /* alinhamento dos itens */
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    flex-direction: row;


    /* header fixo */
    position: sticky;
    /*posicionamento do header para sobrepor os outros elementos*/
    left: 0;
    top: 0;
    z-index: 999;
    /*eixo z - profundidade do elemento*/
}


/* logo do header */
.logo img {
    width: 13%;
    /*usando o % para diminuir seu tamanho*/
}



/* estilizando o botão de login no header */
.login-button a button {
    border-radius: 15px;
    /*arredondamento da borda*/
    font-weight: 700;
    /*espessura da fonte do botão*/
    padding: 0.5rem;
    /*8px-preenchimento*/
    width: 5rem;
    /*poderia ser 80px*/
    background-color: #cccccc;
    /*cor de fundo do botão*/
    border: none
        /*remoção das bordas*/
}


@media (max-width: 600px) {
   .header img{
    width: 34%;
   }
}

/* fim da personalização do header */


/* section 1 */

.section-01 {
    background: #0a3d54;
    background-image: url(../imagens/artoras.png);
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    padding: 9rem;
    /*preenchimento interno da section*/

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    /*poderiamos usar 32px */
    flex-wrap: wrap;
    /*isso siginifica que as div poderão quebrar de linha, caso necessário*/
}


.div-01 {
    min-width: 299px;
    background-color: #0F2C59;
    /*cor de fundo da caixa*/
    text-align: center;
    /*alinha os textos no centro ou na altura desejada*/
    color: white;
    /*cor dos textos*/
    font-size: 1.3rem;
    /*tamanho da letra dentro da caixa*/
    min-width: 299px;
    padding: 1rem;
    height: 16rem;
    width: 25%;
    font-weight: bold
}

.div-01 p,span {
margin-bottom: 1.3rem;
}


.ul-div1 a {
    text-decoration: none;
    background-color: black;
    color: white;
    padding: 4px;
    font-size: 1rem;
    border-radius: 5px;
    /*arredondamento da borda*/

}

.ul-div1 li {
    margin: 7px 7px;
    /*alterando os 4 lados externos do elementos, primeiro valor é superior e inferior e o segundo valor é os laterais esquerda e direita*/

}



.div-02 {
    align-items: center;
    justify-content: center;
    text-align: center;
    display: flex;
    gap: 20px;
    flex-direction: column;
    min-width: 299px;
    padding: 1rem;
    height: 16rem;
    width: 25%;
    background-repeat: no-repeat;
    background: linear-gradient(90deg, rgba(97, 8, 8, 0.562) 0%, rgba(163, 6, 6, 0.575) 50%, rgba(0, 0, 0, 0) 100%), url(../imagens/Dark\ Souls\ Bonfire\ GIF.gif)
}

.div-02 i {
    color: black;
    font-size: 1.3rem;
    margin-right: 30px;
    gap: 15px;
}

.fa-solid:hover,
.fa-gamepad:hover {
    color: #9f111b;
    transition: 0.5s;
}


.img-div {
    /*aqui estamos estilizando a tarja em destaque entre as sections*/
    padding: 3%;
    /*preenchimento interno*/
    background-image: url(../imagens/6937560-panoramico-azul-textura-abstrato-grunge-fundo-vetor.jpg);
    /*caminho da img*/
    background-position: center;
    /*posicionameno da textura*/
    background-size: cover;
    /*preenchimento total da img*/
}


/*estilizando a segunda section*/
.section-02 {
    display: flex;
    /*tornando as caixas lado a lado*/
    align-items: center;
    /*alinhamento vertical*/
    justify-content: center;
    /*alinhamento horizontal*/
    background-color: #292c37;
    /*cor de fundo da caixa*/
    gap: 1.5rem;
    /*brecha entre as caixas*/
    padding: 5rem;
    /*preenchimento interno*/
    flex-wrap: wrap;
    /*caso necessário você pode quebrar*/
    text-align: center;
}

.content-section2 button {
    background-color: black;
    color: #cccccc;
    border: #000000;
    padding: 5px;
}

.content-section2 p{
    font-size: 1rem;
}


.gif02{
    background-image: url(../imagens/Sonic\ Boom\ Fight\ GIF\ by\ Xbox.gif);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.guias {
    color: #cccccc;
    font-size: 2rem;
}

.content-section3 button{
    background-color: black;
    color: #cccccc;
    border: #000000;
    padding: 5px;
}

.content-section3 p {
    font-size: 1.2rem;
    margin: 0.5rem auto;
}





.caixa img {
    width: 100%;
    height: 45%;
}

.caixa h3,
p {
    font-size: 1.1rem;
    text-align: center;
}


.caixa h3 {
    font-size: 2rem;
    margin-bottom: 5px;
    font-weight: 600;
}

.caixa button {
 
    border-radius: 5px;
    border: none;
}


.caixa button:hover {
    color: white;
    transition: 0.5s;
    background-color: #292c37;
}

.content-section2 img {
width: 100%;
height: 50%;
}


.content-section2 p button{
    text-align: center;
}




/*estilização das 3 div sec 2*/
.caixa {
    width: 25%;
    /*largura da caixa*/
    height: 22rem;
    /*altura da caixa*/
    background-color: #cccccc;
    /*cor de fundo da caixa*/
    min-width: 299px;
    /*largura minima*/
    font-size: 2rem;
    /*tamanho das letras*/
    color: black;
    /*cor das letras */
    box-shadow: 10px 10px 20px black;
    /*sombra externa das caixas*/
    cursor: pointer;
    /*ativando cursor pointer*/
}

.caixa:hover {
    box-shadow: 12px 12px 25px #cccccc;
    /*sombra externa das caixas*/
    transition: 0.5s;
}


.section-03 {
    display: flex;
    /*tornando as caixas lado a lado*/
    align-items: center;
    /*alinhamento vertical*/
    justify-content: center;
    /*alinhamento horizontal*/
    background-color: #292c37;
    /*cor de fundo da caixa*/
    gap: 1.5rem;
    /*brecha entre as caixas*/
    padding: 5rem;
    /*preenchimento interno*/
    flex-wrap: wrap;
    /*caso necessário você pode quebrar*/
}

.div-04,
.div-03 {
    height: 15rem;
    padding: 1rem;
    text-align: center;
    font-size: 1.5rem;
}


/* estilização dos textos da primeira caixa */
.content-text {
    text-align: center;
    /*Alinhando os textos ao inicio*/

}

.icondiv3 i {
    margin-bottom: 1.2rem;
    font-size: 2.5rem;
    /*tamanho da letra*/
    margin-top: 1.2rem;
    /*espaçamento superior*/
    font-weight: 500;
    /*peso da fonte/deixando a fonte mais marcada*/
}

.button-div-04 a button {
    padding: 0.5rem;
    background-color: #9f111b;
    font-weight: 600;
    margin: 1rem 0;
    border: none;
    border-radius: 10px;
    color: white;
}


.p-div-03 p {
    margin-top: 1.5rem;
    font-size: 1.5rem;
}

.section-04 {
    display: flex;
    /*tornando as caixas lado a lado*/
    align-items: center;
    /*alinhamento vertical*/
    justify-content: center;
    /*alinhamento horizontal*/
    background-color: #292c37;
    /*cor de fundo da caixa*/
    gap: 1.5rem;
    /*brecha entre as caixas*/
    padding: 5rem;
    /*preenchimento interno*/
    flex-wrap: wrap;
    /*caso necessário você pode quebrar*/
    text-align: center;
    color: white;
}

.gif {
    background-image: url(../imagens/Ragnarok\ Atreus\ GIF\ by\ Santa\ Monica\ Studio.gif);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color: white;
}


.gif2 {
    background-image: url(../imagens/From\ Software\ Announcement\ GIF\ by\ BANDAI\ NAMCO.gif);
    background-position: right;
    background-repeat: no-repeat;
    background-size: cover;
    color: white;
}

.gif3 {
    background-image: url(../imagens/Bored\ Video\ Game\ GIF\ by\ CAPCOM.gif);
    background-position: left;
    background-repeat: no-repeat;
    background-size: cover;
    color: white;
}


.whatsapp img {
    width: 50px;
}

.whatsapp { /*div que guarda o icon whatsapp*/
    position: fixed; /*posicionamento fixo*/
    right: 6px; /*posicionado á direita (25px)*/
    bottom: 230px; /*posicionando á 25px do bottom*/
}

.whatsapp img:hover{
width: 60px;
transition: 0.5s;
}


@media (max-width: 600px) {
   .whatsapp  {
    position: fixed;
    right: 6px;
 bottom: 285px; /*posicionando á 25px do bottom*/
   }
}

/*inicio estilização footer/rodapé*/
.footer {
    background-color: #000000;
    /*cor de fundo do footer*/
    font-size: 1.3rem;
    /*tamanho das letras no footer*/
    padding: 2rem;
    /*preenchimento interno*/
    text-align: center;
    /*alinhando os textos no centro*/
}

.content {
    display: flex;
    /*colocando as listas lado a lado*/
    align-items: center;
    /*alinhamento vertical*/
    justify-content: center;
    /*alinhamento horizontal*/
    gap: 3rem;
    /*espaçamento dos elementos*/
    flex-wrap: wrap;
    /*Quebra das caixas*/
    margin-bottom: 1.5rem;
}

.socialmedia {
    padding: 1.5rem;
    /*espaçamento interno*/
}

.socialmedia i {
    color: white;
    /*cor dos icones*/
    font-size: 2em;
    /*32px/tamanhos dos icones*/
    margin: 0.5rem;
    /*espaçamento de ambos os lados*/
}


/*linha divisória entre as div principais*/
.line {
    width: 60%;
    margin: 0.5rem auto;
    /*espaçamento em torno da linha superior e inferior (0.5rem) com as laterais automáticas (navegador)*/
    background-color: #9f111b;
    /*cor de fundo da borda*/
    border: none;
    /*removendo o padrão da borda, possibilitando que trocamos a cor para qual desejarmos*/
    height: 2px;
    /*altura da nova linha com cor trocada, sem ela a nova borda com a cor mudada não haverá efeito algum.*/
}

.div-list ul li a {
    color: #cccc;
    /*cor das letras nas ancoras/listas*/
}

.div-list ul li a:hover {
    transition: 0.5s;
    /*tempo de transição do mouse ao passar pelo item*/
    color: #b11623;
    /*cor da letra ao mouse/dedo do usuario ser passado por cima do texto*/
}


.div-list ul li {
    margin-bottom: 0.7rem;
    /*margem inferior para as listas ficarem um pouco distantes entre si*/
}

@media (max-width: 600px) {
    .content {
        flex-direction: column;
    }
}