@import"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap";#home{min-height:calc(100vh - 220px);padding-top:100px;display:flex;flex-direction:column;align-items:center;gap:20px}#home>header{display:flex;flex-direction:column;justify-content:center;align-items:center}#home>header>h1{color:var(--red-pokeball)}@media screen and (min-Width: 744px){#home>form>input{width:40vw}#home{min-height:calc(100vh - 260px)}}#pokemonsPage{display:flex;flex-direction:column;padding:0 20px}#pokemonsPage>header{text-align:center;margin-bottom:10px}#pokemonsPage>header>h1{font-size:24px}#pokemonsPage>header>h2{font-size:12px}#pokemonFilters{width:100%;max-width:1440px;margin:0 auto 8px;display:flex;flex-direction:column;gap:4px}#pokemonFilters>select{width:100%;border-radius:8px;padding:10px;border:1px #111 solid}.cardsContainer{min-height:50vh;display:flex;flex-direction:column;align-items:center;place-self:center;gap:16px;width:fit-content}#pokemonPagination{list-style:none;display:flex;padding:16px 0;justify-content:center;gap:10px}#pokemonPagination>li>button{width:30px;padding:2px 0;border-radius:4px;color:#fff;border:none}@media screen and (min-Width:744px){#pokemonsPage{display:flex;flex-direction:column;padding:0 31px}#pokemonsPage>header{display:flex;gap:5px}#pokemonsPage>header>h1{font-size:21px}#pokemonsPage>header>h2{font-size:21px}#pokemonFilters{flex-direction:row;gap:8px;margin-bottom:10px}#pokemonFilters>form{flex-grow:1}#pokemonFilters>select{width:280px}.cardsContainer{display:grid;grid-template-columns:1fr 1fr;column-gap:24px;row-gap:24px}#pokemonPagination{gap:25px}#pokemonPagination>li>button{width:64px;padding:8px 20px;border-radius:4px;font-size:16px}}@media screen and (min-Width:1440px){#pokemonsPage{display:flex;flex-direction:column;padding:0 60px}#pokemonsPage>header{justify-content:center;gap:5px;margin-bottom:16px}#pokemonsPage>header>h1{font-size:32px}#pokemonsPage>header>h2{font-size:32px}#pokemonFilters{gap:32px;padding:0 60px;margin-bottom:16px}#pokemonFilters>select{width:420px}.cardsContainer{display:grid;grid-template-columns:1fr 1fr 1fr;column-gap:32px;row-gap:32px;place-items:center}#pokemonPagination{gap:30px}#pokemonPagination>li>button{width:80px;padding:12px 20px;border-radius:4px;font-size:20px}}.pokemonCard{background-color:#add8e6;color:#fff;width:280px;height:137px;border-radius:13px;gap:10px;display:flex;flex-direction:row;justify-content:center;align-items:center;user-select:none}.pokemonCard:hover{animation:cardHover .5s forwards}@keyframes cardHover{0%{transform:scaley(1) scale(1)}30%{transform:scaley(.97) scale(.97)}70%{transform:scaley(1.02) scale(1.02)}to{transform:scaley(1) scale(1.02)}}.pokemonCard:hover{cursor:pointer}.pokemonCard>img{max-width:100px;max-height:100px}.pokemonCard>div{display:flex;flex-direction:column;gap:10px;width:125px}.pokemonCard>div>h1{font-weight:700;font-size:20px}.pokemonCard>div>ul{display:flex;flex-direction:column;gap:5px}.pokemonCard>div>ul>li{font-weight:400;font-size:12px;width:fit-content;padding:3px 10px;border-radius:6px}@media screen and (min-Width:744px){.pokemonCard{width:333px;height:163px;border-radius:15.5px;gap:12px}.pokemonCard>div>h1{font-size:24px}.pokemonCard>div>ul>li{font-size:14.3px;width:fit-content;padding:3.5px 12px;border-radius:7.1px}.pokemonCard>img{max-width:118.9px;max-height:114.5px}}@media screen and (min-Width:1440px){.pokemonCard{width:415.1px;height:203.1px;border-radius:19.3px;gap:14.9px}.pokemonCard>div>h1{font-size:29.65px}.pokemonCard>div>ul>li{font-size:17.8px;width:fit-content;padding:4.45px 14.82px;border-radius:8.9px}.pokemonCard>img{max-width:148.2px;max-height:143px}}#pokemonDetails{min-height:70.8vh;margin:100px auto 50px;padding:8px 8px 64px;border-radius:10px;width:80%;background-color:#fff;box-shadow:0 0 10px 1px #00000080;display:flex;flex-direction:column;gap:24px}h1{font-size:40px}h3{font-size:24px}.outlinedCard{border:1px solid rgb(148,148,148);box-shadow:0 0 3px 1px #96969666;border-radius:2px;padding:5px 10px;width:fit-content}.outlinedCard>p{font-weight:500}#imageDisplayer{width:100%;margin-bottom:10px}#imageDisplayer{height:175px;width:100%;display:flex;place-items:center;border-top-right-radius:10px;border-top-left-radius:10px}#imageDisplayer>img{flex-grow:1;max-width:240px;max-height:240px;margin:0 auto;position:relative;bottom:65px}#mainData{display:flex;flex-direction:column;gap:4px;justify-content:center;align-items:center}#types{width:100%;display:flex;justify-content:space-evenly}#types>li{border-radius:10px;width:130px;padding:4px 10px;font-size:24px;text-align:center;color:#fff}#qualities,#abilities{text-align:center;display:flex;flex-direction:column;align-items:center}#qualities>ul,#abilities>ul,#mainData>ul{width:100%;padding-top:10px;gap:10px;display:flex;flex-direction:column;align-items:center;font-size:20px}#stats{padding:5px 10px 0}#stats>ul{display:flex;flex-direction:column;gap:16px}#stats>ul>li>header{display:flex;justify-content:space-between}@media screen and (min-Width:520px){h1{font-size:48px}#imageDisplayer>img{max-width:280px;max-height:280px}h3{font-size:32px}#qualities>ul,#abilities>ul,#mainData>ul{flex-direction:row;justify-content:center;gap:10%}#pokemonDetails>section{margin:0 10%}}@media screen and (min-Width:1440px){h1{font-size:56px}#pokemonDetails{display:grid;grid-template-columns:1fr 1fr}#pokemonDetails>header{grid-column:span 2}#mainData,#stats{grid-column:span 2}}nav{width:100%;margin-bottom:25px}.red{background-color:var(--red-pokeball);padding:10px 20px;display:grid;place-items:center}.tooltip{width:100%;max-width:1440px}.red>.tooltip>img{width:180px}.black{padding:0 20px;display:grid;place-items:center;background-color:#111}.black>.tooltip{height:30px;color:#fff;display:flex;flex-direction:row;align-items:center;justify-content:space-between}.black>.tooltip>ul{display:flex;gap:1rem;font-weight:300;font-size:8px}.black>.tooltip>ul>li{display:flex;gap:1rem}.black>.tooltip>ul li:last-child>a:hover{text-decoration:none;cursor:default}.black>.tooltip>button{width:80px;height:80px;border-radius:100%;border:solid 15px #111111;background-color:#fff}.black>.tooltip>button:hover{cursor:pointer}@media screen and (min-Width:744px){.tooltip{padding:16px 60px}.red>.tooltip>img{width:430px}.black>.tooltip{height:40px}.black>.tooltip>ul{font-size:16px}.black>.tooltip>button{width:100px;height:100px;border-radius:100%}}footer{padding:20px 28px;background-color:#dd1a1a;border-top:#111 solid 30px;color:#fff;width:100%;margin-top:25px;display:grid;place-items:center}.tooltip{display:flex;flex-direction:row;justify-content:space-between;align-items:center}footer>.tooltip>ul{display:flex}footer>.tooltip ul:nth-child(1)>li>a{font-weight:600;font-size:16px}footer>.tooltip ul:nth-child(2){flex-direction:column;text-align:right;font-family:Inter,sans-serif;font-size:4px}@media screen and (min-Width:744px){footer{padding:31px 28px;border-top:#111 solid 40px}footer>.tooltip>ul>li>img{width:24px}footer>.tooltip>ul>li{font-size:8px}}@media screen and (min-Width:744px){footer{padding:20px 60px;border-top:#111 solid 50px}footer>.tooltip>ul>li>img{width:32px}footer>.tooltip>ul>li{font-size:12px}}:root{--mobile-vw: 320;--tabled-vw: 744;--desktop-vw: 1440;--red-pokeball: #DD1A1A}*{padding:0;margin:0;box-sizing:border-box}body{background-color:#f0f0f0;max-width:100%;margin:0 auto;font-family:Inter,sans-serif}ul{list-style:none}a{user-select:none;color:inherit;text-decoration:none}a:hover{text-decoration:underline;cursor:pointer}h2{font-size:20px}h5{font-weight:500}button{box-shadow:0 1px 3px #00000050;background-color:#d93f3f}button:hover{background-color:#d92727;box-shadow:0 1px 3px #000000b3;cursor:pointer}input{box-shadow:0 1px 2px #0006;color:#000}input::placeholder{font-weight:600;color:#4a4a4a}select{font-weight:600;color:#4a4a4a;box-shadow:0 1px 2px #0006}select:hover{cursor:pointer}option{font-weight:600;color:#4a4a4a}.cardTypeShadow{box-shadow:0 0 2px 1px #00000080,inset -1px -1px 4px #00000040}.cardBoxShadow{box-shadow:-1px -1px 3px -1px #0000004d,inset -1px -1px 2px 1px #0000004d}.simpleForm{display:flex}.simpleForm>input{flex-grow:1;padding:10px;border-radius:8px 0 0 8px;border:1px #111 solid;border-right:none}.simpleForm>button{padding:10px 18px;border-radius:0 8px 8px 0;color:#fff;background-color:#d93f3f;border:1px #111 solid;border-left:none}@media screen and (min-Width:744px){input{font-size:16px}h1{font-size:32px}h2{font-size:24px}select{font-size:16px}.simpleForm>input{padding:13px;border-radius:12px 0 0 12px}.simpleForm>button{padding:10px 20px;border-radius:0 12px 12px 0}}@media screen and (min-Width:1440px){input,button,select{font-size:20px}.simpleForm>input{padding:16px;border-radius:16px 0 0 16px}.simpleForm>button{padding:10px 40px;border-radius:0 12px 12px 0}}
