* {
    user-select: none;
}

body {
    display: flex;
    flex-direction: column;
    width: 100vw;
    min-height: 100vh;
    overflow-x: hidden;
    background: linear-gradient(#9049ac, #27bbe0) no-repeat;
    text-align: center;
    align-items: center;
    justify-content: center;
}

body::-webkit-scrollbar {
    display: none;
}

.texto1,
.cenarios {
    font-size: 2.8vw;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: rgb(252, 255, 65);
    -webkit-text-stroke: 0.2vw #2edf02ce;
    /* Contorno de 2 pixels na cor preta */
    text-stroke: 0.2vw #2edf02ce;
    /* Contorno de 2 pixels na cor preta */
}

.texto2 {
    font-size: 1.2vw;
    color: rgb(252, 252, 252);
}

.tipos img {
    width: 5vw;
}

.pokemons {
    margin-left: 12vw;
    margin-right: 12vw;
    margin-top: 1%;
    justify-content: center;
    align-items: center;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.3vw;
}

.pokemon {
    border-radius: 7%;
    background-color: #f1f1f1ce;
    padding: 1vw;
    text-align: center;
    border: 0.1vw solid #ccc;
    width: 16vw;
    height: 8vw;
    transition: 0.5s;
    cursor: pointer;
}

.pokemon:hover {
    transform: scale(1.1);
    outline: 0.3vw solid #000000;
}

.pokemon .numero {
    font-size: 1vw;
    font-weight: bold;
}

#infoBloqueioCampo3, .infoBloqueioMetagross, .infoBloqueioStaryu {
    font-size: 1.5vw;
    font-weight: bold;
}

#p1,
#p2,
#p6,
#p7,
#p10,
#p16 {
    width: 11vw;
    margin-top: -2vw;
}

#p4,
#p9,
#p11 {
    width: 12.5vw;
    margin-top: -3vw;
}

#p2,
#p3,
#p8,
#p15 {
    width: 10vw;
    margin-top: -1.6vw;
}

#p5,
#p12,
#p14,
#p13 {
    width: 9.8vw;
    margin-top: -1.5vw;
}

#pikachu {
    background-color: #E3E32B;
}

#alakazam {
    background-color: #F41E90;
}

#suicune {
    background-color: #1753E3;
}

#ninjask {
    animation: alterarCorNinjask 4s infinite;
}

@keyframes alterarCorNinjask {
    0% {
        background-color: #4B677D;
    }

    50% {
        background-color: #194B25;
    }

    100% {
        background-color: #4B677D;
    }
}

#tropius {
    animation: alterarCorTropius 4s infinite;
}

@keyframes alterarCorTropius {
    0% {
        background-color: #24CF51;
    }

    50% {
        background-color: #4B677D;
    }

    100% {
        background-color: #24CF51;
    }
}

#roserade {
    animation: alterarCorRoserade 4s infinite;
}

@keyframes alterarCorRoserade {
    0% {
        background-color: #24CF51;
    }

    50% {
        background-color: #5E2D88;
    }

    100% {
        background-color: #24CF51;
    }
}

#golem,
#rhydon {
    animation: alterarCorGolem 4s infinite;
}

@keyframes alterarCorGolem {
    0% {
        background-color: #AC6D26;
    }

    50% {
        background-color: #48180A;
    }

    100% {
        background-color: #AC6D26;
    }
}

#yanmega {
    animation: alterarCorNinjask 4s infinite;
}

#squirtle,
#staryu {
    background-color: #1753E3;
}

#vanillish {
    background-color: #83D2F3;
}

#cyndaquil {
    background-color: #cf4522;
}

#gardevoir {
    animation: alterarCorGardevoir 4s infinite;
}

@keyframes alterarCorGardevoir {
    0% {
        background-color: #971A43;
    }

    50% {
        background-color: #A5286E;
    }

    100% {
        background-color: #971A43;
    }
}

#mismagius {
    background-color: #333366;
}

#metagross {
    animation: alterarCorMetagross 4s infinite;
    display: flex;
    flex-direction: column;
}

#metagross img {
    margin-left: 3vw;
}

#staryu {
    display: flex;
    flex-direction: column;
}

#staryu img {
    margin-left: 3vw;
}

