* { /*reset*/
    margin: 0px;
    padding: 0px;
    text-decoration: none;
}

body {
    min-width: 271px;
    max-width: 375px;
    margin: 0px auto;
    background-color: #e0dddd;
}

#_header{
    width: 90%;    
    height: 25px;
    margin: 10px auto;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

#_header .icones{
    width: 25px;
    border: 2px solid black;
    padding: 3px;
    border-radius: 5px;
    background-color: rgb(255, 255, 81);
    cursor: pointer;
}

#Super-trunfo {
    font-size: 1.7rem;
}

#Super-trunfo > span {
    color: rgb(255, 255, 2);
    text-shadow: 1px 1px 1px black;
}


/* Menu de ajuda */
.GameBoard ._Ajuda {
    display: none;
}

.Ajudaon ._Ajuda{
    display: block;
    position: fixed;
    min-width: 271px;
    max-width: 375px;
    height: 92vh;
    margin: 0px auto;
    background-color: rgba(151, 151, 151, 1);
    overflow: scroll;
    border-radius: 5px;
    z-index: 2;
    left: 0;
    right: 0;
}

.pAjuda {
    text-align: center;
    font-size: 1.5rem;
}

.listaAjuda {
    font-family: 'Courier New', Courier, monospace;
    font-size: 1rem;
    padding: 5px 2px;
    margin: 5px 0px;
    font-weight: bold;
    text-align: justify;
}

#FecharAjuda {
    background-color: rgba(255, 255, 255, 0.5);
    width: 70px;
    height: 30px;
    font-weight: bold;
    border-radius: 5px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin: 50px 0px;
}

/*Fim do menu de ajuda

Menu de opções */

.GameBoard ._Opcoes {
    display: none;
}

.Opcoeson ._Opcoes{
    display: block;
    position: fixed;
    min-width: 271px;
    max-width: 375px;
    height: 92vh;
    margin: 0px auto;
    background-color: rgba(151, 151, 151, 1);
    overflow: scroll;
    border-radius: 5px;
    z-index: 2;
    left: 0;
    right: 0;
}

.sonson, .sonsoff{
    width: 40%;
    height: 30px;
    margin: 10px 5px;
    color: black;
    border: 2px solid rgb(71, 71, 71);
    border-radius: 5px;
}

.sonsoff::after{
    content: " OFF";
}

.sonson::after{
    content: " ON";
}

.pOpcoes {
    text-align: center;
    font-size: 1.5rem;
    margin: 10px 0px;
}

.HRopcoes{
    width: 95%;
    margin: 0 auto;
}

.contato{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.linkContato{
    display: flex;
    justify-self: center;
    align-self: center;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 30px;
    color: black;
    border: 2px solid rgb(71, 71, 71);
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 5px;
    text-align: center;
    margin: 5px 10px;
}

/*Fim do menu de opções

O jogo (página 1)*/

.Jogo{
    width: 98%;
    height: 90vh;
    margin: 0px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url(./Imagens/Jogadores/Capa-super-trunfo.png);
    background-repeat: no-repeat;
    background-size: cover;
}

.ComecarJogo{
    font-family: 'Courier New', Courier, monospace;
    font-size: 2rem;
    font-weight: bold;
    border: 2px solid rgb(4, 117, 0);
    border-radius: 5px;
    padding: 5px 8px;
    margin-bottom: 20px;
    background-color: rgb(106, 235, 74);
}

.levelpart{
    height: 80vh;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.pLevel {
    font-family: 'Courier New', Courier, monospace;
    font-size: 2rem;
    color: white;
    text-shadow: 2px 2px 2px black;
    font-weight: bold;
    text-align: center;
    margin-top: 20px;
}

.divLevel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    justify-items: center;
    align-self: center;
}

.btnLevel{
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.5rem;
    width: 120px;
    height: 50px;
    margin: 10px 0px;
}

.btnVoltar{
    font-family: 'Courier New', Courier, monospace;
    font-size: 1rem;
    margin-top: 20px;
    width: 100px;
    height: 30px;
    background-color: rgb(135, 238, 149);
    margin-bottom: 10px;
}

/*Fim da página 1 e escolha de Level

Inicio do jogo*/

._jogo{
    background-image: url(./Imagens/Icones-menu/Maracana.png);
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
}

/*esturtura da carta*/

._jogo .escudoTime, ._jogo .escudoTime2 {
    background-image: linear-gradient(rgb(22, 129, 0), rgb(0, 255, 0));
    width: 98%;
    height: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 5px;
}

._jogo .escudoTime2{
    background-image: linear-gradient(rgb(19, 0, 129), rgb(0, 47, 255));
}

.escudoTime > img, .escudoTime2 > img{
    height: 30px;
}

.NomeJodagor{
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.2rem;
    font-weight: bold;
    color: white;
    text-shadow: 2px 2px 2px black;
    padding-right: 10px;
}

.FotoJogador {
    margin: 10px 0px;
    width: 230px;
    height: 175px;
}


.FotoDesafio > img{
    margin: -40px 0px;
    transform: scale(0.5);
}

.atributosCarta {
    display: none;
}

.LabelAtributos{
    background-color: rgb(6, 51, 6);
    border-radius: 5px;
    box-shadow: 2px 2px 20px rgb(177, 177, 177);
    width: 80%;
    height: 30px;
    margin: 3px 0px;
    padding: 0px 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.2rem;
    font-weight: bold;
}

input[type='radio']:checked + .LabelAtributos{
    background-color: rgb(68, 255, 68);
    color: black;
}

.LabelDesafio {
    height: 20px;
    margin-top: -5px;
    background-color: rgb(68, 255, 68);
    color: black;
}

.VersusDesafio {
    width: 100%;
    height: 35px;
    margin: 15px 0px;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.8);
    color: rgb(212, 12, 12);
    font-size: 2rem;
    font-weight: bolder;    
    text-shadow: 2px 2px 15px white;
    font-weight: bolder;
    animation: fadein 0.5s linear;
}

