/* 

            * LEGENDA *

    - CONTEUDOS EM OUTROS CSS
        - CONTAINER - Styles.css

    - 1.0 SECOES
        1.1 Secao Jogos estrategia e Puzzle
            1.1.1 - Baba is you
            1.1.2 - The Witness
            1.2.3 - Inscryption
            1.2.4 - Arco

        1.2 Secao Jogos progessao e historia
        

*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


/* ? -=-=-=- 2.0 MAIN E SECOES DA PAGINA PRINCIPAL -=-=-=- */
.secaoJogosPuzzle {
    text-align: center;
}
.caixaJogos {
    width: 65%;
    min-width: 720px;
    margin: 100px auto;
    text-align: center;
}
.caixaJogos > div {
    align-items: center;
}
.caixaJogos h2 {
    font-size: 3vw;
    margin-bottom: 5px;
}
.caixaJogos h2 {
    cursor: default;
    text-align: center;
    padding: 15px 40px;
    letter-spacing: 2px;
    position: relative;
    overflow: hidden;
    transition: all 0.2s;
}
.caixaJogos h2:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 0;
    background : #fff;
    left: 0;
    bottom: 0;
    transition: all .3s;
    opacity: 0.1;
}
.caixaJogos h2:hover:before {
    width: 100%;
}
.caixaJogos h3 {
    padding: 10px 0;
    display: block;
    margin-bottom: 5px;
    font-size: 2vw;
    cursor: default;
    transition: all 0.2s;
}
.descricaoJogos {
    margin-bottom: 5px;
    padding: 40px;
    font-size: max(1em, 19px);
    transition: all 0.2s;
}
.descricaoJogos p:first-of-type {
    border-bottom: #08080810 3px solid;
    padding-bottom: 20px;
}
.descricaoJogos p {
    text-align: justify;
    margin-bottom: 10px;
}
.caixaJogos h4 {
    cursor: default;
}
/* ! ANIMAÇÃO CAIXA JOGOS IR PRA DIREITA */
@media screen and (min-width:1024px) {
    .caixaJogos h2:hover,
    .caixaJogos .descricaoJogos:hover,
    .caixaJogos h3:hover,
    .caixajogos .jogosRogueDenovo {
        transform: translate(-10px);
    }
}

/* * 2.1 SECAO JOGOS PUZZLE E ESTRATEGIA */
    .secaoJogosPuzzle .caixaJogos h2 {
        background-color: var(--Laranja);
    }
    .secaoJogosPuzzle .descricaoJogos {
        background-color: var(--Laranja);
    }
    .secaoJogosPuzzle > div > div:nth-of-type(2) {
        background-color: var(--LaranjaClaro2);
        margin-bottom: 5px;
    }
    .secaoJogosPuzzle > div > div:nth-of-type(3) {
        background-color: var(--LaranjaClaro3);
        margin-bottom: 5px;
    }
    .secaoJogosPuzzle div > div > div {
        width: 80%;
        padding: 10px 40px;
        margin: 20px 0;
    }
    .secaoJogosPuzzle > div > div img {
        border-radius: 15px;
        width: 100%;
        box-shadow: 0px 10px 30px 15px rgba(0, 0, 0, 0.233);
    }
    .JogosPuzzleImagem:hover img {
        transform: scale(1.03);
        cursor: pointer;
        transition: all .5s;
    }
    .JogosPuzzleImagem {
        cursor: pointer;
        transition: all .5s;
    }
    .JogosPuzzleImagem img {
        transition: all .5s;
    }
    .caixaJogos:nth-of-type(1) h3 {
        background-color: var(--LaranjaClaro2);
    }
    .caixaJogos:nth-of-type(1) h3:nth-of-type(2) {
        background-color: var(--LaranjaClaro3);
    }


/* 2.1.1 BABA IS YOU */
    .babaisyouNome {
        width: 30% !important;
        background-color: #080808;
        padding: 10px;
        box-shadow: 0px 10px 30px 15px rgba(0, 0, 0, 0.233);
        margin-top: 20px;
    }

