*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:10px}body{line-height:1.5;background-color:#fff;color:#000;margin:0;font-family:Poppins,sans-serif}ul,ol{list-style:none}a{text-decoration:none;color:inherit}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}button{background:none;border:none;cursor:pointer}h1,h2,h3,h4,h5,h6{font-weight:inherit}:root{--color-main: #dc0a2d;--color-grass: #74cb48;--color-fire: #f57d31;--color-water: #6493eb;--color-bug: #a7b723;--color-electric: #f9cf30;--color-ghost: #70559b;--color-normal: #aaa67f;--color-psychic: #fb5584;--color-steel: #b7b9d0;--color-ice: #9ad6df;--color-dragon: #7037ff;--color-dark: #75574c;--color-fairy: #e69eac;--gray-wireframe: #b8b8b8;--color-fighting: #c12239;--color-flying: #a891ec;--color-ground: #dec16b;--color-poison: #a43e9e;--color-rock: #b69e31;--gray-light: #f1f1f1;--gray-medium: #666666;--gray-dark: #1d1d1d;--gray-background: #f2f2f2}:root{--border-radius: 1.6rem;--border-radius-secondary: .8rem;--border-radius-tertiary: 1rem;--box-shadow: 0px 1px 3px 1px #00000040 inset}body{font-size:10px}#root{display:flex;flex-direction:column;padding:.4rem;min-height:100dvh;max-height:100dvh}body{background-color:var(--color-main)}.home__container{display:flex;justify-content:center;align-items:center;height:100%}.home__controls{display:flex;justify-content:center;gap:1rem;margin:1rem 0;padding:0 1rem}.home__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem;padding:1rem}.sort-button{padding:.5rem 1rem;border:2px solid var(--color-accent);border-radius:.5rem;background-color:transparent;color:var(--color-text);cursor:pointer;transition:all .2s ease-in-out}.sort-button:hover,.sort-button--active{background-color:var(--color-accent);color:var(--color-main)}main{box-shadow:var(--box-shadow);background-color:#fff;flex:1;border-radius:var(--border-radius-secondary);padding:2.4rem 1.2rem}.main--char{padding:2rem}h1,h2,h3,h4,h5{color:#fff;font-weight:700}h1{font-size:2.4rem}h2{font-size:2rem}h3{font-size:1.6rem}h4{font-size:1.4rem}h5{font-size:1.2rem}.logo{display:flex;gap:1rem;height:3.2rem;align-items:center}.header{display:flex;flex-direction:column;padding:1.2rem 1.2rem 2.4rem;gap:.8rem}button{padding:.8rem 1.6rem;background-color:#fff;color:var(--color-main);border-radius:var(--border-radius);box-shadow:var(--box-shadow);transition:all .3s ease;transform:translateY(0);width:3.2rem;display:flex;align-items:center;justify-content:center}.search-bar__button:hover{box-shadow:0 4px 8px 2px #00000020;transform:translateY(-1px)}.search-bar__input{border-radius:var(--border-radius);-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;outline:none;font-family:inherit;font-weight:inherit;color:inherit;box-sizing:border-box;cursor:auto;font-size:1.2rem;height:3.2rem;background-color:#fff;width:100%;padding:.8rem 1.6rem .8rem 3.6rem;background-image:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M12.9%2013.6167L8.88333%209.6C8.55%209.88889%208.16111%2010.1139%207.71667%2010.275C7.27222%2010.4361%206.8%2010.5167%206.3%2010.5167C5.1%2010.5167%204.08333%2010.1%203.25%209.26666C2.41667%208.43333%202%207.42777%202%206.25C2%205.07222%202.41667%204.06666%203.25%203.23333C4.08333%202.4%205.09444%201.98333%206.28333%201.98333C7.46111%201.98333%208.46389%202.4%209.29167%203.23333C10.1194%204.06666%2010.5333%205.07222%2010.5333%206.25C10.5333%206.72777%2010.4556%207.18889%2010.3%207.63333C10.1444%208.07777%209.91111%208.49444%209.6%208.88333L13.65%2012.9C13.75%2012.9889%2013.8%2013.1028%2013.8%2013.2417C13.8%2013.3806%2013.7444%2013.5056%2013.6333%2013.6167C13.5333%2013.7167%2013.4111%2013.7667%2013.2667%2013.7667C13.1222%2013.7667%2013%2013.7167%2012.9%2013.6167ZM6.28333%209.51666C7.18333%209.51666%207.95%209.19722%208.58333%208.55833C9.21667%207.91944%209.53333%207.15%209.53333%206.25C9.53333%205.35%209.21667%204.58055%208.58333%203.94166C7.95%203.30277%207.18333%202.98333%206.28333%202.98333C5.37222%202.98333%204.59722%203.30277%203.95833%203.94166C3.31944%204.58055%203%205.35%203%206.25C3%207.15%203.31944%207.91944%203.95833%208.55833C4.59722%209.19722%205.37222%209.51666%206.28333%209.51666Z'%20fill='%23DC0A2D'/%3e%3c/svg%3e");background-repeat:no-repeat;background-size:1.6rem;background-position:left 1.2rem center;line-height:12px;box-shadow:var(--box-shadow);transition:all .3s ease;transform:translateY(0)}input::placeholder{color:var(--gray-medium);opacity:1;font-weight:400;font-style:normal}input:active,input:focus{box-shadow:0 1px 3px 1px #0003;transform:translateY(-1px)}.search-bar{position:relative;display:flex;gap:1.6rem}.search-bar__wrapper{width:100%}.search-bar__wrapper input{border:2px solid transparent;transition:border .2s}.search-bar__wrapper--error input{border:2px solid var(--color-main);color:var(--color-main);animation:shake .3s ease-in-out}.search-bar__error{color:#fff;animation:shake .3s ease-in-out;padding-left:.9rem;font-size:.9rem}.search-bar__button{padding:.8rem;background-color:#fff;border-radius:var(--border-radius);min-width:3.2rem;min-height:3.2rem;max-height:3.2rem}@keyframes shake{0%{transform:translate(0)}20%{transform:translate(-6px)}40%{transform:translate(6px)}60%{transform:translate(-6px)}80%{transform:translate(6px)}to{transform:translate(0)}}.radio-input{display:flex;gap:.8rem;font-size:1rem;line-height:1.6rem}.radio-input input[type=radio]{appearance:none;-webkit-appearance:none;-moz-appearance:none;width:14px;height:14px;border:2px solid var(--color-main);border-radius:50%;outline:none;cursor:pointer;position:relative;transition:all .2s ease}.radio-input input[type=radio]:checked{background-color:#fff;border-color:var(--color-main)}.radio-input input[type=radio]:checked:after{content:"";position:absolute;top:2px;left:2px;width:6px;height:6px;border-radius:50%;background:#e3350d}.sort-modal{position:absolute;right:0;top:4rem;background:#fff;border-radius:1.2rem;box-shadow:0 4px 12px #00000026;z-index:10;background-color:var(--color-main);box-shadow:0 3px 12px 3px #0003;width:113px;max-height:132px;padding:.4rem}.sort-modal__content{background-color:#fff;border-radius:var(--border-radius-tertiary);display:flex;flex-direction:column;box-shadow:0 1px 3px 1px #00000040 inset;flex:1;padding:1.2rem 2rem;gap:1.6rem}.sort-modal__title{color:#fff;font-weight:700;font-size:1.2rem;line-height:1.6rem;padding:1.6rem 2rem}.favorites__button{position:absolute;box-shadow:none;transition:transform .2s cubic-bezier(.4,0,.2,1),box-shadow .2s cubic-bezier(.4,0,.2,1);z-index:10;left:.4rem;top:.4rem;border-radius:999999px;background-color:transparent}.favorites__button:hover,.favorites__button:focus-visible{transform:scale(1.5) rotate(-6deg);z-index:2;box-shadow:none}.main__container{overflow-y:scroll;border-radius:var(--border-radius-secondary)}.main__subcontainer{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem}.card{position:relative;display:flex;flex-direction:column;align-items:center;height:min-content;overflow:hidden;box-shadow:0 1px 3px 1px #0003;border-radius:var(--border-radius-secondary)}.card__content{z-index:1;width:100%;display:flex;flex-direction:column;align-items:center}.card__number{text-align:right;padding:.4rem .8rem;padding-bottom:0;line-height:1.2rem;font-size:.8rem;width:100%;color:var(--gray-medium)}.card__image{transform:translateY(.84rem)}.card__title{font-size:1rem;text-transform:capitalize;margin:.4rem 0;text-align:center;line-height:1.6rem;font-weight:400;font-style:normal}.card__background{position:absolute;bottom:0;width:100%;max-height:42%;height:100%;background-color:var(--gray-background)}body:after{content:"";position:absolute;right:.4rem;top:.4rem;width:33dvh;height:33dvh;background:url("data:image/svg+xml,%3csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M14.8572%2012C14.8572%2013.578%2013.578%2014.8571%2012.0001%2014.8571C10.4221%2014.8571%209.14292%2013.578%209.14292%2012C9.14292%2010.422%2010.4221%209.14286%2012.0001%209.14286C13.578%209.14286%2014.8572%2010.422%2014.8572%2012Z'%20fill='white'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M12.0001%2024C18.0454%2024%2023.0467%2019.5296%2023.8785%2013.7143H16.8503C16.1443%2015.7118%2014.2393%2017.1429%2012.0001%2017.1429C9.76083%2017.1429%207.85584%2015.7118%207.14984%2013.7143H0.121582C0.953404%2019.5296%205.95468%2024%2012.0001%2024ZM7.14984%2010.2857H0.121582C0.953404%204.47035%205.95468%200%2012.0001%200C18.0454%200%2023.0467%204.47035%2023.8785%2010.2857H16.8503C16.1443%208.28824%2014.2393%206.85714%2012.0001%206.85714C9.76083%206.85714%207.85584%208.28824%207.14984%2010.2857ZM14.8572%2012C14.8572%2013.578%2013.578%2014.8571%2012.0001%2014.8571C10.4221%2014.8571%209.14292%2013.578%209.14292%2012C9.14292%2010.422%2010.4221%209.14286%2012.0001%209.14286C13.578%209.14286%2014.8572%2010.422%2014.8572%2012Z'%20fill='white'/%3e%3c/svg%3e") no-repeat center/contain;background-repeat:no-repeat;background-size:contain;opacity:.1;pointer-events:none}.char__header{display:flex;align-items:start;gap:1rem;padding:2rem 2rem 2.4rem;color:#fff;box-shadow:0 2px 4px #0000001a;width:100%;min-height:33dvh;text-transform:capitalize}.char__container{display:flex;justify-content:space-between;align-items:center;gap:.8rem;flex:1}.char__container--fav{justify-content:end;gap:1.6rem}.char__nav{display:flex;align-items:center;gap:1rem}.char__number{align-self:center}.nav-char{position:relative;display:flex;justify-content:space-between;align-items:center;padding:0 1rem;margin-top:-129px;z-index:10}.nav-char__image{width:54%;height:54%;max-width:300px;max-height:300px;object-fit:contain}.nav-char__labels{display:flex;justify-content:center;gap:1.6rem}.label{color:#fff;border-radius:var(--border-radius-tertiary);background-color:red;padding:.2rem .8rem;font-weight:700;text-transform:capitalize}.about-section{display:flex;flex-direction:column;gap:1.6rem}.about-section__title{margin-top:1.6rem;font-weight:700;text-align:center;color:var(--gray-wireframe);line-height:1.6rem}.about-section__info{display:flex;align-items:stretch;margin-bottom:16px;min-height:48px}.about-section__description{font-size:14px;line-height:1.5;text-align:justify;color:var(--gray-dark)}.abilities{display:flex;flex-direction:column;gap:.4rem;justify-content:center;align-items:center;width:33%}.abilities__moves{display:flex;flex-direction:column;justify-content:center;align-items:center;text-transform:capitalize}.about-item{display:flex;flex-direction:column;align-items:center;gap:.4rem;width:33%}.about-item__container{display:flex;padding:.8rem 0;gap:.8rem}.about-item__value{line-height:1.6rem;color:var(--gray-dark)}.about-item__label{color:var(--gray-medium)}.divider{width:1px;background-color:var(--gray-light)}.stats-section{display:flex;flex-direction:column;gap:1.6rem}.stats-section--title{margin-top:1.6rem;font-weight:700;text-align:center;color:var(--gray-wireframe);line-height:1.6rem}.progress-bar{height:.4rem;background-color:var(--gray-light);border-radius:8px;overflow:hidden;width:100%}.progress-bar__fill{height:100%;background-color:var(--gray-wireframe);transition:width .3s ease}.stats{display:flex;gap:.8rem}.stats__label{font-weight:700;line-height:1.6rem;text-align:right;color:var(--gray-wireframe);width:3.9rem}.stats__value{width:2.1rem;text-align:right}.stats__progress{display:flex;align-items:center;height:1.6rem;width:100%}.favorites__container{position:relative;display:inline-block;margin:8}