body{margin:0;padding:0;font-family:sans-serif;background-color:#0c181c}header{text-align:center}header h1{margin:.8rem 0;font-size:4rem;color:#f5f5f5}.overlay{position:fixed;top:0;bottom:0;left:0;right:0;background-color:#000c;z-index:1}.loader{z-index:1;width:74px;height:74px;position:fixed;left:0;right:0;top:0;bottom:0;margin:auto}.cards-container{padding:2rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1rem;text-align:center;justify-items:center}.cards-container .pokemon-card{background-color:#317a71;border-radius:.4rem;width:310px;height:330px;display:flex;align-items:center;justify-content:center;transition:all .3s;cursor:pointer}.cards-container .pokemon-card figure{margin:0}.cards-container .pokemon-card figure img{width:200px;height:200px;background-color:#0c181c;border-radius:.4rem;padding:1rem 2rem}.cards-container .pokemon-card figure figcaption{margin:.8rem 0;font-size:1.6rem;font-weight:bolder;text-transform:capitalize;letter-spacing:.1rem;color:#0c181c;-webkit-user-select:none;user-select:none}.cards-container .pokemon-card:hover{opacity:.8}.cards-container .pokemon-card:active{opacity:.4}@media (max-width: 700px){.cards-container{padding:2rem .4rem}}.modal-container{position:fixed;display:table;width:100%;height:100%;min-height:90vh;max-width:50vw;left:50%;top:50%;margin-top:-45vh;margin-left:-25vw;border-radius:.4rem;z-index:1}.modal-container .modal-content{box-sizing:border-box;padding:1rem 1rem 2rem;background:#317a71;border-radius:3px;font-weight:300;min-height:inherit;max-width:inherit;border-radius:inherit;opacity:1;display:flex;flex-direction:column;align-items:center;justify-content:center}.modal-container .modal-content .close-btn{position:absolute;padding:.3rem .5rem;top:4.5%;right:4.5%;background:none;border:none;display:flex;align-items:center;justify-content:center;border-radius:.2rem}.modal-container .modal-content .close-btn:hover{cursor:pointer;background-color:#2222228f}.modal-container .modal-content .close-img{width:22px}.modal-container .modal-content .pokemon-name{margin:.7rem 0 1.3rem;font-size:1.6rem;font-weight:700;text-transform:capitalize;letter-spacing:.1rem;color:#0c181c;-webkit-user-select:none;user-select:none}.modal-container .modal-content .pokemon-type{font-size:1.1rem;margin:0;padding:.6rem 1rem;background-color:#0c181c;border-radius:.4rem;letter-spacing:.1rem;color:#f5f5f5;font-weight:700;text-transform:uppercase}.modal-container .modal-content .stat-container{margin:.1rem;text-align:start;width:90%}.modal-container .modal-content .stat-container P{margin:.8rem 0;color:#0c181c;letter-spacing:.1rem;font-weight:800;text-transform:capitalize}.modal-container .modal-content .stat-container span{margin:0 .4rem;font-weight:700;padding:.1rem .3rem;color:#f5f5f5;background-color:#0c181c;letter-spacing:.1rem}.modal-container .modal-content .stat-container .stat-bar{width:100%;height:10px;background-color:#dcdcdc;border-radius:1rem}.modal-container .modal-content .stat-container .stat-bar div{height:100%;border-radius:inherit}.modal-container .modal-content .stat-container .stat-bar .hp-bar,.modal-container .modal-content .stat-container .stat-bar .attack-bar,.modal-container .modal-content .stat-container .stat-bar .defense-bar,.modal-container .modal-content .stat-container .stat-bar .speed-bar,.modal-container .modal-content .stat-container .stat-bar .specialAttack-bar,.modal-container .modal-content .stat-container .stat-bar .specialDefense-bar{max-width:100%}.modal-container .modal-content .stat-container .stat-bar .hp-bar{background-color:#47af22}.modal-container .modal-content .stat-container .stat-bar .attack-bar{background-color:#f50400}.modal-container .modal-content .stat-container .stat-bar .defense-bar{background-color:#00b2ff}.modal-container .modal-content .stat-container .stat-bar .speed-bar{background-color:#d3d316}.modal-container .modal-content .stat-container .stat-bar .specialAttack-bar{background-color:#f59300}.modal-container .modal-content .stat-container .stat-bar .specialDefense-bar{background-color:#b700ff}@media (max-width: 820px){.modal-container{max-width:75vw;margin-left:-37.5vw}}@media (max-width: 500px){.modal-container{max-width:90vw;margin-left:-45vw}}.modal-container.open{transform:scale(1)}.modal-container.open .modal-content{opacity:0;animation:scaleUp .7s cubic-bezier(.165,.84,.44,1) forwards}.modal-container.open.close{animation:quickScaleDown 0s .7s linear forwards}.modal-container.open.close .modal-content{animation:scaleDown .7s cubic-bezier(.165,.84,.44,1) forwards}@keyframes scaleUp{0%{transform:scale(.8) translateY(1000px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}@keyframes quickScaleDown{0%{transform:scale(1)}99.9%{transform:scale(1)}to{transform:scale(0)}}@keyframes scaleDown{0%{transform:scale(1) translateY(0);opacity:1}to{transform:scale(.8) translateY(1000px);opacity:0}}.buttons-container{margin:2.5rem 0;display:flex;justify-content:center;gap:.3rem}.buttons-container .page-number-container{width:46px;height:46px;border-radius:50%;background-color:#317a71;display:flex;align-items:center;justify-content:center;font-weight:bolder;font-size:1.4rem}.buttons-container button{margin:0 .2rem;border:none;padding:.8rem 1.5rem;background-color:#f5f5f5;color:#0c181c;font-size:1rem;font-weight:bolder;letter-spacing:.1rem;border-radius:.4rem;transition:all .3s}.buttons-container button:hover{cursor:pointer;opacity:.6}.buttons-container button:active{background-color:#4e5658}.hidden{display:none}footer{font-weight:bolder;margin:0 2rem;color:#f5f5f5}footer a{color:#317a71}footer a:hover{color:#317a71}