/* 2.1.2 THE WITNESS */
    .JogosPuzzleTheWitnessImagem {
        border-image-slice: 80 80 80 80;
        border-image-width: 20px 20px 20px 20px;
        border-image-outset: 12px 14px 12px 14px;
        border-image-repeat: repeat repeat;
        border-image-source: url("../img/theWitness/thewitnessborda.png");
        border-color: transparent;
        border-width: 0px;
        border-style: solid;
        z-index: -1;
        border-radius: 5px;
        border-color: transparent;
        transition: all .5s;
    }
/* 2.1.3 INSCRYPTION */
    .secaoJogosPuzzle > div > div:nth-of-type(3) > div:nth-of-type(1) h4 {
        font-family: 'Inscryption', Poppins, 'Arial';
        color: #c4803c;
        font-size: 3vw;
        margin: 10px 0;
    }

/* 2.1.4 ARCO */
    .secaoJogosPuzzle > div > div:nth-of-type(3) > div:nth-of-type(2) h4 {
        font-size: 2.35vw;
        margin: 10px 0;
    }

/* * -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */

/* * SECAO JOGOS HISTÓRIA */
.secaoJogosHistoria {
    color: #fff;
    content: "";
    width: 100%;
    height: auto;
    padding: 1px;
    left: 0px;
    text-align: center;
    position: relative;
	transform: skew(0, -4deg);
    box-shadow: rgba(0, 0, 0, 0.4) 0 -20px 60px;
    background-color: var(--VerdeEscuro3);
}
.secaoJogosHistoria .caixaJogos {
    transform: skew(0 , 4deg);
}
.secaoJogosHistoria .caixaJogos h2 {
    background-color: var(--VerdeEscuro2);
}
.secaoJogosHistoria .descricaoJogos {
    background-color: var(--VerdeEscuro2);
}
.secaoJogosHistoria .caixaJogos h3:nth-of-type(1) {
    background-color: var(--VerdeEscuro1);
}
.secaoJogosHistoria .caixaJogos h3:nth-of-type(2) {
    background-color: var(--Verde);
}
.secaoJogosHistoria > div > div {
    flex-wrap: wrap;
}
.secaoJogosHistoria > div > div > div {
    margin-bottom: 5px;
    padding-top: 30px;
    transition: all .2s;
}
.secaoJogosHistoria div > div > div > div {
    justify-content: left;
    margin: 10px 30px;
}
.secaoJogosHistoria > div > div a > img {
    width: 95%;
    border-radius: 15px;
    object-position: 0 0;
    object-fit: cover;
    transition: all 0.5s;
}
.secaoJogosHistoria > div > div a > img:hover {
    transform: scale(1.02);
    box-shadow:  0px 0px 20px 10px rgba(0, 0, 0, 0.4);
}
.secaoJogosHistoria > div > div > div >  div > img {
    width: 4.8vw;
    height: auto;
    margin-left: 10px;
}
.secaoJogosHistoria h4 {
    text-align: left;
    font-size: 4vw;
}

