*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html{
    height: 100vh;
    overflow: hidden;
}

body{
    height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: green;
    background-image: url(../background.webp);
    background-repeat: no-repeat;
    background-size: cover;
    font-family: monospace;
    text-transform: capitalize;
    overflow-y: hidden;
}



.pokedex{
    margin: 0 10rem 0 0;
    width: 20rem;
    height: 32rem;
    perspective: 70rem;
}

.pokedex__capa-uno{
    width: 100%;
    height: 100%;
    background-color: #fe1954;
    border-radius: 10px;
    border-bottom-right-radius: 0;
}
.pokedex__capa-uno::after{
    position: absolute;
    content: '';
    width: 100%;
    height: 92%;
    background-color: #481159;
    clip-path: polygon(90% 0%, 70% 0%, 30% 10%, 0% 10%, 0% 15%,30% 15%,70% 5%, 90% 5%);
    bottom: 0;
}
.pokedex__capa-uno::before{
    position: absolute;
    content: '';
    width: 100%;
    height: 92%;
    bottom: 0;
    background-color: #ca215a;
    border-bottom-left-radius: 10px;
    clip-path: polygon(0% 15%,30% 15%,70% 0%, 90% 0%,90% 100%,0 100%);
}
.pokedex__capa-dos{
    position: absolute;
    bottom: 0;
    height: 90%;
    width: 100%;
    transform-style: preserve-3d;
    transition: transform 1s ease-in-out;
    transform-origin: right;
    border-bottom-left-radius: 10px;
    
}
.pokedex__open{
    transform:rotateY(180deg);
}
.pokedex__capa-dos-in,.pokedex__capa-dos-out{
    height: 100%;
    width: 100%;
    position:absolute;
    backface-visibility: hidden;
}
.pokedex__capa-dos-in{
    background-color: #fe1954;
    transform:rotateY(180deg);
    clip-path: polygon(0% 0%, 30% 0%, 70% 10%, 100% 10%, 100% 100%, 0% 100%);
    border-bottom-right-radius: 10px;
}

/* clip-path: polygon(0% 6%,1% 3%,3.5% 1%,7% 0%, 30% 0%, 70% 10%, 100% 10%, 100% 96%, 99% 98%, 97% 99.2%, 94% 100%, 6% 100%, 3% 99%, 1% 97.5%, 0% 95%); */

.pokedex__capa-dos-in::after{
    position: absolute;
    content: '';
    background-color: #481159;
    transform: scale(.9);
    /* figura de la capa 2:    curva........... |  */
    clip-path: polygon(0% 6%,1% 3%,3.5% 1%,7% 0%, 30% 0%, 70% 10%, 100% 10%, 100% 96%, 99% 98%, 97% 99.2%, 94% 100%, 6% 100%, 3% 99%, 1% 97.5%, 0% 95%,2% 95%,3% 97%,4% 98%,6% 98.8%, 94% 98.8%,96.5% 98%,97.8% 97%,98% 96%,98% 11.5%,70% 11.5%, 30% 1.5%, 7% 1.5%,3.5% 2.8%, 2% 6%,2% 95%,0% 95%);
    width: 100%;
    height: 100%;
}

