@import"https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap";.App{min-height:100vh}.pokedexHome{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:100vh;gap:30px;padding:20px 20px 100px}.pokedexHome__img{margin-bottom:10px;max-width:500px}.pokedexHome__subtitle{text-align:center;color:var(--color-red);font-size:2rem;margin-bottom:2px}.pokedexHome__form{display:flex;align-items:center;flex-wrap:wrap;justify-content:center}.pokedexHome__input{padding:10px 20px;box-shadow:-1px 2px 10px #0004;font-size:1.2rem;height:40px}.pokedexHome__btn{padding:10px 20px;color:var(--color-white);background-color:var(--color-red);box-shadow:-1px 2px 10px #0004;cursor:pointer;height:40px}.pokedexHome__btn:hover{filter:brightness(1.1)}.pokedex__img{min-width:100%;cursor:pointer}.pokedexById-container{width:100%;min-height:100vh;display:grid;grid-template-columns:repeat(2,1fr);gap:100px;justify-content:center;align-items:center;margin:auto auto 50px;position:relative;background:rgb(250,250,249);padding:20px}section.pokemon-data{grid-column:1;min-width:50%;max-height:1000px;margin:100px auto 50px;box-shadow:3px 3px 5px 5px gray;display:flex;flex-direction:column;justify-content:center;align-items:center;position:absolute;top:0;text-transform:capitalize}section.pokemon-moves{grid-column:2;min-width:50%;max-height:1000px;margin:100px auto 50px;padding:20px;box-shadow:3px 3px 5px 5px gray;overflow-y:scroll;display:flex;gap:10px;flex-direction:column;position:relative;top:-20px;background:rgb(250,250,249)}section.pokemon-moves h3{width:100%;min-height:50px;font-size:1.5em;font-weight:400;position:sticky;top:-20px;border-bottom:1px solid grey;background:rgb(250,250,249);padding:10px}section.pokemon-moves .movements{display:flex;flex-wrap:wrap;gap:20px}section.pokemon-moves .movements div{background-color:#e5e5e5;padding:15px;border-radius:50px}section.pokemon-moves::-webkit-scrollbar{display:none}.header{width:100%;height:100px;background:linear-gradient(178.92deg,#7EC6C5 .92%,#ABDAC6 47.96%,#CAE099 99.08%);border-radius:4px 4px 0 0;position:relative}.pokemon-img{position:absolute;top:-90px;right:0;left:0;margin:auto;width:160px}img{display:block;margin:auto;z-index:15}h3,h4,h6{margin:0}.pokemon-id{border:1px solid grey;margin:10px;padding:5px}.pokemon-name{width:100%;text-align:center;padding:0 15px;position:relative;margin:15px auto}.pokemon-name h2{position:absolute;top:-9px;right:0;left:0;background-color:#fafaf9;width:max-content;margin:0 auto;padding:0 15px;z-index:5}.pokemon-name hr{position:relative;top:0}.pokemon-physics{display:flex;gap:30px;margin-top:10px}.pokemon-physics h6{font-weight:400}.pokemon-physics div{justify-content:center;align-items:center;display:flex;flex-direction:column;gap:5px;font-weight:500}.pokemon-data-body{width:100%;display:grid;grid-template-columns:50% 50%;padding:15px}.pokemon-types{grid-column-start:1;grid-column-end:1;overflow:hidden;text-align:center}.pokemon-types div{width:max-content;color:#f0f8ff;padding:5px;margin-top:5px;text-align:center;line-height:1.1em}.pokemon-abilities{grid-column-start:2;grid-column-end:2;overflow:hidden;text-align:center}.ability{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px;padding:5px}.pokemon-abilities .ability div{width:max-content;border:1px solid grey;padding:5px;text-align:center;line-height:1.1em}.statics{margin:25px auto;border-top:1px solid grey;position:relative;width:100%;grid-column:1 / -1}.statics h3{position:absolute;top:-18px;background:rgb(250,250,249);z-index:5;padding-right:15px;font-size:1.4em;font-weight:700}.statics ul{margin:25px auto;display:flex;flex-direction:column;gap:10px;position:relative}.statics ul li{position:relative}.statics ul li span.text{font-weight:600;display:block;position:relative;left:0;top:0;margin-bottom:5px;text-transform:capitalize}.statics ul li span.base{display:block;position:absolute;right:0;top:0;margin-bottom:5px}.statics ul li span.percent{position:relative;overflow:hidden;width:100%;height:25px;display:block;background-color:#f4ecec}.statics ul li span.percent div{position:absolute;height:100%;top:0;left:0;background:linear-gradient(to right,#FCD676 25%,#E6901E 100%)}@media (max-width: 450px){section.pokemon-data{width:90%;grid-column:1 / -1;position:inherit;margin-bottom:0}section.pokemon-moves{width:90%;grid-column:1 / -1;margin-top:0}.pokemon-types,.pokemon-abilities{grid-column:1 / -1}.pokemon-name{padding:0 20px}.pokemon-img{top:-80px;width:150px}}.card-poke{width:100%;max-width:400px;border-radius:10px;overflow:hidden;cursor:pointer;box-shadow:0 10px 20px #2a2a2a40;transition:.4s ease}.card-poke:hover{transform:translateY(-10px);transform-origin:center;transition:.4s ease}.card-poke:active{transform:perspective(100px) scale3d(0,.1,.1) skew(5deg,2deg);transform-origin:center;transition:.5s}.card-poke__header{height:200px;background-color:green;position:relative;margin-bottom:65px}.card-poke__sprite{width:60%;position:absolute;top:40px;left:50%;transform:translate(-50%)}.card-poke__body{margin-bottom:30px}.card-poke__name{text-transform:capitalize;text-align:center;font-size:2rem;font-weight:500}.card-poke__type-container{display:flex;justify-content:center;gap:10px}.card-poke__type{font-size:17;text-transform:capitalize;position:relative}.card-poke__type:nth-child(2):before{content:"/";position:absolute;left:-10px}.card-poke__type-label{text-align:center;font-size:13px;color:#999}.card-poke__stat-container{display:grid;grid-template-columns:repeat(3,1fr);gap:20px 5px;justify-content:center;padding:0 5px 35px}.card-poke__stat{display:flex;gap:5px;flex-direction:column;align-items:center}.card-poke__stat-label{color:#999;text-transform:uppercase;font-size:12px}.card-poke__stat-number{font-size:18px}.bg-bug{background:linear-gradient(178.92deg,#3ca153 -32%,#4aef70 20%,#3ca153 100%)}.bg-grass{background:linear-gradient(178.92deg,#10833d -32%,#22d94b 20%,#10833d 100%)}.bg-fire{background:linear-gradient(176.37deg,#b42024 -32%,#ff4b5c 20%,#b42024 100%)}.bg-water{background:linear-gradient(176.37deg,#1054e9 -32%,#83a9fe 20%,#1054e9 100%)}.bg-normal{background:linear-gradient(176.37deg,#77585f -32%,#d09ca9 20%,#77585f 100%)}.bg-fighting{background:linear-gradient(176.37deg,#a34126 -32%,#fa6734 20%,#a34126 100%)}.bg-flying{background:linear-gradient(176.37deg,#4c6c81 -32%,#99b4d3 20%,#4c6c81 100%)}.bg-poison{background:linear-gradient(176.37deg,#622c8e -32%,#a16ae1 20%,#622c8e 100%)}.bg-ground{background:linear-gradient(176.37deg,#724c1f -32%,#b2732d 20%,#724c1f 100%)}.bg-rock{background:linear-gradient(176.37deg,#4b1809 -32%,#903f21 20%,#4b1809 100%)}.bg-psychic{background:linear-gradient(176.37deg,#ab2b6c -32%,#fe1a95 20%,#ab2b6c 100%)}.bg-ghost{background:linear-gradient(176.37deg,#33336b -32%,#946997 20%,#33336b 100%)}.bg-steel{background:linear-gradient(176.37deg,#637b71 -32%,#44c59a 20%,#637b71 100%)}.bg-ice{background:linear-gradient(176.37deg,#8ed5f0 -32%,#d7f8ff 20%,#8ed5f0 100%)}.bg-electric{background:linear-gradient(176.37deg,#e8f22c -32%,#faff6e 20%,#e8f22c 100%)}.bg-dragon{background:linear-gradient(176.37deg,#44929e -32%,#61d6e8 20%,#44929e 100%)}.bg-dark{background:linear-gradient(176.37deg,#000405 -32%,#5c5a7f 20%,#000405 100%)}.bg-fairy{background:linear-gradient(176.37deg,#9d1941 -32%,#f7116a 20%,#9d1941 100%)}.letter-bug{color:#3ca153}.letter-grass{color:#10833d}.letter-fire{color:#b42024}.letter-water{color:#1054e9}.letter-normal{color:#77585f}.letter-fighting{color:#a34126}.letter-flying{color:#4c6c81}.letter-poison{color:#622c8e}.letter-ground{color:#724c1f}.letter-rock{color:#4b1809}.letter-psychic{color:#ab2b6c}.letter-ghost{color:#33336b}.letter-steel{color:#637b71}.letter-ice{color:#8ed5f0}.letter-electric{color:#c4cf00}.letter-dragon{color:#44929e}.letter-dark{color:#5c5a7f}.letter-fairy{color:#9d1941}.pagination{margin-left:auto;width:max-content;display:flex;align-items:center;gap:10px}.pagination__container{display:flex;gap:5px}.pagination__page,.pagination__prev,.pagination_next{cursor:pointer;width:25px;aspect-ratio:1;display:flex;justify-content:center;align-items:center}.pagination__active{background-color:var(--color-red);color:#fff;border-radius:5px}.pokedex-container{margin:auto auto 10px;background-color:#f0f8ff;min-height:100vh}header{text-align:center;height:100px;vertical-align:middle;padding:10px}header img{width:350px}h1{letter-spacing:.2em}header p span{font-weight:bolder}.aside,aside{width:fit-content;display:flex;flex-direction:column;justify-content:center;align-items:center;margin:auto;gap:10px}aside form{background-color:#ea3838e6;width:100%;height:3em;border-radius:10px;display:flex;justify-content:center;align-items:center;margin:10px auto;padding:10px}aside form input[type=text]{width:70%;height:30px}aside form button{width:30%;height:30px;padding:1px;margin:2px auto;cursor:pointer;vertical-align:middle}aside form button:hover{color:#fff;background-color:#ea3838e6;transition:.5s ease}aside form button:active{height:35px;width:20%;border:.5em solid rgba(255,0,0,.6)}aside select{outline:none;width:100%;height:30px;border:1px solid rgba(255,0,0,.6)}aside select:hover{border:4px solid rgba(255,0,0,.6)}aside select:focus{border:4px solid rgba(255,0,0,.6)}aside select::-webkit-scrollbar{width:10px}aside select::-webkit-scrollbar-track{background-color:#0a0a0ae6;padding:5px}aside select::-webkit-scrollbar-thumb{background-color:#c80a0a;border-radius:50px;padding:5px}aside select option{color:#c80a0acc;font-size:1.3em}aside select option[selected]:hover{background-color:#add8e6;color:green;transform:scale(40px)}.card-container{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:3rem;width:100%;background-color:#f5f5f5;margin:30px auto}.footer__red{background-color:var(--color-red);width:100%;height:100px;position:relative;display:flex;justify-content:center}.footer__black{background-color:#222;width:100%;height:40px;position:absolute;bottom:0;left:0}.footer__circle{width:80px;aspect-ratio:1;position:absolute;background-color:#222;border-radius:50%;bottom:0}.footer__circle-int{width:60px;aspect-ratio:1;position:absolute;background-color:#222;border-radius:50%;left:50%;transform:translate(-50%,10px);border:9px solid white}:root{--color-red: #D93F3F;--color-white: white}*{box-sizing:border-box}body{margin:0;font-family:Inter,sans-serif}h1,h2,h3,h4,ul,p{margin-top:0;margin-bottom:0}ul{padding-left:0;list-style:none}img{display:block;width:100%}a{font-family:inherit;text-decoration:none}input{outline:none;border:none}button{border:none}