@font-face{font-display:swap;font-family:Poppins;font-style:normal;font-weight:100;src:url(/assets/poppins-v22-latin-100-CY-M_i9k.woff2) format("woff2")}@font-face{font-display:swap;font-family:Poppins;font-style:italic;font-weight:100;src:url(/assets/poppins-v22-latin-100italic-DuNkhShJ.woff2) format("woff2")}@font-face{font-display:swap;font-family:Poppins;font-style:normal;font-weight:200;src:url(/assets/poppins-v22-latin-200-B8tqA5oA.woff2) format("woff2")}@font-face{font-display:swap;font-family:Poppins;font-style:italic;font-weight:200;src:url(/assets/poppins-v22-latin-200italic-CeOz3Dg2.woff2) format("woff2")}@font-face{font-display:swap;font-family:Poppins;font-style:normal;font-weight:300;src:url(/assets/poppins-v22-latin-300-Dku2WoCh.woff2) format("woff2")}@font-face{font-display:swap;font-family:Poppins;font-style:italic;font-weight:300;src:url(/assets/poppins-v22-latin-300italic-EWCPeN2Y.woff2) format("woff2")}@font-face{font-display:swap;font-family:Poppins;font-style:normal;font-weight:400;src:url(/assets/poppins-v22-latin-regular-cpxAROuN.woff2) format("woff2")}@font-face{font-display:swap;font-family:Poppins;font-style:italic;font-weight:400;src:url(/assets/poppins-v22-latin-italic-B4GYq972.woff2) format("woff2")}@font-face{font-display:swap;font-family:Poppins;font-style:normal;font-weight:500;src:url(/assets/poppins-v22-latin-500-C8OXljZJ.woff2) format("woff2")}@font-face{font-display:swap;font-family:Poppins;font-style:italic;font-weight:500;src:url(/assets/poppins-v22-latin-500italic-o28Otv0U.woff2) format("woff2")}@font-face{font-display:swap;font-family:Poppins;font-style:normal;font-weight:600;src:url(/assets/poppins-v22-latin-600-zEkxB9Mr.woff2) format("woff2")}@font-face{font-display:swap;font-family:Poppins;font-style:italic;font-weight:600;src:url(/assets/poppins-v22-latin-600italic-CZ4wqKBi.woff2) format("woff2")}@font-face{font-display:swap;font-family:Poppins;font-style:normal;font-weight:700;src:url(/assets/poppins-v22-latin-700-Qrb0O0WB.woff2) format("woff2")}@font-face{font-display:swap;font-family:Poppins;font-style:italic;font-weight:700;src:url(/assets/poppins-v22-latin-700italic-RKf6esGj.woff2) format("woff2")}@font-face{font-display:swap;font-family:Poppins;font-style:normal;font-weight:800;src:url(/assets/poppins-v22-latin-800-Bd8-pIP1.woff2) format("woff2")}@font-face{font-display:swap;font-family:Poppins;font-style:italic;font-weight:800;src:url(/assets/poppins-v22-latin-800italic-B-yag6pl.woff2) format("woff2")}@font-face{font-display:swap;font-family:Poppins;font-style:normal;font-weight:900;src:url(/assets/poppins-v22-latin-900-BmL1zqjw.woff2) format("woff2")}@font-face{font-display:swap;font-family:Poppins;font-style:italic;font-weight:900;src:url(/assets/poppins-v22-latin-900italic-DzxCezIC.woff2) format("woff2")}@font-face{font-display:swap;font-family:Space Grotesk;font-style:normal;font-weight:300;src:url(/assets/space-grotesk-v16-latin-300-CNSJ6809.woff2) format("woff2")}@font-face{font-display:swap;font-family:Space Grotesk;font-style:normal;font-weight:400;src:url(/assets/space-grotesk-v16-latin-regular-C0oqmF7T.woff2) format("woff2")}@font-face{font-display:swap;font-family:Space Grotesk;font-style:normal;font-weight:500;src:url(/assets/space-grotesk-v16-latin-500-DtUIId4r.woff2) format("woff2")}@font-face{font-display:swap;font-family:Space Grotesk;font-style:normal;font-weight:600;src:url(/assets/space-grotesk-v16-latin-600-BUu1NTlP.woff2) format("woff2")}@font-face{font-display:swap;font-family:Space Grotesk;font-style:normal;font-weight:700;src:url(/assets/space-grotesk-v16-latin-700-DUDKB872.woff2) format("woff2")}@font-face{font-display:swap;font-family:Noto Sans JP;font-style:normal;font-weight:100;src:url(/assets/noto-sans-jp-v53-japanese-100-dqRW3z15.woff2) format("woff2")}@font-face{font-display:swap;font-family:Noto Sans JP;font-style:normal;font-weight:200;src:url(/assets/noto-sans-jp-v53-japanese-200-AgqZ4KQN.woff2) format("woff2")}@font-face{font-display:swap;font-family:Noto Sans JP;font-style:normal;font-weight:300;src:url(/assets/noto-sans-jp-v53-japanese-300-BFiMDu2V.woff2) format("woff2")}@font-face{font-display:swap;font-family:Noto Sans JP;font-style:normal;font-weight:400;src:url(/assets/noto-sans-jp-v53-japanese-regular-2g38QH9d.woff2) format("woff2")}@font-face{font-display:swap;font-family:Noto Sans JP;font-style:normal;font-weight:500;src:url(/assets/noto-sans-jp-v53-japanese-500-DpeuF01d.woff2) format("woff2")}@font-face{font-display:swap;font-family:Noto Sans JP;font-style:normal;font-weight:600;src:url(/assets/noto-sans-jp-v53-japanese-600-BxO_8EhK.woff2) format("woff2")}@font-face{font-display:swap;font-family:Noto Sans JP;font-style:normal;font-weight:700;src:url(/assets/noto-sans-jp-v53-japanese-700-BS_P2VpB.woff2) format("woff2")}@font-face{font-display:swap;font-family:Noto Sans JP;font-style:normal;font-weight:800;src:url(/assets/noto-sans-jp-v53-japanese-800-B0pz38Sh.woff2) format("woff2")}@font-face{font-display:swap;font-family:Noto Sans JP;font-style:normal;font-weight:900;src:url(/assets/noto-sans-jp-v53-japanese-900-CFjFp0_u.woff2) format("woff2")}:root{--clr-heading: hsl(253, 33%, 23%);--clr-text: hsl(251, 16%, 42%);--clr-caption: hsl(251, 16%, 68%);--clr-scroll-thumb: hsla(251, 16%, 42%, .3);--clr-scroll-track: hsla(230, 20%, 90%, .3);--clr-btn-primary: hsl(252, 14%, 49%);--clr-input-background: hsl(230, 20%, 94%);--clr-skeleton-background: hsl(232, 18%, 92%);--clr-type-background: hsla(238, 31%, 55%, .3);--clr-type-outline: hsla(0, 8.8%, 51%, .3);--clr-type-border: hsla(0, 17%, 93%, .9);--clr-filter-mode-background: hsl(0, 0%, 95%);--clr-hover-lighter: hsl(240, 5%, 96%);--clr-hover-light: hsl(240, 5%, 90%);--clr-hover-dark: hsl(252, 16%, 44%);--clr-white: hsl(0, 0%, 100%);--clr-pokemon-id: hsla(0, 0%, 100%, .3);--clr-water: hsl(219, 79%, 66%);--clr-fire: hsl(24, 87%, 56%);--clr-psychic: hsl(342, 93%, 67%);--clr-grass: hsl(101, 55%, 62%);--clr-ice: hsl(180, 53%, 65%);--ff-base: Poppins, sans-serif;--ff-accent: Space Grotesk, sans-serif;--ff-japanese: Noto Sans JP, sans-serif;--fs-4xs: .5rem;--fs-3xs: .625rem;--fs-2xs: .75rem;--fs-xs: .875rem;--fs-sm: .9375rem;--fs-md: 1rem;--lh-base: 1.6}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{scrollbar-color:var(--clr-scroll-thumb) var(--clr-scroll-track);scrollbar-width:thin;scroll-behavior:smooth}body{font-family:var(--ff-base);font-size:var(--fs-md);color:var(--clr-text)}h1,h2,h3,h4,h5,h6{color:var(--clr-heading)}p{line-height:var(--lh-base)}li{list-style:none}a{text-decoration:none}img{display:block;max-width:100%}button{font-family:inherit;color:inherit;background:0;border:0;cursor:pointer}.pokedex{padding:2rem}.pokedex__header{max-width:876px;margin-inline:auto}.pokedex__logo-link{display:inline-block}.pokedex__description{font-size:var(--fs-sm)}.pokedex__search-wrapper{position:relative;display:grid;grid-template-columns:1fr auto;gap:8px 12px;padding-block:1.5rem}.pokedex__search-bar{display:contents}.pokedex__search-input-wrapper{position:relative}.pokedex__search-field{font-family:inherit;font-size:var(--fs-xs);color:inherit;border:0;background-color:var(--clr-input-background);border-radius:8px;width:100%;padding:.5rem .5rem .5rem 2.5rem}.pokedex__search-icon *{stroke:var(--clr-heading)}.pokedex__filter-toggle-icon *{stroke:var(--clr-white)}.pokedex__search-icon{position:absolute;top:50%;left:10px;transform:translateY(-50%)}.pokedex__filter-toggle{background-color:var(--clr-btn-primary);border-radius:8px;display:flex;align-items:center;padding-inline:.5rem}.pokedex__filter-toggle:hover{background-color:var(--clr-hover-dark)}.pokedex__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:16px;max-width:876px;margin-inline:auto}.pokedex-card{position:relative;border-radius:12px;padding:1rem;box-shadow:0 2px 4px #0000001a,0 4px 12px #0000001a;transition:background-color .3s ease;opacity:0;transform:translateY(20px);transition:opacity .4s ease-out,transform .4s cubic-bezier(.34,1.56,.64,1);will-change:transform,opacity;backface-visibility:hidden;transform:translateZ(0)}.pokedex-card.animate-in{opacity:1;transform:translateY(0)}.pokedex-card.filtered-out{opacity:0;transform:scale(.9);transition:opacity .3s ease-out,transform .3s ease-out}.pokedex-card__type{display:flex;gap:4px;width:fit-content;padding:4px;background-color:var(--clr-type-background);border-radius:50px;position:absolute;left:8px;top:8px}.pokedex-card__id{position:absolute;top:50%;right:0;transform:translateY(-50%);font-family:var(--ff-accent);font-size:3rem;color:var(--clr-pokemon-id);writing-mode:vertical-rl;pointer-events:none;z-index:3}.pokedex-card__img-wrapper{position:relative;overflow:hidden}.pokedex-card__pokeball{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;opacity:.125;z-index:1}.pokedex-card__pokeball--skeleton{width:65%;opacity:.425}.pokedex-card__img{position:relative;z-index:2}.pokedex-card__name{font-weight:600;text-align:center;text-overflow:ellipsis;width:85%;margin:.75rem auto 0;overflow:hidden;white-space:nowrap}.pokedex__no-results-wrapper{position:absolute;left:50%;transform:translate(-50%);margin-top:50px}.pokedex__no-results{font-size:14px;background:var(--clr-input-background);border-radius:8px;padding:8px 16px}.pokemon-info__wrapper{padding:4px}.pokemon-info__header-wrapper{position:relative;margin-top:1.5rem}.pokemon-info__header{position:relative;display:flex;justify-content:space-between;margin-inline:20px;z-index:2}.pokemon-info__header-content{width:100%}.pokemon-info__header-group{display:flex;align-items:center;gap:16px}.pokemon-info__back-button{height:fit-content}.pokemon-info__id{align-self:center;font-family:var(--ff-accent);font-weight:600;margin-left:auto}.pokemon-info__name-ja{font-family:var(--ff-japanese);margin:-8px 0 0 36px;font-weight:200}.pokemon-info__name-eng,.pokemon-info__name-ja,.pokemon-info__id{color:var(--clr-white)}.pokemon-info__types{display:flex;align-items:center;justify-content:center;gap:16px}.pokemon-info__type{color:var(--clr-white);font-size:var(--fs-3xs);font-weight:700;border-radius:50px;padding:4px 12px}.pokemon-info__pokeball-wrapper{position:relative;display:flex;justify-content:flex-end;margin-top:-72px;z-index:1;opacity:.125}.pokemon-info__pokeball{height:225px;width:225px}.pokemon-info__navigation{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;height:fit-content;margin-top:64px;z-index:3;overflow:hidden}.pokemon-info__chevron-wrapper{position:absolute;top:50%;transform:translateY(50%)}.pokemon-info__chevron-wrapper--left{left:20px}.pokemon-info__chevron-wrapper--right{right:20px}.pokemon-info__image{width:55%;min-width:185px;max-width:215px;margin-inline:auto}.pokemon-info__details-wrapper{background-color:#fff;display:grid;align-content:start;gap:24px;border-radius:8px;box-shadow:inset 0 2px 4px #0003;height:calc(100dvh - 225px);padding-top:clamp(4rem,16dvw + 2rem,6rem)}.pokemon-info__title{color:#74cb48;font-weight:700;font-size:var(--fs-xs);text-align:center;margin-bottom:16px}.pokemon-info__attributes,.pokemon-info__text,.pokemon-info__stats{margin-inline:20px}.pokemon-info__attributes{display:flex;flex-wrap:wrap;row-gap:8px;text-align:center}.pokemon-info__attribute{flex:1 0 33.33333333333333%;display:grid;grid-template-rows:minmax(30px,1fr) auto;padding:4px 1rem 0}.pokemon-info__attribute:not(:last-child){border-right:2px solid #e5e5e5}.pokemon-info__abilities{display:grid;align-items:center}.pokemon-info__value,.pokemon-info__ability{font-size:var(--fs-3xs)}.pokemon-info__label{color:var(--clr-caption);font-size:var(--fs-4xs);margin-top:4px}.pokemon-info__attribute-wrapper{display:flex;justify-content:center;align-items:center;gap:8px}.pokemon-info__attribute-icon{width:16px;height:16px}.pokemon-info__text{font-size:var(--fs-3xs)}.pokemon-info__stat{display:grid;grid-template-columns:40px 1fr;gap:12px}.pokemon-info__stat-name,.pokemon-info__stat-value{font-size:var(--fs-3xs);text-align:right}.pokemon-info__stat-name{color:#74cb48;font-weight:700;border-right:2px solid #e5e5e5;padding-right:12px}.pokemon-info__stat-group{display:grid;grid-template-columns:20px 1fr;align-items:center;gap:8px;width:100%}.pokemon-info__progress-wrapper{width:100%;height:4px;border-radius:50px}.pokemon-info__progress{height:100%;border-radius:50px;transition:width .5s ease-in-out}.pokedex__filter-dropdown{position:absolute;right:0;top:70px;display:none;background-color:var(--clr-white);border-radius:8px;box-shadow:0 0 2px #0000001a,0 0 2px #0000001a;z-index:10}.pokedex__filter-mode,.pokedex__filter-option-label{font-size:var(--fs-xs)}.pokedex__filter-title{color:var(--clr-heading);font-size:var(--fs-xs);font-weight:500;padding-bottom:4px}.pokedex__filter-mode{display:grid;gap:8px;padding:8px 12px 10px;box-shadow:0 2px 4px -2px #0000001a}.pokedex__filter-modes{display:grid;grid-template-columns:1fr 1fr;align-items:center;text-align:center;gap:4px;background-color:var(--clr-filter-mode-background);padding:4px;border-radius:8px}.pokedex__filter-option-any,.pokedex__filter-option-all{font-weight:500;border-radius:8px;width:116px;padding-block:6px}.pokedex__filter-option-any:hover,.pokedex__filter-option-all:hover{background-color:var(--clr-hover-light);color:var(--clr-heading)}.pokedex__filter-option--selected{background-color:var(--clr-white);color:var(--clr-heading);box-shadow:0 2px 6px -1px #0000001a}.pokedex__filter-option--selected:hover{background-color:var(--clr-white)}.pokedex__filter-mode-description{font-size:var(--fs-2xs)}.pokedex__filter-list-wrapper{box-shadow:0 2.5px 5px -1.5px #0000001c;padding:10px 12px}.pokedex__filter-list{height:212px;overflow-y:scroll;scrollbar-color:var(--clr-scroll-thumb) var(--clr-scroll-track);scrollbar-width:thin}.pokedex__filter-item{display:grid;grid-template-columns:1fr 16px;align-items:center;border-radius:8px;padding:4px 8px;margin-right:12px;cursor:pointer}.pokedex__filter-item:hover{background-color:var(--clr-hover-lighter)}.pokedex__filter-content{display:flex;align-items:center;gap:8px}.pokedex__filter-icon{border-radius:100%;width:12px;height:12px}.pokedex__filter-icon--accent{width:8px;height:8px;outline:2px solid var(--clr-type-outline)}.pokedex__filter-label{font-size:var(--fs-xs)}.pokedex__filter-check{display:none;align-items:center;margin-left:auto}.pokedex__filter-check--active{display:flex}.pokedex__filter-checkmark{width:16px;height:16px}.pokedex__filter-actions{display:flex;justify-content:space-between;padding:14px 12px 12px}.pokedex__filter-action-clear,.pokedex__filter-action-apply{font-size:var(--fs-xs);font-weight:500;border-radius:8px}.pokedex__filter-action-clear{padding:8px}.pokedex__filter-action-clear:hover{color:var(--clr-btn-primary);background-color:var(--clr-hover-lighter)}.pokedex__filter-action-apply:hover{background-color:var(--clr-hover-dark)}.pokedex__filter-action-apply{background-color:var(--clr-btn-primary);color:var(--clr-white);padding:8px 16px}.pokedex__filter-action-apply--disabled{opacity:.5;pointer-events:none}.pokedex__active-filters{display:flex;flex-wrap:wrap;gap:6px 4px}.pokedex__active-filter{display:flex;align-items:center;gap:4px;padding:4px 8px;border-radius:50px;opacity:0;transform:scale(.8);transition:opacity .3s ease-out,transform .3s cubic-bezier(.34,1.56,.64,1)}.pokedex__active-filter.animate-in{opacity:1;transform:scale(1)}.pokedex__active-filter.animate-out{opacity:0;transform:scale(.8);pointer-events:none}.pokedex__active-filter-label{color:var(--clr-white);font-size:var(--fs-3xs);font-weight:600}.pokedex__active-filter-remove{display:flex;align-items:center;color:var(--clr-white)}.pokedex__filter-remove{width:14px;height:14px}.spinner-container{position:fixed;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;background:var(--clr-type-background);z-index:9999}.spinner{animation:rotator 1.4s linear infinite}@keyframes rotator{0%{transform:rotate(0)}to{transform:rotate(270deg)}}.path{stroke-dasharray:187;stroke-dashoffset:0;transform-origin:center;animation:dash 1.4s ease-in-out infinite,colors 5.6s ease-in-out infinite}@keyframes colors{0%{stroke:var(--clr-water)}25%{stroke:var(--clr-fire)}50%{stroke:var(--clr-psychic)}75%{stroke:var(--clr-grass)}to{stroke:var(--clr-ice)}}@keyframes dash{0%{stroke-dashoffset:187}50%{stroke-dashoffset:46.75;transform:rotate(135deg)}to{stroke-dashoffset:187;transform:rotate(450deg)}}.skeleton-card{position:relative;background-color:var(--clr-skeleton-background);border-radius:12px;box-shadow:0 2px 4px #0000001a;padding:16px;opacity:1;transition:opacity .3s ease-out;aspect-ratio:1/1.2;overflow:hidden}.skeleton-card.fade-out{opacity:0}.skeleton-card:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;transform:translate(-100%);background-image:linear-gradient(100deg,#f1f0ef00,#ffffffb3,#dddddd80 60%,#f1f0ef00 80%);animation:shimmer 2s infinite;z-index:1}.filtered-skeleton:after{content:none}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}@media (min-width: 512px){.pokedex__list{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (min-width: 768px){.pokedex__list{grid-template-columns:repeat(4,minmax(0,1fr))}}.pokedex__load-more{display:none;font-weight:500;color:var(--clr-white);background-color:var(--clr-btn-primary);border-radius:8px;padding:8px 16px;margin:32px auto 0}.pokedex__load-more:hover{background-color:var(--clr-hover-dark)}