@keyframes fadein {
    from {transform: scale(3);}
    to {transform: scale(1);}
}

.botoesJogo{
    width: 80%;
    display: flex;
    justify-content: space-between;
}

/*Configuração do placar do jogo*/
.Placar{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    background-color: rgba(128, 128, 128, 0.9);
    width: 95%;
    border-radius: 5px;
    border: 2px solid black;
    margin-bottom: -10px;
}

.Placar > p{
    text-align: center;
    width: 100%;
    font-size: 1.2rem;
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
    letter-spacing: 5px;
    background-color: rgba(128, 128, 128, 1);
    border-radius: 5px 5px 0px 0px;
}

.Placar > span{
    width: 30%;
    text-align: center;
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
    color: white;
    margin: 3px 3px;
    background-color: rgb(68, 62, 62);
    border-radius: 5px;
}

/*Efeito que pisca o placar, verde caso ponto do player, vermelho caso ponto da máquina, e amarelo para empate*/
@keyframes PiscaVerde {
    from {background-color: rgb(68, 62, 62);}
    to {background-color: rgb(29, 255, 29);}
  }

@keyframes PiscaVermelho {
    from {background-color: rgb(68, 62, 62);}
    to {background-color: red;}
  }

@keyframes PiscaAmarelo {
    from {background-color: rgb(68, 62, 62);}
    to {background-color: yellow;}
  }

.PiscaVerde {
    animation: PiscaVerde 0.3s linear 5 alternate;

}

.PiscaVermelho {
    animation: PiscaVermelho 0.3s linear 5 alternate;
}

.PiscaAmarelo{
    animation: PiscaAmarelo 0.3s linear 5 alternate;
}


/*Tela de transição quando é a vez do Computador*/

#_transicao{
    background-image: url(./Imagens/Icones-menu/Transicao.png);
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top, center;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}

#_transicao > p{
    font-size: 2rem;
    font-weight: bold;
    color: gold;
    text-shadow: 1px 1px 2px black;
    text-align: center;
    font-family: 'Courier New', Courier, monospace;
    background-color: rgba(0, 0, 0, 0.5);
    margin-top: 30px;
}

#loading{
    border: 16px solid #f0eded;
    border-top: 16px solid #fd0101;
    border-radius: 50%;
    width: 50px;
    height: 50px;   
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

#PCEscolha{
margin: auto;
}

#PCEscolha > p{
    font-size: 2rem;
    font-weight: bold;
    color: gold;
    text-shadow: 1px 1px 2px black;
    text-align: center;
    font-family: 'Courier New', Courier, monospace;
    background-color: rgba(0, 0, 0, 0.7);
    margin-top: 30px;
}

#PCEscolha > p > span{
    color: rgb(255, 255, 255);
    font-size: 2.2rem;
    text-shadow: 1px 1px 2px gold;
}

/*Layout em caso de vitória*/
.Vitoria {
    background-image: url(./Imagens/Icones-menu/Ganhou.jpg);
    display: flex;
    flex-direction: column;
}

.Vitoria > div{
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: center;
    height: 100%;
}

.Vitoria > div > p{
    font-size: 3rem;
    text-align: center;
    color: gold;
    text-shadow: 1px 1px 2px black;
    background-color: rgba(255, 255, 255, 0.8);
    position: float;
    top: 50%;
    transform: translateY(-50%);
}

/*Layout em caso de derrota*/

.Derrota {
    background-image: url(./Imagens/Icones-menu/Perdeu.jpg);
    display: flex;
    flex-direction: column;
}

.Derrota > div{
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: center;
    height: 100%;
}

.Derrota > div > p{
    font-size: 3rem;
    text-align: center;
    color: red;
    text-shadow: 1px 1px 2px black;
    background-color: rgba(255, 255, 255, 0.8);
    position: float;
    top: 50%;
    transform: translateY(-50%);
}

/*Layout em caso de empate*/
.Empate {
    background-image: url(./Imagens/Icones-menu/Empate.jpg);
    display: flex;
    flex-direction: column;
}

.Empate > div{
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: center;
    height: 100%;
}

.Empate > div > p{
    font-size: 3rem;
    text-align: center;
    color: red;
    text-shadow: 1px 1px 2px black;
    background-color: rgba(255, 255, 255, 0.8);
    position: float;
    top: 50%;
    transform: translateY(-50%);
}

/*Layout do placar final, independente de vitória ou derrota*/
#PlacarFinal{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    background-color: rgba(128, 128, 128, 0.9);
    width: 75%;
    height: 70px;
    border-radius: 5px;
    border: 1px solid black;
    margin-top: 40px;
}

#PlacarFinal > p {
    text-align: center;
    width: 100%;
    font-size: 1.2rem;
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
    letter-spacing: 5px;
    background-color: rgba(128, 128, 128, 1);
    color: black;
    text-shadow: none;
    border-radius: 5px 5px 0px 0px;
    margin-top: 15px;
    margin-bottom: -10px;
}

#PlacarFinal > span{
    width: 40%;
    text-align: center;
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
    color: white;
    text-shadow: 1px 1px 2px black;
    margin: 0px 3px;
}