@keyframes alterarCorMetagross {
    0% {
        background-color: #61746E;
    }

    50% {
        background-color: #A5286E;
    }

    100% {
        background-color: #61746E;
    }
}

#cadeado1, #cadeado2, #cadeadoCenario {
    width: 2vw;
}


.infoBloqueioCampo3 {
    display: flex;
    justify-content: center;
}


.campos {
    margin-left: 12%;
    margin-right: 12%;
    margin-top: 2%;
    justify-content: center;
    align-items: center;
    /* Alinhamento vertical */
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 4 colunas */
    gap: 1.2vw;
    /* Espaçamento entre os elementos */
    /* Adicione outras propriedades conforme necessário */
}

.campo {
    border-radius: 7%;
    background-color: #f1f1f14d;
    padding: 1vw;
    text-align: center;
    border: 0.1vw solid #ccc;
    width: 25vw;
    height: 19vw;
    transition: 0.5s;
    cursor: pointer;
    margin-left: 1.5vw;
}

.campo img {
    width: 80%;
    border-radius: 1vw;
}

.campo:hover {
    transform: scale(1.1);
    outline: 0.3vw solid #000000;
}

.campo .nomeCampo {
    font-size: 1.3vw;
    font-weight: bold;
    color: #0e0e0e;
    font-weight: bold;
}

.campo .passiva {
    font-size: 1vw;
    font-weight: bold;
    color: #000000;
    font-weight: bold;
}

#campo1 {
    background-color: #83d1f377;
}

#campo2 {
    background-color: #28f7327e;
}

#campo3 {
    background-color: #cf452270;
}


.container {
    display: flex;
    flex-direction: row;
    margin-bottom: 0%;
    justify-content: center;
    align-items: center;
    text-align: center;
    /* Isso centraliza o texto horizontalmente */
}

#botaoVoltarTelaInicial {
    width: 4vw;
    height: 4vw;
    margin-right: 2vw;
    cursor: pointer;
}

/* home, iniciar, jogar */


.telaInicial {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.container-menu {
    width: 25%;
    border-radius: 5%;
}

#logo {
    width: 60vw;
}

#iniciar {
    width: 18vw;
    transition: 0.5s;
    cursor: pointer;
    margin-top: 3vw;
    transition: 0.5s;
}

#iniciar:hover {
    animation: tremido 0.5s infinite linear;
}

@keyframes tremido {
    0% { transform: translate(0%, 0%) rotate(0deg); }
    20% { transform: translate(-2%, -2%) rotate(-2deg);}
    40% { transform: translate(2%, 2%) rotate(2deg); transform: scale(1.1);}
    60% { transform: translate(-2%, -2%) rotate(-2deg); transform: scale(1.1);}
    80% { transform: translate(2%, 2%) rotate(2deg); }
    100% { transform: translate(0%, 0%) rotate(0deg); }
}

#poke1,
#poke2,
#poke3,
#poke4,
#poke5,
#poke6 {
    position: absolute;
}

#poke1 {
    width: 9vw;
    bottom: 0%;
    right: 20%;
}

#poke2 {
    width: 20vw;
    bottom: 0%;
    left: 0%;
    transform: scaleX(-1);
}

#poke3 {
    width: 16vw;
    bottom: 0%;
    left: 20%;
    transform: scaleX(-1);
}

#poke4 {
    width: 17vw;
    bottom: 50%;
    left: 0%;
    transform: scaleX(-1);
}

#poke5 {
    width: 18vw;
    bottom: 50%;
    right: 0%;
}

#poke6 {
    width: 20vw;
    bottom: 0%;
    right: 0%;
}

#e1,
#e2,
#e3,
#e4,
#e5,
#e6,
#e7,
#e8,
#e9,
#e10,
#e11,
#e12,
#e13,
#e14,
#e15,
#e16,
#e17,
#e18,
#e19,
#e20,
#e21,
#e22,
#e23,
#e24,
#e25,
#e26,
#e27,
#e28,
#e29,
#e30 {
    position: absolute;
    width: 1vw;
}


mark.baixa {
    background-color: #40ba01;
}

mark.media {
    background-color: #c9880f;
}

mark.alta {
    background-color: #e20000;
}