a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1;background-color:var(--secondary-color);display:flex;flex-direction:column;min-height:100dvh}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}table{border-collapse:collapse;border-spacing:0}@font-face{font-family:Kanit;src:url("../../assets/fonts/Kanit-Bold.woff2") format("woff2");font-weight:700;font-display:optional}@font-face{font-family:Kanit;src:url("../../assets/fonts/Kanit-Medium.woff2") format("woff2");font-weight:500;font-display:optional}@font-face{font-family:Kanit;src:url("../../assets/fonts/Kanit-Regular.woff2") format("woff2");font-weight:400;font-display:optional}:root{--primary-font-family:"Kanit",sans-serif;--primary-color:#ff5f25;--secondary-color:#fff4b8;--search-bar-color:#d9d9d9;--heading-color:#898989;--background-evolution-color:#efefef;--color-black:black;--white-color:white;--font-size-xs:0.75rem;--font-size-sm:0.875rem;--font-size-base:1rem;--font-size-md:1.125rem;--font-size-lg:1.5rem;--font-size-xl:2rem;--font-size-2xl:3rem;--font-size-3xl:4.5rem;--space-xs:0.25rem;--space-sm:0.5rem;--space-md:1rem;--space-lg:1.5rem;--space-xl:2rem;--space-2xl:3rem;--space-3xl:4rem;--font-weight-regular:400;--font-weight-medium:500;--font-weight-bold:700;--radius-sm:0.5rem;--radius-md:1rem;--radius-full:999px;--header-height:4rem;--search-bar-pokemon:8.5rem;--search-bar-pokedex:10rem;--type-normal:#a8a878;--type-fire:#f08030;--type-water:#6890f0;--type-electric:#f8d030;--type-grass:#78c850;--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-dragon:#7038f8;--type-dark:#705848;--type-steel:#b8b8d0;--type-fairy:#ee99ac}.header{background-color:var(--primary-color);width:100%;min-height:var(--header-height);display:flex;justify-content:center}.header__nav{display:flex}.header__list{display:flex;align-items:center}.header__link{font-family:var(--primary-font-family);font-size:var(--font-size-base);font-weight:var(--font-weight-medium);text-decoration:none;color:#fff;border-radius:var(--radius-sm);padding:.25rem .75rem;transition:background-color .3s,color .3s}.header__link:hover{background-color:#eaeaea;color:#000}@media (width >= 30rem){.header__list{gap:var(--space-lg)}.header__link{padding:.5rem 1rem}}@media (width >= 48rem){.header{justify-content:start}.header__nav{padding-left:1.25rem}.header__link{font-size:var(--font-size-md)}}.search{display:flex;justify-content:center;align-items:center;padding:5rem 0}.search__bar{position:relative;margin:0;padding:0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.search__input{font-family:var(--primary-font-family);font-size:var(--font-size-base);width:clamp(15rem,50dvw,25rem);height:3.5rem;border-radius:var(--radius-full);padding:0 3rem 0 1.5rem;border:1px solid #d9d9d9;outline:transparent solid 1px;transition:border .3s,color .3s,stroke .3s}.search__input::-webkit-search-cancel-button{display:none}.search__input::placeholder{color:#d9d9d9}.search__icon{position:absolute;right:1.5rem;top:50%;width:1.5rem;height:1.5rem;fill:none;stroke:var(--search-bar-color);transform:translateY(-50%)}.search__input:focus{border:1px solid var(--color-black)}.search__input:focus::placeholder{color:var(--color-black)}.search__input:focus~.search__icon{stroke:var(--color-black)}.search__suggestions{position:absolute;z-index:999;top:100%;left:50%;transform:translateX(-50%);width:clamp(12rem,42dvw,21rem);border-radius:0 0 1rem 1rem;outline:1px solid var(--color-black);overflow:hidden;max-height:0;opacity:0;visibility:hidden;transition:max-height .4s ease-in-out,opacity .3s ease-in-out,visibility .3s;transform-origin:top center}.search__suggestions.is-visible{max-height:500px;opacity:1;visibility:visible}.suggestion{background-color:var(--primary-color);display:flex;align-items:center;gap:var(--space-md);height:5rem;border-bottom:1px solid #5c1901;user-select:none;transition:background-color .3s}.suggestion:last-child{border-bottom:none}.suggestion:hover{background-color:#ff9068}.suggestion__image-container{background-color:var(--white-color);height:100%}.suggestion__image{width:100%;height:100%;object-fit:cover}.suggestion__name{font-family:var(--primary-font-family);font-size:clamp(1.25rem, 4dvw, 1.5rem);color:var(--white-color)}.suggestion--clickable{cursor:pointer}@media (width >= 48rem){.suggestion__item{justify-content:center}}.loading-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:999}.loading-overlay__spinner{width:3rem;height:3rem;border:4px solid rgba(0,0,0,.1);border-top-color:var(--primary-color);border-radius:var(--radius-full);animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.card{width:clamp(8rem,40dvw,11rem);display:flex;flex-direction:column;gap:var(--space-sm);outline:transparent solid 2px;border-radius:var(--radius-sm);box-shadow:0 4px 4px 4px transparent;transition:background-color .3s,transform .3s,outline .3s,box-shadow .3s;cursor:pointer;user-select:none}.card:hover{background-color:rgba(255,95,37,.08);transform:translateY(-8px);outline:#ff5f2534 solid 2px;box-shadow:0 4px 4px 4px rgba(0,0,0,.205)}.card__image-container{background-color:#fff;width:100%;height:100%;display:flex;justify-content:center;align-items:center;border-radius:var(--radius-sm);box-shadow:0 2px 8px rgba(0,0,0,.1)}.card__image{width:100%;height:100%;object-fit:cover}.card__name{font-family:var(--primary-font-family);font-size:var(--font-size-md);font-weight:var(--font-weight-medium);margin-top:var(--space-sm)}.card__type-container{display:flex;gap:var(--space-sm)}.card__type{font-family:var(--primary-font-family);color:#fff;width:clamp(10rem,50dvw,9rem);padding:.5rem;text-align:center;border-radius:.75rem}.hero{min-height:calc(100dvh - var(--header-height));display:flex;justify-content:center;align-items:center}.hero__title{display:flex;flex-direction:column;align-items:center}.hero__image{width:clamp(15rem,60dvw,18rem)}.hero__text{font-family:var(--primary-font-family);font-weight:var(--font-weight-bold);font-size:clamp(3.5rem, 14dvw, 4.5rem);color:var(--primary-color);text-shadow:0 4px 4px rgba(0,0,0,.25)}@media (width >= 30rem){.hero__title{position:relative;flex-direction:row;gap:clamp(4rem,10dvw,10rem)}.hero__image{position:absolute;left:50%;top:50%;width:clamp(13rem,45dvw,34rem);max-height:70dvh;transform:translate(-44%,-50%)}.hero__text{font-size:clamp(3rem, 18dvw, 15rem)}}.pokedex{position:relative;flex:1;display:flex;align-items:center;flex-direction:column;gap:var(--space-2xl);padding:0 5rem}.pokedex.is-loaded .loading-overlay{display:none}.pokedex__grid{width:100%;display:grid;grid-template-columns:repeat(auto-fill,minmax(10rem,1fr));justify-items:center;align-items:center;gap:var(--space-2xl)}.pokedex__paginator-container{margin:1.5rem 0}.pokedex__load-more{background-color:var(--primary-color);font-family:var(--primary-font-family);font-weight:var(--font-weight-medium);color:var(--white-color);padding:.75rem 2rem;border:1px solid #000;border-radius:var(--radius-full);box-shadow:2px 3px 4px 2px rgba(0,0,0,.2);transition:transform .3s,box-shadow .3s;transform:scale(1);user-select:none;cursor:pointer}.pokedex__load-more:active{transform:scale(.9);box-shadow:0 0 0 0 transparent}.paginator__button{background-color:var(--primary-color);font-family:var(--primary-font-family);font-size:var(--font-size-sm);color:var(--white-color);border:0;border-right:1px solid var(--white-color);padding:.25rem .75rem;cursor:pointer;user-select:none}.paginator__button:last-child{border-right:none}.paginator__button--active{background-color:var(--white-color);color:var(--primary-color);border-top:1px solid var(--primary-color);border-bottom:1px solid var(--primary-color)}.paginator__button--active:first-child{border-left:1px solid var(--primary-color)}.paginator__button--active:last-child{border-right:1px solid var(--primary-color)}.paginator__dots{background-color:#ff5f25ab;font-family:var(--primary-font-family);font-size:var(--font-size-sm);color:var(--white-color);padding:.25rem .75rem;border-right:1px solid var(--white-color);user-select:none}.scroll-top{position:fixed;bottom:1.5rem;right:.5rem;background-color:var(--primary-color);width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);border:1px solid #000;opacity:0;pointer-events:none;transition:opacity .3s}.scroll-top--visible{opacity:1;pointer-events:auto}.scroll-top__icon{width:20px;height:20px;fill:var(--white-color)}.grid-layout{display:grid;grid-template-areas:"search-bar search-bar" "pokemon pokemon" "prev next";align-items:center;justify-content:center;gap:var(--space-3xl);margin:0 auto;padding-bottom:var(--space-lg)}.grid-layout .search{padding:5rem 0 0;grid-area:search-bar}.grid-layout.is-loaded .loading-overlay,.pokemon__about,.pokemon__evolutions,.pokemon__heading{display:none}.grid-layout.is-loaded .pokemon__about,.grid-layout.is-loaded .pokemon__heading,.pokemon__evolutions.is-ready{display:flex}.pokemon{position:relative;max-width:62.5rem;min-width:15rem;flex:1;display:flex;flex-direction:column;align-items:center;gap:var(--space-3xl);padding:0 1rem;grid-area:pokemon}.pokemon__about,.pokemon__heading{font-family:var(--primary-font-family)}.pokemon__heading{font-size:clamp(.75rem, 10dvw, 3.5rem);font-weight:var(--font-weight-medium);color:var(--heading-color)}.pokemon__about{flex-direction:column;align-items:center;gap:var(--space-2xl)}.pokemon__about .card--basic{cursor:auto;transition:none}.pokemon__about .card--basic:hover{background-color:transparent;transform:none;outline:0;box-shadow:none}.pokemon__extra{display:flex;flex-direction:column;gap:var(--space-lg);justify-content:center;align-items:center}.pokemon__text{font-size:clamp(1.25rem, 5dvw, 2rem);min-height:5rem}.pokemon__detail{width:clamp(15rem,50dvw,30rem);display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-2xl);padding:var(--space-md);border-radius:var(--radius-sm)}.pokemon__info{font-size:var(--font-size-lg);text-align:center;color:var(--white-color);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--space-md)}.pokemon__info-content{color:var(--color-black);width:clamp(6rem,25dvw,10rem);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block}.pokemon__evolutions{background-color:var(--background-evolution-color);width:clamp(12rem,50dvw,15rem);flex-direction:column;align-items:center;gap:var(--space-2xl);padding:2rem 0;border-radius:var(--radius-sm)}.evolution-arrow{display:flex;align-items:center;justify-content:center}.evolution-arrow__icon{width:1.5rem;height:1.5rem;fill:var(--primary-color);transform:rotate(90deg)}.navigator-container{display:flex;justify-content:center}.navigator-item{background-color:var(--primary-color);width:50px;height:50px;display:none;align-items:center;justify-content:center;border-radius:var(--radius-full);border:1px solid transparent;opacity:1;cursor:pointer;transition:background-color .3s,border .3s,fill .3s,opacity .3s}.grid-layout.is-loaded .navigator-item{display:flex}.navigator-item:disabled{opacity:.5;pointer-events:none;cursor:not-allowed}.navigator-item:hover{background-color:var(--white-color);border:1px solid var(--color-black)}.navigator-item:hover .arrow-left,.navigator-item:hover .arrow-right{fill:var(--primary-color)}.navigator-item--prev{grid-area:prev}.navigator-item--next{grid-area:next}.arrow-left,.arrow-right{fill:var(--white-color);width:70%;height:70%}@media (width >= 48rem){.pokemon{min-width:46rem}.pokemon__about{flex-direction:row}.pokemon__text{max-width:35.2rem;min-height:6.25rem}.pokemon__card-about{align-self:self-start}.pokemon__extra{align-items:start}.pokemon__detail{padding:2rem 0}.pokemon__evolutions{width:clamp(20rem,90dvw,45rem);min-height:18rem;flex-direction:row;justify-content:center;gap:var(--space-md);padding:0}.evolution-arrow__icon{transform:rotate(0)}}@media (width >= 64rem){.grid-layout{grid-template-areas:"search-bar search-bar search-bar" "prev pokemon next";justify-content:space-between;padding:0 1rem 3rem}.pokemon{padding:0}}