@import"https://fonts.googleapis.com/css2?family=Montserrat:wght@300;500;700&display=swap";:root{--color-warning: #ed6c02;--color-fire: #ff7402;--color-grass: #9bcc50;--color-steel: #9eb7b8;--color-water: #4592c4;--color-psychic: #f366b9;--color-ground: #ab9842;--color-ice: #51c4e7;--color-flying: #3dc7ef;--color-ghost: #4d5b64;--color-normal: #a4acaf;--color-poison: #7e0058;--color-rock: #a38c21;--color-fighting: #d56723;--color-dark: #707070;--color-bug: #729f3f;--color-dragon: #53a4cf;--color-electric: #bba909;--color-fairy: #fdb9e9;--color-shadow: #7b62a3;--color-unknow: #757575;--color-primary: #006d77;--color-primary-hover: #83c5be}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Montserrat;background-image:url(/assets/pokeballs-B1yuHOK3.svg);background-repeat:repeat;background-size:contain}.container{max-width:1200px;margin:0 auto}header{display:flex;align-items:center;justify-content:space-between;padding:40px 0}.logo img{width:150px}@media (max-width: 768px){.logo img{width:85px}*{margin:0;padding:1px;box-sizing:border-box}}header form{display:flex;align-items:center;gap:15px}.p-search{margin-bottom:30px;font-size:22px}.p-search span{font-weight:700}.container-loader{display:flex;justify-content:center;margin:20px 0}.error-message{color:red;background-color:#fff3f3;border:2px solid #ff0000;padding:10px;font-family:"Press Start 2P",cursive;margin-top:10px;border-radius:5px;box-shadow:0 0 5px 2px #0000001a}.form-group{display:flex;align-items:center;gap:10px;border:1px solid #555;padding:15px 20px;border-radius:25px}.form-group input{font-family:inherit;width:300px;border:none;outline:none;font-size:15px}.icon-search{width:20px;height:20px;stroke:#555}.btn-search{background-color:#fc0;color:#000;padding:10px 20px;border-radius:12px;font-weight:700;border:2px solid #000;font-family:"Press Start 2P",cursive;box-shadow:3px 3px 5px #0003;transition:transform .1s ease}.btn-search:hover{transform:scale(1.1)}input[type=search]{border:2px solid #888;border-radius:20px;padding:10px;width:300px;font-size:10px;font-family:"Press Start 2P",cursive}input[type=search]::-moz-placeholder{color:#555;font-style:italic}input[type=search]::placeholder{color:#555;font-style:italic}.icon-search{width:20px;height:20px;margin-right:10px;fill:#000}@media (max-width: 768px){.form-group{display:flex;align-items:center;gap:3px;border:1px solid #555;padding:7px 10px;border-radius:10px}.form-group input{font-family:inherit;width:130px;border:none;outline:none;font-size:15px}.icon-search{width:15px;height:15px;stroke:#555}.btn-search{border:none;outline:none;border-radius:13px;padding:8px 10px;margin-right:4px;font-family:inherit;color:#fff;background-color:var(--color-warning);cursor:pointer;font-weight:500;letter-spacing:1px}}.card-list-pokemon{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;padding:20px 10px}.card-pokemon{cursor:pointer;text-decoration:none;background-color:#fff;box-shadow:0 4px 8px #0000001a;border-radius:16px;overflow:visible;position:relative;transition:transform .2s,box-shadow .2s}.card-pokemon:hover{transform:translateY(-8px);box-shadow:0 12px 20px #00000026}.card-img{display:flex;align-items:center;justify-content:center;padding:20px 10px;position:relative;z-index:1}.card-img img{max-width:900%;max-height:90%}.card-info{padding:15px;background-color:#fff;border-radius:20px 20px 16px 16px;margin-top:-20px;position:relative;z-index:2}.card-info h3{color:#333;font-weight:700;text-align:center;margin-bottom:8px}.pokemon-id{position:absolute;top:10px;right:10px;background-color:#ffffffb3;border-radius:12px;padding:2px 8px;font-size:.75rem;font-weight:700;color:#666;z-index:2}.card-types{display:flex;justify-content:center;gap:8px}.card-types span{font-size:.75rem;padding:4px 12px;border-radius:12px;color:#fff;font-weight:500;text-transform:capitalize;box-shadow:0 2px 4px #0000001a}@media (max-width: 1200px){.card-list-pokemon{grid-template-columns:repeat(3,1fr)}}@media (max-width: 900px){.card-list-pokemon{grid-template-columns:repeat(2,1fr)}}@media (max-width: 768px){.card-list-pokemon{grid-template-columns:repeat(2,1fr);gap:15px;margin:0 5px}.card-img{height:120px;padding:10px 5px}.card-img img{width:100%;height:100%}.card-info{padding:10px}.card-info h3{font-size:.9rem}.pokemon-id{font-size:.6rem;padding:1px 6px}.card-types span{font-size:.65rem;padding:3px 8px}}@media (max-width: 480px){.card-list-pokemon{grid-template-columns:1fr;max-width:300px;margin:0 auto}}.container-filter{display:flex}.icon-filter{display:flex;align-items:center;gap:15px;margin-bottom:20px;cursor:pointer}.icon-filter .icon{width:30px;height:30px;stroke:#555}.container-filters{display:flex;justify-content:center;position:fixed;top:0;left:-300px;width:250px;color:#fff;background-color:var(--color-warning);height:100%;padding-top:80px;transition:all .3s linear}.container-filters.active{left:0}.filter-by-type{display:flex;flex-direction:column;gap:10px}.filter-by-type span{font-weight:700;font-size:22px}.group-type{display:flex;gap:10px;margin-left:15px}.group-type label{cursor:pointer}.close-button{position:absolute;top:40px;right:25px;background:none;border:none;font-size:40px;cursor:pointer}@media (max-width: 768px){.container-filter{display:flex}.icon-filter{display:flex;align-items:center;gap:8px;margin-bottom:10px;cursor:pointer}.icon-filter .icon{width:20px;height:20px;stroke:#555}.container-filters{display:flex;justify-content:center;position:fixed;top:0;width:200px;color:#fff;background-color:var(--color-warning);height:100%;padding-top:60px;transition:all .3s linear}.container-filters.active{left:0}.filter-by-type{display:flex;flex-direction:column;gap:7px}.filter-by-type span{font-weight:700;font-size:25px}.group-type{display:flex;gap:7px;font-size:17px;margin-left:10px}.group-type label{cursor:pointer}.close-button{position:absolute;top:40px;right:25px;background:none;border:none;font-size:20px;cursor:pointer}}.main-pokemon{display:flex;flex-direction:column}.header-main-pokemon{display:flex;align-items:center;position:relative;top:-55px;padding:10px}.number-pokemon{position:absolute;top:50px;left:0;padding:10px;font-size:60px;font-weight:700;color:#fff}.container-img-pokemon{order:2;padding:0 0 80px 10px;height:400px}.container-img-pokemon img{height:100%;width:100%}.container-info-pokemon{display:flex;flex-direction:column;order:1;flex:1}.container-info-pokemon h1{text-align:left;font-size:60px}.info-pokemon{display:flex;justify-content:space-between;padding:0 20px;margin-top:10px}.group-info{display:flex;flex-direction:column;gap:10px}.group-info p{font-weight:700;font-size:20px}.container-stats{display:flex;justify-content:center;position:relative;top:-125px;width:90%;left:5%;padding:1px;background-color:#f8f8f8;border-radius:20px;box-shadow:0 4px 8px #0000001a}.stat-group{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:15px}.stat-name{flex:1;font-weight:600;font-size:18px;color:var(--color-primary-dark);text-align:right}.stats-title{text-align:center;margin-bottom:15px}.progress-bar{flex:3;width:12rem;height:20px;background-color:#e0e0e0;border-radius:10px;overflow:hidden;box-shadow:inset 0 1px 3px #0000001a;position:relative}.progress-fill{height:100%;background-repeat:no-repeat;background-position:right;background-size:25px 20px;border-radius:10px 0 0 10px;transition:width .3s ease-in-out;position:absolute;left:0;top:0}.counter-stat{flex:.5;font-weight:600;font-size:16px;color:#333;text-align:right}.box{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:650px;height:650px;border:2px solid #000;box-shadow:24px;background-image:url(/assets/fondo-C4O_QV_H.png);background-repeat:no-repeat;background-position:center}@media (max-width: 768px){.main-pokemon{display:flex;flex-direction:column}.box{position:absolute;padding:0 10px;top:40%;left:28%;transform:translate(-25%,-25%);width:325px;height:350px;border:1px solid #000;box-shadow:24px;background-image:url(/assets/fondo-C4O_QV_H.png);background-size:100%;background-repeat:no-repeat;background-position:center}.header-main-pokemon{display:flex;align-items:center;position:relative;top:-10px;padding:0}.number-pokemon{position:absolute;top:8px;left:0;padding:0;font-size:27px;font-weight:700;color:#fff}.container-img-pokemon{order:2;padding:0 10px 25px;height:160px}.container-img-pokemon img{height:100%;width:100%}.container-info-pokemon{display:flex;flex-direction:column;order:1;flex:1}.container-info-pokemon h1{text-align:left;font-size:30px;top:10px}.info-pokemon{display:flex;justify-content:space-between;padding:0 10px;margin-top:1px}.group-info{display:flex;flex-direction:column;font-size:10px;gap:1px}.group-info p{font-weight:700;font-size:10px}.container-stats{display:flex;justify-content:center;position:relative;top:-35px;left:10px;width:94%;padding:0;background-color:#f8f8f8;border-radius:20px;box-shadow:0 4px 8px #0000001a}.stat-group{display:flex;justify-content:space-between;align-items:center;gap:5px;margin-bottom:7px}.stat-name{flex:1;font-weight:600;font-size:8px;color:var(--color-primary-dark);text-align:right}.stats-title{text-align:center;margin-bottom:7px}.progress-bar{flex:3;width:5rem;height:10px;background-color:#e0e0e0;border-radius:10px;overflow:hidden;box-shadow:inset 0 1px 3px #0000001a;position:relative}.progress-fill{height:100%;background-repeat:no-repeat;background-position:right;background-size:12px 10px;border-radius:10px 0 0 10px;transition:width .3s ease-in-out;position:absolute;left:0;top:0}.counter-stat{flex:.5;font-weight:600;font-size:8px;color:#333;text-align:right}}.water{background-color:var(--color-water)}.grass{background-color:var(--color-grass)}.poison{background-color:var(--color-poison)}.fire{background-color:var(--color-fire)}.bug{background-color:var(--color-bug)}.dragon{background:var(--color-flying)}.flying{background-color:var(--color-flying)}.ground{background-color:var(--color-ground)}.steel{background-color:var(--color-steel)}.psychic{background-color:var(--color-psychic)}.ice{background-color:var(--color-ice)}.ghost{background-color:var(--color-ghost)}.normal{background-color:var(--color-normal)}.rock{background-color:var(--color-rock)}.electric{background-color:var(--color-electric)}.fighting{background-color:var(--color-fighting)}.fairy{background-color:var(--color-fairy)}.dark{background-color:var(--color-dark)}