@import"https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700;800;900&display=swap";:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{width:100vw}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:top;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}:root{--clr-black: #1c1c1c;--clr-gray: #ececec;--clr-white: #f7f7f7;--type-normal: #A8A878;--type-fire: #F08030;--type-water: #6890F0;--type-grass: #78C850;--type-electric: #F8D030;--type-ice: #98D8D8;--type-fighting: #C03028;--type-poison: #A040A0;--type-ground: #E0C068;--type-flying: #A890F0;--type-psychic: #F85888;--type-bug: #A8B820;--type-rock: #B8A038;--type-ghost: #705898;--type-dark: #705848;--type-dragon: #7038F8;--type-steel: #B8B8D0;--type-fairy: #F0B6BC}*{margin:0;padding:0;box-sizing:border-box;color:var(--clr-black);font-family:Rubik,sans-serif}ul{list-style-type:none}button{background-color:transparent;border:0;border-radius:0}body{min-height:100vh;background-color:var(--clr-gray)}header{padding-block:1rem;box-shadow:0 0 2rem -1rem #00000080;width:100%}.pokedex-container{gap:32px;display:flex;align-items:center;justify-content:flex-start;flex-direction:column;width:100%}.nav{display:flex;flex-direction:column;gap:1rem;align-items:flex-start;padding-inline:2rem;max-width:1000px;margin:0 auto}.nav-list{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem}.btn-header{background-color:var(--clr-gray);padding:.5rem;border-radius:100vmax;cursor:pointer;text-transform:uppercase;font-weight:600;box-shadow:0 0 1rem #00000040;transition:.2s}.btn-header:hover{transform:scale(1.1);box-shadow:0 0 2rem #00000040}main{margin:0 auto}.pokemon-todos{width:100%;display:grid;grid-template-columns:1fr;gap:1rem}@media screen and (min-width:470px){.pokemon-todos{grid-template-columns:1fr 1fr}}@media screen and (min-width:700px){.pokemon-todos{grid-template-columns:1fr 1fr 1fr}}.pokemon{padding:10px 28px;border-radius:1rem;background-color:var(--clr-white);box-shadow:0 0 3rem -1rem #00000040;padding-block:1rem;text-transform:uppercase;position:relative;isolation:isolate;overflow:hidden}.pokemon-id-back{position:absolute;top:1rem;left:50%;transform:translate(-50%);font-size:6rem;font-weight:800;z-index:-1;color:var(--clr-gray)}.pokemon-imagen{padding-inline:1rem;display:flex;justify-content:center}.pokemon-imagen img{width:100%;max-width:6rem}.pokemon-info{display:flex;flex-direction:column;gap:.5rem;padding-inline:1rem;align-items:center;text-align:center}.nombre-contenedor{display:flex;align-items:center;column-gap:.5rem;flex-wrap:wrap;justify-content:center}.pokemon-id{background-color:var(--clr-gray);padding:.25rem .5rem;border-radius:100vmax;font-size:.75rem;font-weight:500}.pokemon-nombre{font-size:1.4rem}.pokemon-tipos{display:flex;gap:.5rem;font-size:.75rem;font-weight:500;flex-wrap:wrap;justify-content:center}.tipo{padding:.25rem .5rem;border-radius:100vmax}.pokemon-stats{display:flex;gap:1rem;font-size:.85rem}.stat{background-color:var(--clr-gray);padding:.25rem .5rem;border-radius:100vmax}.normal{background-color:var(--type-normal);color:var(--clr-black)}.fire{background-color:var(--type-fire);color:var(--clr-black)}.water{background-color:var(--type-water);color:var(--clr-white)}.grass{background-color:var(--type-grass);color:var(--clr-black)}.electric{background-color:var(--type-electric);color:var(--clr-black)}.ice{background-color:var(--type-ice);color:var(--clr-black)}.fighting{background-color:var(--type-fighting);color:var(--clr-white)}.poison{background-color:var(--type-poison);color:var(--clr-white)}.ground{background-color:var(--type-ground);color:var(--clr-black)}.flying{background-color:var(--type-flying);color:var(--clr-black)}.psychic{background-color:var(--type-psychic);color:var(--clr-black)}.bug{background-color:var(--type-bug);color:var(--clr-black)}.rock{background-color:var(--type-rock);color:var(--clr-black)}.ghost{background-color:var(--type-ghost);color:var(--clr-white)}.dark{background-color:var(--type-dark);color:var(--clr-white)}.dragon{background-color:var(--type-dragon);color:var(--clr-white)}.steel{background-color:var(--type-steel);color:var(--clr-black)}.fairy{background-color:var(--type-fairy);color:var(--clr-black)}.search-contenedor{position:relative;margin-left:auto;display:flex;align-items:center;gap:.5rem}.search-input{padding:.5rem .75rem;border:1px solid #ddd;border-radius:8px;background:#c2c4c2}.search-input:focus{border-color:#999}.search-clear{border:none;background:#eee;border-radius:50%;width:28px;height:28px;font-size:18px;line-height:28px;cursor:pointer}.pokemon{position:relative}.fav{position:absolute;top:10px;right:10px}.fav label{background-color:#fff;display:flex;align-items:center;gap:14px;padding:10px;cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:10px;box-shadow:#959da533 0 8px 24px;color:#000}.fav input{display:none}.fav input:checked+label svg{fill:red;stroke:red;animation:heartButton 1s}@keyframes heartButton{0%{transform:scale(1)}25%{transform:scale(1.3)}50%{transform:scale(1)}75%{transform:scale(1.3)}to{transform:scale(1)}}.fav input+label .action{position:relative;overflow:hidden;display:grid}.fav input+label .action span{grid-column-start:1;grid-column-end:1;grid-row-start:1;grid-row-end:1;transition:all .5s}