.pokedex__capa-dos-in::before{
    position: absolute;
    content: '';
    background-color: #ca215a;
    transform: scale(.9);
    clip-path: polygon(0% 6%,1% 3%,3.5% 1%,7% 0%, 30% 0%, 70% 10%, 100% 10%, 100% 96%, 99% 98%, 97% 99.2%, 94% 100%, 6% 100%, 3% 99%, 1% 97.5%, 0% 95%);
    width: 100%;
    height: 100%;
}
.pokedex__capa-dos-out{
    clip-path: polygon(100% 0%, 70% 0%, 30% 10%, 0% 10%, 0% 100%, 100% 100%);
    background-color: #fe1954;
    border-bottom-left-radius: 10px;
    cursor: pointer;
}
.pokedex__capa-dos-out::after{
    position: absolute;
    content: '';
    border-left: 30px solid yellow;
    border-bottom: 25px solid transparent;
    border-top: 25px solid transparent;
    left: 20px;
    top: 40%;
    filter: drop-shadow( 2px 2px 1px#f4cb00);
    border-radius: 5px;
}
.pokedex__capa-dos-out::before{
    position: absolute;
    content: '';
    bottom: 20px;
    width: 50%;
    height: .4rem;
    border: 3px solid black;
    border-radius: 1rem;
    opacity: .8;
    margin: 0 25%;
}

.pokedex__ai{
    position: absolute;
    background-image: url(../poke.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 25%;
    height: 25%;
    margin: 1% 3%;
}

.pokedex__ai::after{
    position: absolute;
    margin: 20%;
    content: '';
    width: 3rem;
    height: 3rem;
    filter: blur(5px);
    border-radius: 50%;
    animation: intermitente .4s steps(2) infinite;
}

@keyframes intermitente {
    from{background-color: #00d8ff;}
    to{background-color: none;}
}

.pokedex__ai::before{
    position: absolute;
    margin: 10% 0 0 70%;
    content: '';
    width: 25%;
    height: 16%;
    border-radius: 50%;
    box-shadow: 25px 0px 2px red, 25px 1px 1px #00000088,
    50px 0px 2px yellow, 50px 1px 1px #00000088,
    75px 0px 2px limegreen, 75px 1px 1px #00000088;
}

.pokedex__window{
    position: absolute;
    width: 80%;
    height: 45%;
    margin: 40% 5% 0 5%;
    background-color: #d5f6ff;
    border-radius: 10px;
    border-bottom-left-radius: 30px;
    box-shadow: 5px 3px #481159;
}
.pokedex__window::after{
    position: absolute;
    content: '';
    height: 1.5rem;
    width: 1.5rem;
    background-color: #ca215a;
    border-radius: 50%;
    border: 3px solid #481159;
    bottom: 5px;
    left: 1.5rem;
    box-shadow: inset -3px -1px 3px #48115999;
}
/* barras sound */
.pokedex__window::before{
    position: absolute;
    content: '';
    width: 60%;
    height: .3rem;
    background-color: gray;
    border-radius: .2rem;
    bottom: calc(1.3rem + 5px);
    right: 1.5rem;
    box-shadow: 0px 10px 0px gray,
    0px 20px 0px gray;
}

.pokedex__window-screen{
    font-family: monospace;
    font-size: 1rem;
    color: white;
    text-shadow: 1px 1px 2px black;
    position: relative;
    margin: 5%;
    padding: 5%;
    background-color: #00d8ff;
    background-image:  linear-gradient(#d5f6ff44 1px, transparent 1px), linear-gradient(to right, #d5f6ff44 1px, #00d8ff 1px);
    background-size: 10px 10px;
    width: 90%;
    height: 75%;
    border-radius: 5px;
    box-shadow: inset 1px 1px 5px 0px black;
}

.pokedex__scan{
    position: absolute;
    background-color: limegreen;
    background-image:  linear-gradient(#d5f6ff44 1px, transparent 1px), linear-gradient(to right, #d5f6ff44 1px, limegreen 1px);
    background-size: 10px 10px;
    color: #070849;
    font-family: monospace;
    font-size: 1rem;
    text-shadow: 1px 1px 2px #323232;
    width: 45%;
    height: 10%;
    padding: 2%;
    border-radius: 10px;
    box-shadow: inset 1px 1px 5px 0px black;
    bottom: 5%;
    left: 5%;
}

.pokedex__scan--text{
    animation: typing 1s steps(13) infinite;
    width: 0;
    overflow: hidden;
}

.button__scan{
    position: absolute;
    width: 2.5rem;
    height: 2.5rem;
    background-color: hotpink;
    border-radius: 50%;
    bottom: 18%;
    left: 5%;
    box-shadow: inset 3px 3px 5px #f98fff90,
    inset -3px -1px 2px #6b0362d4, 
    5px 2px 1px #48115988;
    cursor: pointer;
}

.button__scan::after{
    position: absolute;
    width: 2.5rem;
    height: 1rem;
    content: '';
    background-color: limegreen;
    border-radius: .5rem;
    left: 250%;
    top: 30%;
    box-shadow: inset 2px 2px 2px lightgreen,
    inset -2px -1px 2px darkgreen,
    2px 3px 1px #48115988;
    animation: parpadeo .8s infinite steps(5);
}

.button__scan::before{
    position: absolute;
    width: 2.5rem;
    height: 1rem;
    content: '';
    background-color: blue;
    border-radius: .5rem;
    left: 130%;
    top: 30%;
    box-shadow: inset 2px 2px 2px lightblue,
    inset -2px -1px 2px darkblue,
    2px 3px 1px #48115988;
    animation: parpadeo 2s 1s infinite steps(5);
}

@keyframes parpadeo {
    0%,20%{ filter: brightness(2) }
    10%,30%,100%{ filter: brightness(1);}
}

@keyframes typing {
    from{width: 0%;}
    to{width: 100%;}
}

.button__up{
    right: 25%;
    bottom: 15%;
    width: 2rem;
    height: 3.5rem;
    text-align: center;
}

.button__down,.button__left,.button__right,.button__up{
    font-size: 1.3rem;
    border-radius: 5px;
    position: absolute;
    cursor: pointer;
    background-color: #070849;
    box-shadow: 5px 3px 0px #481159;
}

.button__down{
    right: 25%;
    bottom: 4.5%;
    width: 2rem;
    height: 3.5rem;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.button__left{
    right: 31%;
    bottom: 12%;
    width: 3.3rem;
    height: 2rem;
    padding-left: .2rem;
}

.button__right{
    right: 12%;
    bottom: 12%;
    width: 2.8rem;
    height: 2rem;
    text-align: right;
    padding-right: .2rem;
}

.button__down::after,.button__up::after,.button__left::after,.button__right::after{
    position: absolute;
    content: '';
    border-top: 10px solid #80808088;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
}

.button__down::after{
    bottom: 10px;
}
.button__up::after{
    left:5px;
    top: 10px;
    transform: rotate(180deg);
}
.button__left::after{
    top: 10px;
    transform: rotate(90deg);
}
.button__right::after{
    top: 10px;
    transform: rotate(-90deg);
    right: 5px;
}

.button__down:active,.button__left.button__left:active,.button__right:active,.button__up:active{
    box-shadow: 3px 2px 0px #481159;
}

/* Interfaz Grafica 2da Pantalla */

.pokedex__2-window{
    position: absolute;
    width: 80%;
    height: 20%;
    background-color: #070849;
    top: 17%;
    left: 10%;
    border-radius: 10px;
    box-shadow: inset 0 8px 0 #0b1956;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

.pokedex__2-window::after{
    position:absolute;
    content: '';
    background-color: #d5f6ff15;
    width: 10%;
    height: 200%;
    transform: rotateZ(30deg);
    top: -30%; 
    left: 40%;
    box-shadow: 60px -30px 0 #d5f6ff15, 15px -30px 0 #d5f6ff15;
}

.pokedex__2-window--img{
    width: 96px;
}

.pokedex__2-window--data,.pokedex__2-window--data2{
    color: #d5f6ff;
    font-size: .8rem;
}

.pokedex__2-window--number{
    background-image: url(https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/back/3.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    color: #d5f6ff;
    width: 30%;
    height: 110%;
    padding-top: 30%;
    text-align: center;
    font-size: 1rem;
    margin-bottom: 5%;
}

.pokedex__2-buttons{
    position: absolute;
    width: 80%;
    height: 20%;
    border-radius: 10px;
    top: 40%;
    left: 10%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    overflow: hidden;
    box-shadow: 6px 3px 0px #481159;
}

.button__numero{
    position: relative;
    width: 20%;
    height: 50%;
    background-color: #00aaf7;
    box-shadow: inset 0px 3px 3px 1px #34d3fa,
    inset 0 -1px 3px 1px #027fb0,
    inset -1px 0 3px 1px #027fb0,
    inset 1px 0 3px 1px #027fb0;
    counter-increment: section 1;
    cursor: pointer;
}

.button__numero:hover{
    box-shadow: inset 3px 3px 3px 1px #027fb0,
    inset -2px -2px 4px #34d3fa;
}

.button__numero:first-of-type::before{
    counter-set: section;
}

.button__numero::before{
    position: absolute;
    content: counter(section);
    font-size: 2rem;
    font-family: monospace;
    top: 10%;
    right: 30%;
    color: #d5f6ff88;
}

.pokedex__2-buttons--ui{
    position: absolute;
    width: 80%;
    height: 7%;
    top: 63%;
    left: 10%;
    display: flex;
    justify-content: flex-end;
}

.pokedex__2-buttons-delete,.pokedex__2-buttons-search{
    width: 40%;
    height: 100%;
    background-color: #d5f6ff;
    border-radius: 5px;
    margin-left: 10px;
    cursor: pointer;
    box-shadow: 6px 3px 0 #481159;
    transition: 50ms ease;
}

.pokedex__2-buttons-delete:active,.pokedex__2-buttons-search:active{
    transform: translateX(3px);
    box-shadow: 3px 3px 0 #481159;
}

.pokedex__2-buttons-delete::before{content: 'Delete';}
.pokedex__2-buttons-search::before{content: 'Search';}

.pokedex__2-buttons-search::before,.pokedex__2-buttons-delete::before{
    position: absolute;
    top: 4px;
    padding-left: 10px;
    color: #0b195644;
    font-weight: 900;
    font-size: 1.5rem;
}

/* Luces */

.pokedex__2-lights{
    background-color: #0b1956;
    position: absolute;
    width: 35%;
    height: calc(10% - 10px);
    bottom: 15%;
    left: 10%;
    border-radius: 10px;
    border: 5px solid #481159;
}

.pokedex__2-lights::after{
    background-color: inherit;
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    right: -145%;
    border-radius: 10px;
    border: 5px solid #481159;
    bottom: -5px;
}

.pokedex__window-screen{
    display: flex;
    overflow-y: scroll;
}

::-webkit-scrollbar {
    width: 10px;

}
/* 
::-webkit-scrollbar-track {
    box-shadow: inset 2px 2px 5px var(--blue);
    border-radius: 5px;
}
*/
::-webkit-scrollbar-thumb {
    background: #0b195666;
    border-radius: 5px;
}


.imgPokemon1{
    top: 0%;
    width: 5.3rem;
    padding-right: 5%;
}

@media (orientation: landscape) {
    body {
        justify-content: center;
    }
}
@media (orientation: portrait) {
    body {
        justify-content: left;
    }
    .pokedex{
        margin: 0 0 0 5% ;
    }
}