*{margin:0;padding:0;font-family:Outfit,Raleway,Rubik,Zalando Sans,sans-serif}.landing{background-position:50%;background-repeat:no-repeat;background-size:cover;justify-content:center;align-items:center;width:100%;height:100vh;display:flex}.landing-content{flex-direction:column;justify-content:center;align-items:center;gap:20px;margin-top:-550px;display:flex}.landing-content p{color:#000;font-size:16px;position:absolute;top:20px;left:20px}.landing-content p:hover{color:#2e2e2e;transition:all .4s}.images-div{justify-content:center;align-items:center;gap:30px;display:flex}.landing-h1{display:flex}.react{color:#0c9fcb;text-shadow:1px 1px 3px #000;font-size:49px}.pokedex{color:red;text-shadow:1px 1px 3px #000;font-size:49px}.landing-img{width:100px;transition:all .3s}.landing-img:hover{transition:all .5s ease-in;transform:scale(1.1)}.enter-button{color:#fff;cursor:pointer;background:linear-gradient(90deg,#0c9fcb,red);border:none;border-radius:25px;padding:12px 20px;font-size:18px;font-weight:700;transition:all .3s;box-shadow:0 4px 10px #0000004d}.enter-button:hover{transform:translateY(-3px)scale(1.04);box-shadow:0 6px 15px #0006}@media (width<=480px){.landing{padding-bottom:80px}.landing-content{margin-top:-350px}.landing-content p{font-size:14px;top:10px;left:10px}.landing-h1 .react,.landing-h1 .pokedex{font-size:40px}.landing-img{width:80px}.images-div{flex-wrap:wrap;gap:15px}.enter-button{padding:10px 16px;font-size:16px}}.top-bar{background-color:#313131;justify-content:space-between;align-items:center;min-height:150px;padding:20px 30px;display:flex;box-shadow:1px 4px 5px gray}.home-landing-h1{padding-left:30px;display:flex}.home-landing-h1 h1{margin-top:-6px}.home-react{color:#0c9fcb;text-shadow:1px 1px 3px #000;font-size:38px}.home-pokedex{color:red;text-shadow:1px 1px 3px #000;font-size:38px}a{color:inherit;text-decoration:none}.favorites-h2{cursor:pointer;color:#ffff9b;will-change:transform;font-size:20px;font-weight:300;transition:all .3s}.favorites-h2:hover{cursor:pointer;color:#ffff65;transform:scale(1.05)}.filters{align-items:center;gap:15px;display:flex}.searcher{color:#fff;font-size:20px}#searcher{background-color:#f3f3f3;border:2px solid #0000;border-radius:10px;outline:none;width:250px;height:40px;margin-left:10px;padding-left:.8em;font-size:18px;transition:all .5s;overflow:hidden}#searcher:focus,#searcher:hover{background-color:#fff;border:2px solid #ec4a4a;box-shadow:0 0 0 7px #ff828233}.types{border-radius:10px;padding:5px;transition:all .5s}.types:focus,.types:hover{background-color:#fff;border:1px solid #ec4a4a;box-shadow:0 0 0 4px #ff828233}.loading{text-align:center;margin-top:200px;font-size:1.5rem}.cards{text-align:center;grid-template-columns:repeat(auto-fill,minmax(180px,200px));justify-content:center;gap:30px;padding:50px 30px;display:grid}.fav-star{cursor:pointer;will-change:transform;font-size:20px;transition:all .3s;position:absolute;top:5px;right:10px}.fav-star:hover{transform:scale(1.2)}.card{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);cursor:pointer;color:#282828;border:1px solid #fff;border-radius:17px;width:190px;height:230px;transition:all .5s;box-shadow:12px 17px 51px #00000038}.fire:hover{background-color:#ffa6004d}.water:hover{background-color:#0073ff4d}.grass:hover{background-color:#00c8644d}.electric:hover{background-color:#ffdc004d}.ice:hover{background-color:#78dcff4d}.fighting:hover{background-color:#c832324d}.poison:hover{background-color:#aa50c84d}.ground:hover{background-color:#c896644d}.rock:hover{background-color:#b48c644d}.flying:hover{background-color:#96c8ff4d}.psychic:hover{background-color:#ff64964d}.bug:hover{background-color:#96c8504d}.ghost:hover{background-color:#8250c84d}.dragon:hover{background-color:#5064c84d}.dark:hover{background-color:#5050644d}.steel:hover{background-color:#b4b4be4d}.fairy:hover{background-color:#ff96c84d}.normal:hover{background-color:#b4b4b44d}.card:hover{border:1px solid #fff;transform:scale(1.05)}.card:active{transform:scale(.95)rotate(1.7deg)}.card img{width:80%}.card h2{padding:0 10px;font-weight:400}.any-favorites{color:#aaa;grid-column:1/-1;justify-content:center;align-items:center;height:200px;font-size:22px;display:flex}.pagination{text-align:center;margin-top:40px}.page{padding:0 20px;font-size:20px}.pagination-button{will-change:transform;color:#fff;background-color:#2f2f2f;border-radius:10px;width:100px;padding:5px;font-size:18px;transition:all .3s;box-shadow:2px 3px 5px #a6a6a6}.pagination-button:hover{cursor:pointer;background-color:#616161;border-radius:11px;width:100px;padding:5px;transform:translateY(-3px);box-shadow:0 8px 15px #0003}.pagination-button:active{transform:translateY(0);box-shadow:0 3px 8px #0003}.pagination-button:disabled{cursor:not-allowed;box-shadow:none;background:#ccc}.close-modal{transition:all .3s;position:absolute;top:15px;left:330px}.close-modal:hover{cursor:pointer;color:#ec4a4a;transform:scale(1.3)}.modal-overlay{background:#00000080;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:fixed;top:0;left:0}.modal{color:#fff;background-color:#313131;border-radius:20px;width:300px;padding:30px;animation:.3s ease-out fadeIn;position:relative;box-shadow:0 10px 30px #0009,0 0 10px #ffffff1a}@keyframes fadeIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.modal h1{text-transform:capitalize;margin-bottom:15px;font-size:26px}.modal h2{border-bottom:1px solid #555;margin-bottom:10px;padding-bottom:5px}.modal div{margin-bottom:10px}.pokemon-types p{background:#555;border-radius:10px;margin-right:5px;padding:5px 10px;display:inline-block}.pokemon-abilities p{background:#6c7a89;border-radius:10px;margin-bottom:5px;margin-right:5px;padding:5px 10px;display:inline-block}@media (width<=480px){.home-react,.home-pokedex{font-size:35px}.filters{flex-direction:column;gap:8px;width:100%}#searcher{box-sizing:border-box;width:100%;max-width:100%}.types{width:20%;height:30px}.cards{grid-template-columns:repeat(2,1fr);gap:18px}.card{width:100%;height:auto;min-height:150px}.card img{width:70%;margin-bottom:-10px}.card h2{font-size:18px}.modal{width:75%;max-height:85vh;padding:20px 15px;overflow-y:auto}.close-modal{position:absolute;top:15px;left:295px}}@media (width<=768px){.cards{grid-template-columns:repeat(2,minmax(150px,200px));justify-content:center}.card{margin:0 auto}}@media (width<=1024px){.top-bar{flex-direction:column;gap:20px;padding:30px 10px}.home-landing-h1{padding-left:0}.filters{justify-content:center;gap:10px;width:100%}#searcher{margin-left:0}}@media (width<=1120px){.searcher{font-size:0}.searcher input{font-size:16px}#searcher{max-width:220px;height:35px;font-size:16px}}
