@import"https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap";@import"https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css";:root{--gray-50: #f6f6f6;--gray-100: #e7e7e7;--gray-200: #d1d1d1;--gray-300: #b0b0b0;--gray-400: #888888;--gray-500: #6d6d6d;--gray-600: #5d5d5d;--gray-700: #4f4f4f;--gray-800: #454545;--gray-900: #3d3d3d;--gray-950: #000000;--green-50: #effbea;--green-100: #dcf5d2;--green-200: #bbecaa;--green-300: #91de78;--green-400: #6bcd4e;--green-500: #4bb230;--green-600: #368e22;--green-700: #2c6c1f;--green-800: #27571d;--green-900: #234a1d;--green-950: #0e280b;--red-50: #fff0f0;--red-100: #ffdede;--red-200: #ffc3c3;--red-300: #ff9a9a;--red-400: #ff6060;--red-500: #ff2e2e;--red-600: #f30f0f;--red-700: #cd0808;--red-800: #a90b0b;--red-900: #8b1111;--red-950: #4d0202;--blue-50: #edf7ff;--blue-100: #d7ecff;--blue-200: #b9dfff;--blue-300: #88ccff;--blue-400: #50afff;--blue-500: #288cff;--blue-600: #146eff;--blue-700: #0a55eb;--blue-800: #0f44be;--blue-900: #133e95;--blue-950: #11275a;--purple-50: #fbf6fe;--purple-100: #f5eafd;--purple-200: #edd9fb;--purple-300: #debcf6;--purple-400: #ca91ef;--purple-500: #b666e6;--purple-600: #a043d6;--purple-700: #8c34bc;--purple-800: #762f9a;--purple-900: #60277c;--purple-950: #42115a;--yellow-50: #fdfde9;--yellow-100: #fbfcc5;--yellow-200: #fbf68d;--yellow-300: #f8eb4c;--yellow-400: #f4dc26;--yellow-500: #e4c20e;--yellow-600: #c4980a;--yellow-700: #9d6d0b;--yellow-800: #825711;--yellow-900: #6e4715;--yellow-950: #402508}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Poppins,sans-serif;color:#fff;overflow:hidden}#app{height:100vh;display:flex;flex-direction:column}main{background-image:linear-gradient(to bottom left,var(--gray-900),var(--gray-950) 70%);display:flex;justify-content:center;padding:5em 2em;flex-wrap:wrap;gap:2em;height:100%;overflow-y:auto;scrollbar-color:var(--gray-500) rgba(0,0,0,1);scrollbar-width:4px}.card{transition:background-color .2s ease-out;flex-basis:400px;flex-grow:1;height:250px;box-shadow:0 0 8px #000;border-radius:1em;position:relative;padding:2em;display:flex;flex-direction:column;gap:.5em}.id{position:absolute;right:12px;top:16px;text-align:right;font-size:12px}.card .name{font-size:1.75em}.card .name:first-letter{text-transform:uppercase}.card .info{display:flex}.card .tags{display:flex;flex-wrap:wrap;flex-grow:1;gap:.5em}.card .tags>*{width:90px;height:30px;font-size:14px;display:flex;justify-content:center;align-items:center;border-radius:8px}.card img{width:120px;height:120px}.fire .card{background-color:var(--red-800)}.water .card{background-color:var(--blue-800)}.leaf .card{background-color:var(--green-700)}.tags .grass{background-image:linear-gradient(to top,var(--green-700),var(--green-400))}.tags .poison{background-image:linear-gradient(to top,var(--purple-800),var(--purple-600))}.tags .fire{background-image:linear-gradient(to top,var(--red-800),var(--red-600))}.tags .water{background-image:linear-gradient(to top,var(--blue-800),var(--blue-600))}.tags .flying{background-image:linear-gradient(to top,var(--gray-200),var(--blue-700) 70%)}.tags .ground{background-image:linear-gradient(to top,var(--yellow-900),var(--yellow-700))}.tags .ice{background-image:linear-gradient(to top,var(--blue-400),var(--blue-600))}.tags .bug{background-image:linear-gradient(to top,var(--green-800),var(--green-600))}.tags .normal{background-image:linear-gradient(to top,var(--gray-800),var(--gray-600))}.tags .electric{background-image:linear-gradient(to top,var(--yellow-600),var(--yellow-400))}.tags .fairy{background-image:linear-gradient(to top,var(--purple-600),var(--purple-400))}.tags .ghost{background-image:linear-gradient(to top,var(--purple-500),var(--purple-700))}.tags .dragon{background-image:linear-gradient(to top,var(--purple-800),var(--purple-950))}.tags .dark{background-image:linear-gradient(to top,var(--gray-800),var(--gray-950))}.tags .steel{background-image:linear-gradient(to top,var(--gray-500),var(--gray-400))}.tags .rock{background-image:linear-gradient(to top,var(--yellow-800),var(--yellow-600))}.tags .psychic{background-image:linear-gradient(to top,var(--purple-500),var(--purple-700))}.tags .fighting{background-image:linear-gradient(to top,var(--red-950),var(--red-500))}.cls-1{fill:#010101}.cls-2{fill:#fff}.cls-3{fill:#eb2127}header{width:100%;height:100px;display:flex;flex-direction:column;border-bottom:1px solid black;transition:background-color .2s ease-out}header .icons{display:flex;justify-content:space-between;align-items:center;padding:.5em 1em;height:65px;border-bottom:1px solid black;font-size:1.2em;font-weight:500}header .icons .pokeicon{display:flex;align-items:center;justify-content:center;gap:.75em}header .icons .pokeicon svg{width:40px;height:40px}header .icons .searchbar{display:flex;justify-content:center;align-items:center;height:2em;border-radius:1000px;box-shadow:0 0 2px 1px var(--gray-950)}header .icons .searchbar .bi-search{padding:.25em .25em .25em .5em;transition:.2s ease;display:flex;align-items:center}header .icons .searchbar input{height:100%;width:200px;border-radius:1000px;padding:.5em;border:NONE;outline:none;transition:.2s ease}header .icons .searchbar .bi-arrow-right{border-top-right-radius:2em;border-bottom-right-radius:2em;cursor:pointer;width:0;font-size:0px;display:flex;align-items:flex-start;padding:.5em .5em .5em .25em;transition:.2s ease}header .icons .searchbar:has(input:not(:placeholder-shown)) .bi-search{width:0%;font-size:0}header .icons .searchbar:has(input:not(:placeholder-shown)) .bi-arrow-right{width:1.5em;font-size:1em}header .icons .searchbar:has(input:not(:placeholder-shown)) input{width:232px}header .icons .themes{display:flex;gap:.5em;margin-right:1em;font-size:1.25em}header .icons .themes i{color:var(--gray-500);transition:.2s ease;cursor:pointer}header .icons .themes i:hover{color:var(--gray-300)}header .icons .themes i.bi-fire:hover{color:var(--red-400)}header .icons .themes i.bi-droplet-fill:hover{color:var(--blue-400)}header .icons .themes i.bi-leaf-fill:hover{color:var(--green-400)}header .icons .themes i.bi-fire.active{color:var(--red-400)}header .icons .themes i.bi-droplet-fill.active{color:var(--blue-400)}header .icons .themes i.bi-leaf-fill.active{color:var(--green-400)}header .searchs{height:35px}.fire header{background-color:var(--red-800)}.water header{background-color:var(--blue-800)}.leaf header{background-color:var(--green-700)}.fire header .icons .searchbar{background-color:var(--red-800)}.fire header .icons .searchbar input:focus{border:1px solid var(--red-900)}.fire header .icons .searchbar .bi-arrow-right{background-color:var(--red-800)}.water header .icons .searchbar{background-color:var(--blue-800)}.water header .icons .searchbar input:focus{border:1px solid var(--blue-900)}.water header .icons .searchbar .bi-arrow-right{background-color:var(--blue-800)}.leaf header .icons .searchbar{background-color:var(--green-800)}.leaf header .icons .searchbar input:focus{border:1px solid var(--green-900)}.leaf header .icons .searchbar .bi-arrow-right{background-color:var(--green-800)}header .type-search{height:100%;display:flex;justify-content:center;align-items:center}select{padding:.25em .5em;border-radius:4px;box-shadow:0 0 4px 1px var(--gray-800);color:#fff;background-color:var(--gray-800);width:150px}select:has(option[value=grass]:checked){background-image:linear-gradient(to top,var(--green-700),var(--green-400))}select:has(option[value=poison]:checked){background-image:linear-gradient(to top,var(--purple-800),var(--purple-600))}select:has(option[value=fire]:checked){background-image:linear-gradient(to top,var(--red-800),var(--red-600))}select:has(option[value=water]:checked){background-image:linear-gradient(to top,var(--blue-800),var(--blue-600))}select:has(option[value=flying]:checked){background-image:linear-gradient(to top,var(--gray-200),var(--blue-700) 70%)}select:has(option[value=ground]:checked){background-image:linear-gradient(to top,var(--yellow-900),var(--yellow-700))}select:has(option[value=ice]:checked){background-image:linear-gradient(to top,var(--blue-400),var(--blue-600))}select:has(option[value=bug]:checked){background-image:linear-gradient(to top,var(--green-800),var(--green-600))}select:has(option[value=normal]:checked){background-image:linear-gradient(to top,var(--gray-800),var(--gray-600))}select:has(option[value=electric]:checked){background-image:linear-gradient(to top,var(--yellow-600),var(--yellow-400))}select:has(option[value=fairy]:checked){background-image:linear-gradient(to top,var(--purple-600),var(--purple-400))}select:has(option[value=ghost]:checked){background-image:linear-gradient(to top,var(--purple-500),var(--purple-700))}select:has(option[value=dragon]:checked){background-image:linear-gradient(to top,var(--purple-800),var(--purple-950))}select:has(option[value=dark]:checked){background-image:linear-gradient(to top,var(--gray-800),var(--gray-950))}select:has(option[value=steel]:checked){background-image:linear-gradient(to top,var(--gray-500),var(--gray-400))}select:has(option[value=rock]:checked){background-image:linear-gradient(to top,var(--yellow-800),var(--yellow-600))}select:has(option[value=psychic]:checked){background-image:linear-gradient(to top,var(--purple-500),var(--purple-700))}select:has(option[value=fighting]:checked){background-image:linear-gradient(to top,var(--red-950),var(--red-500))}@media (max-width: 650px){header .icons{padding:.25em .5em}header .icons .pokeicon{gap:.25em;cursor:pointer}header .icons .pokeicon p{font-size:0}header .icons .pokeicon svg{width:2.5em}header .icons .searchbar input{width:125px}header .icons .searchbar input:focus{width:150px}header .icons .searchbar .bi-search{display:none}header .icons .searchbar:has(input:not(:placeholder-shown)) .bi-arrow-right{width:1.5em;font-size:1em}header .icons .searchbar:has(input:not(:placeholder-shown)) input{width:calc(150px - 1.5em)}header .icons .themes{gap:.2em;margin-right:0}}