/* !POKEDEX */
section{
    overflow: auto;
}

.pokedex {
    background-color: #e61515;
    min-height: 500px;
    width: 848px;
    margin: 0 auto;
    padding: 1em;
    border-radius: 15px;
    border: double black 10px;
    display: flex;
    
}



/* !POKEDEX-POKEMON */
.pokedex-pokemon {
    width: 359px;
    padding: 10px;
    border: inset #b31818 3px;
    border-radius: 3px;
    display: flex;
    flex-direction: column;
}

.pokemon-nombre {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-size: 28px;
    letter-spacing: 4px;
    text-transform: capitalize;
    height: 45px;
    box-sizing: border-box;
}


.pokemon-img {
    width: 100%;
    display: flex;
    image-rendering: pixelated;
    border: inset #9aa28b 3px;
    border-radius: 5px;
    margin: 10px 0;
    box-sizing: border-box;
    background: linear-gradient(15deg, #cad5b5 64%, #dde2d4 70%, #dde2d4 81%, #fff 86%, #dde2d4 89%, #dde2d4 100%);
}

.pokemon-controles{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    padding: 5px 0px;
    width: 100%;
}
.shiny {
    transform: rotate(0);
    background: linear-gradient(14deg, #bf8823 10%, #ffee90 25%, #e6a617 47%, #ffee90 73%, #fff6c8 74%, #ffee90 80%);
    border-color: #cdb589;
    width: 90px;
    text-shadow: white -1px 1px;
    border-radius: 20px;
    padding: 10px 20px;
    cursor: pointer;

    text-transform: uppercase;
    font-weight: bold;
}


/* !SEPARADOR */
.pokedex-separador > * {
    border-radius: 4px;
    border: solid #2d0d0d 2px;
}

.pokedex-separador {

    display: flex;
    flex-direction: column;
    width: 30px;
    margin: 0 20px;
    
    align-items: center;
    border: inset #460f0f 4px;
    border-radius: 4px;
    background: #460f0f;
}

.hinge {
    display: block;
    background: linear-gradient(90deg, #891313 0, #b31818 30%, #e61515 45%, #fd5555 65%, #e61515 95%);
    border-right-color: #fd5555;
    border-top-color: #fd5555;
    flex: 10;
    width: 100%;
    border-left-color: #5f1010;
}

.gap:first-child {
    border-radius: 0 0 5px 5px;
    border-top: none;
}
.gap {
    display: block;
    background: linear-gradient(90deg, #460f0f 0, #891313 30%, #b31818 45%, #fd5555 65%, #b31818 95%);
    border-top-color: #891313;
    border-right-color: #b31818;
    flex: 1;
    width: 95%;
}





/* !POKEDEX-INFORMACION */
.pokedex-informacion {
    width: 359px;
    padding: 10px;
    border: inset #b31818 3px;
    border-radius: 3px;
    display: flex;
    flex-direction: column;
    
}
.stats{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    border-bottom: groove #757575 3px;
    padding: 5px 0px;

}
.stats-info{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    margin: 5px;
    flex: 1;
}

.stat-line {
    font-size: 17px;
    font-family: var(--cp4);
    text-transform: capitalize;
}


.stats-tipos{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    

    width: 50%;
    background: linear-gradient(15deg, #cad5b5 64%, #dde2d4 70%, #dde2d4 81%, #fff 86%, #dde2d4 89%, #dde2d4 100%);
}
.tipos-encabezado{
    text-transform: capitalize;
    font-size: 1.25em;
    padding: 5px;
    font-family: "Staatliches", cursive;
    letter-spacing: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(14deg, #460f0f 0, #891313 30%, #b31818 45%, #fd5555 65%, #b31818 95%);
    border: groove #e61515 3px;
    border-width: 3px 2px;
    text-shadow: #fd5555 -1px 1px;
}

.tipo-encabezado{
    color: rgba(0, 0, 0, 0.9);
    text-transform: capitalize;
    font-size: 1.25em;
    padding: 2px;
    margin: 2px;
    border: groove #757575 3px;
    border-radius: 10px;
    width: 150px;
    font-family: "Staatliches", cursive;
    text-align: center;
    letter-spacing: 2px;
    text-shadow: rgb(255 255 255 / 30%) -1px 1px;
    align-self: center;
    background: linear-gradient( 15deg, rgba(128, 128, 128, 0.5) 64%, rgba(138, 138, 138, 0.5) 70%, rgba(230, 230, 230, 0.5) 81%, rgba(255, 255, 255, 0.5) 86%, rgba(220, 220, 220, 0.5) 89%, rgba(230, 230, 230, 0.5) 100% );
    background-blend-mode: hard-light;
}
#tipoAgua{background-color: #1689de;}
#tipoPlanta{background-color: #47a047;}
#tipoVeneno{background-color: #925192;}
#tipoFuego{background-color: #cf1414;}
#tipoBicho{background-color: #b1c967;}
#tipoNormal{background-color: #bfbfbf;}
#tipoVolador{background-color: #999ade;}
#tipoElectrico{background-color: #e6b700;}
#tipoTierra{background-color: #dea761;}
#tipoHada{background-color: #dca0ce;}
#tipoLucha{background-color: #d87c58;}
#tipoPsiquico{background-color: #fa43b8;}
#tipoRoca{background-color: #897864;}
#tipoAcero{background-color: #49769c;}
#tipoHielo{background-color: #98c3de;}
#tipoFantasma{background-color: #c195dc;}
#tipoDragon{background-color: #89315d;}
#tipoSiniestro{background-color: #282433;}

.prevoluciones{
    padding: 5px 0px;
    display: flex;
    border-bottom: groove #757575 3px;
    justify-content: space-evenly;
}
.prevolucion{
    width: 33%;
}
.prevolucion p{
    text-align: center;
    font-family: var(--cp1);
    text-transform: capitalize;
}

.habilidades{
    padding: 5px 0px;
    margin-top: 5px;
    display: flex;
    justify-content: space-evenly;
}

.habilidad-info{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.habilidad{
    width: 300px;
    display: flex;
    flex-direction: row;
}

.habilidad-info h4{
    font-family: var(--cp4);
    font-size: 24px;
    border-bottom: solid black 2px;
    margin-bottom: 3px;
    text-align: center;
    text-transform: capitalize;
}

.habilidadTipo{
    margin-left: 15px;
    font-size: 18px;
    text-transform: uppercase;
    border: solid black 2px;
    border-radius: 7px;
    padding: 2px 10px;
    text-align: center;
}

.habilidadLvl{
    margin-left: 15px;
}

.habilidad-controles{
    padding: 5px;
    display: flex;
    flex-direction: column;
}

.habilidad-controles button{
    margin-top: 5px;
    transform: rotate(90deg);
}

.controles-pokedex{
    margin-top: 5px;
    padding: 5px 0px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

#id{
    text-align: center;
}

button.control-pokedex {
    border: groove #460f0f 5px;
    content: "";
    width: 60px;
    height: 60px;
    border-radius: 50%;
    left: -10px;
    top: -10px;
    border-style: double;
    opacity: 0.75;
    background: rgb(9,168,255);
    background: radial-gradient(circle, rgba(9,168,255,1) 30%, rgba(237,237,237,1) 100%);
}

button.control-pokedex:hover {
    background: rgb(165,205,83);
background: radial-gradient(circle, rgba(165,205,83,1) 30%, rgba(237,237,237,1) 100%);
}

/* !COMUNES */
.screen {
    background: linear-gradient(14deg, rgb(165, 205, 83) 60%, rgb(193, 217, 144) 65%);
    padding: 5px;
    border-radius: 3px;
    font-family: "VT323";
    border: inset #879a65 3px;
}

.botones{
    font-weight: bold;
    font-size: x-large;
    height: 40px;
    width: 40px;
    background-color: transparent;
    border-radius: 100%;
    border-color: var(--NEGRO);
    cursor: pointer;
}

.noVer{
    display: none;
}