/* HOLLOW KNIGHT */
.secaoJogosHistoria > div > div:nth-of-type(2) > div:nth-of-type(1) {
    background-image: linear-gradient(var(--VerdeEscuro1), var(--verdeescuro1Meio));
}
.secaoJogosHistoria > div > div > div > img {
    -webkit-filter: drop-shadow(5px 5px 5px #fff);
    filter: drop-shadow(0px 0px 5px #fff);
}
.secaoJogosHistoria > div > div > div > img:nth-of-type(1) {
    width: 19vw;
}
.secaoJogosHistoria > div > div:nth-of-type(2) > div:nth-of-type(1) > div h4 {
    font-weight: 100;
    font-family: 'Times New Roman', Poppins, 'Arial';
    transition: all 0.5s;
}
.secaoJogosHistoria > div > div:nth-of-type(2) > div:nth-of-type(1) > div h4:hover  {
    text-shadow: 2px 2px 20px rgba(255, 255, 255, 0.3);
}

/* CELESTE */
.secaoJogosHistoria > div > div:nth-of-type(2) > div:nth-of-type(2) {
    background-image: linear-gradient(var(--verdeescuro1Meio), var(--Verde));
    padding-bottom: 30px;
}
.secaoJogosHistoria > div > div > div > img:nth-of-type(2) {
    width: 15vw;
}
.secaoJogosHistoria > div > div > div:nth-of-type(2) > div > img {
    width: 6vw;
}
.secaoJogosHistoria > div > div > div:nth-of-type(2) > div > h4 {
    color: #78c9e4;
}

/* TERRARIA */
.secaoJogosHistoria > div > div:nth-of-type(3) > div {
    background-color: var(--Verde);
    padding-bottom: 30px;
}
.secaoJogosHistoria > div > div:nth-of-type(3) > div > div > h4 {
    font-weight: 400;
}
.secaoJogosHistoria > div > div:nth-of-type(3) > div > div > img {
    width: 6vw;
}

/* * SECÃO JOGOS ROGUELIKE */
.secaoJogosRogue .caixaJogos h2 {
    background-color: var(--Laranja);
}
.secaoJogosRogue .descricaoJogos {
    background-color: var(--Laranja);
}
.secaoJogosRogue .jogosRogueDenovo {
    font-family: HeavyWei, 'Poppins', Arial;
    background-color: var(--Laranja);
    margin-bottom: 5px;
    font-size: 2vw;
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding-bottom: 20px;
}
.secaoJogosRogue .jogosRogueDenovo span {
    display: inline-block;
    margin: 0 10px;
}
@keyframes shake02 {
    0% { transform: translate(1px, 1px) rotate(calc(0deg + -10deg)); }
    10% { transform: translate(-1px, -2px) rotate(calc(-1deg + -10deg)); }
    20% { transform: translate(-3px, 0px) rotate(calc(1deg + -10deg)); }
    30% { transform: translate(3px, 2px) rotate(calc(0deg + -10deg)); }
    40% { transform: translate(1px, -1px) rotate(calc(1deg + -10deg)); }
    50% { transform: translate(-1px, 2px) rotate(calc(-1deg + -10deg)); }
    60% { transform: translate(-3px, 1px) rotate(calc(0deg + -10deg)); }
    70% { transform: translate(3px, 1px) rotate(calc(-1deg + -10deg)); }
    80% { transform: translate(-1px, -1px) rotate(calc(1deg + -10deg)); }
    90% { transform: translate(1px, 2px) rotate(calc(0deg + -10deg)); }
    100% { transform: translate(1px, -2px) rotate(calc(-1deg + -10deg)); }
}
@keyframes shake01 {
    0% { transform: translate(1px, 1px) rotate(calc(0deg + 10deg)); }
    10% { transform: translate(-1px, -2px) rotate(calc(-1deg + 10deg)); }
    20% { transform: translate(-3px, 0px) rotate(calc(1deg + 10deg)); }
    30% { transform: translate(3px, 2px) rotate(calc(0deg + 10deg)); }
    40% { transform: translate(1px, -1px) rotate(calc(1deg + 10deg)); }
    50% { transform: translate(-1px, 2px) rotate(calc(-1deg + 10deg)); }
    60% { transform: translate(-3px, 1px) rotate(calc(0deg + 10deg)); }
    70% { transform: translate(3px, 1px) rotate(calc(-1deg + 10deg)); }
    80% { transform: translate(-1px, -1px) rotate(calc(1deg + 10deg)); }
    90% { transform: translate(1px, 2px) rotate(calc(0deg + 10deg)); }
    100% { transform: translate(1px, -2px) rotate(calc(-1deg + 10deg)); }
}
.secaoJogosRogue .jogosRogueDenovo span:nth-of-type(1) {
    margin: 30px 20px 10px 10px;
}
.secaoJogosRogue .jogosRogueDenovo span:nth-of-type(2) {
    transform: rotate(-10deg);
    font-size: 3vw;
    animation-name: shake01;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}
.secaoJogosRogue .jogosRogueDenovo span:nth-of-type(3) {
    transform: rotate(-10deg);
    font-size: 5vw;
    animation-name: shake02;
    animation-duration: .5s;
    animation-iteration-count: infinite;
    font-weight: bold;
}
.secaoJogosRogue .caixaJogos h3 {
    background-color: var(--LaranjaClaro);
    height: 80px;
}
.secaoJogosRogue .caixaJogos h3:hover {
    transform: translate(0, 0);
}
.secaoJogosRogue > div > div > div:first-of-type h3 {
    font-family: isaac, 'Poppins', Arial;
    padding-top: 20px;
}
.secaoJogosRogue > div > div {
    flex-wrap: wrap;
}
.secaoJogosRogue > div > div > div {
    background-color: var(--LaranjaClaro);
}
.secaoJogosRogue div > div > div {
    width: 49.5%;
}
.secaoJogosRogue div > div > div:first-of-type {
    margin-right: 0.5%;
}
.secaoJogosRogue div > div > div img {
    width: 80%;
    border-radius: 10px;
    margin-bottom: 40px;
    transition: all 0.3s;
}
.secaoJogosRogue div > div > div img:hover {
    transform: scale(1.02);
    box-shadow:  0px 0px 20px 10px rgba(0, 0, 0, 0.4);
}
/* * -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */

/* ? -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */






/* tablet */
@media screen and (max-width: 1024px) and (min-width:720px) {
    nav ul li > a {
        font-size: 1.8vw;
        width: fit-content;
        padding: 0px;
    }
    .caixaJogos {
        width: 90%;
        min-width: 720px;
    }
    .caixaJogos h2 {
        font-size: 3.5vw;
    }
    .caixaJogos h3 {
        font-size: 2.7vw;
    }
    .descricaoJogos {
        font-size: 1.8vw;
    }
    .container > div {
        padding: 5px;
        margin: inherit 10px;
    }
    .secaoJogosPuzzle > div > div:nth-of-type(2) > div:nth-of-type(2) h4 {
        font-size: 3vw;
    }
    .secaoJogosPuzzle > div > div:nth-of-type(2) > div:nth-of-type(2) h4 span {
        font-size: 4vw;
    }
    .secaoJogosPuzzle > div > div:nth-of-type(3) > div:nth-of-type(1) h4 {
        font-size: 3vw;
    }
    .secaoJogosPuzzle > div > div:nth-of-type(3) > div:nth-of-type(2) h4 {
        font-size: 3vw;
        margin-bottom: 2px;
    }
}

/* celular */
@media screen and (max-width: 720px) {

    .navbarXande img {
        width: 90vw;
        height: auto;
    }
    nav ul {
        flex-direction: column;
        padding: 20px;
    }
    nav ul li a {
        font-size: 40px;
        margin: 15px 0;
    }
    .container {
        flex-wrap: wrap;
    }
    .caixaJogos {
        min-width: 10px;
        margin: 0;
        width: 100%;
    }
    .backgroundFormato {
        padding-top: 100px;
    }

    .caixaJogos h2 {
        font-size: 8vw;
    }
    .caixaJogos h3 {
        font-size: 7vw;
    }

    .descricaoJogos {
        font-size: 3.5vw;
    }
    .container > div {
        padding: 0px !important;
    }
    .secaoJogosPuzzle > div > div:nth-of-type(2) > div:nth-of-type(2) h4 {
        font-size: 7.5vw;
    }
    .secaoJogosPuzzle > div > div:nth-of-type(2) > div:nth-of-type(2) h4 span {
        font-size: 10vw;
    }
    .secaoJogosPuzzle > div > div:nth-of-type(3) > div:nth-of-type(1) h4 {
        font-size: 7vw;
    }
    .secaoJogosPuzzle > div > div:nth-of-type(3) > div:nth-of-type(2) h4 {
        font-size: 8vw;
    }

    .secaoJogosHistoria h4 {
        font-size: 10vw;
    }
    .secaoJogosHistoria > div > div > div div img {
        width: 12vw;
    }
    .secaoJogosHistoria > div > div > div:nth-of-type(2) > div > img {
        width: 14vw;
    }
    .secaoJogosHistoria > div > div:nth-of-type(3) > div > div > img { 
        width: 15vw;
    }

    .secaoJogosRogue div > div {
        flex-wrap: wrap;
    }
    .secaoJogosRogue div > div > div {
        width: 100%;
    }
    .secaoJogosRogue .jogosRogueDenovo span:nth-of-type(1) {
        font-size: 4vw;
    }
    .secaoJogosRogue .jogosRogueDenovo span:nth-of-type(2) {
        font-size: 5vw;
    }
    .secaoJogosRogue .jogosRogueDenovo span:nth-of-type(3) {
        font-size: 8vw;
    }
}