@import"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap";:root{--color-dark-blue: hsl(219, 81%, 21%);--color-light-blue: hsl(203, 100%, 37%);--color-dark-yellow: hsl(46 79% 54%%);--color-light-yellow: hsl(48, 100%, 50%);--color-red: hsl(11, 89%, 47%);--color-green: hsl(129 38% 49%);--color-white: hsl(0, 0%, 100%);--color-black: hsl(221deg 50% 15%);--bg-color: hsl(240, 20%, 95%);--normal: rgb(168, 168, 120);--poison: rgb(160, 64, 160);--bug: rgb(168, 184, 32);--fire: rgb(240, 128, 48);--electric: rgb(248, 208, 48);--dragon: rgb(112, 56, 248);--fighting: rgb(190, 48, 40);--ground: rgb(224, 192, 104);--ghost: rgb(112, 88, 152);--water: rgb(104, 144, 240);--psychic: rgb(248, 88, 136);--flying: rgb(168, 144, 240);--steel: rgb(184, 184, 208);--grass: rgb(120, 200, 80);--ice: rgb(152, 216, 216);--fairy: rgb(222, 165, 222);--rock: rgb(184, 160, 56);--gradient-angle: .25turn}*{margin:0;padding:0;outline:0;box-sizing:border-box}a{text-decoration:none}body{font:400 14px Roboto,sans-serif;background:#f0f0f5;-webkit-font-smoothing:antialiased}div.app{position:relative;height:100svh;display:flex;flex-direction:column}.form-enter input,.form-enter button{font:400 1.1rem Roboto,sans-serif}.form-enter input{width:100%;height:3.8rem;color:#333;border:1px solid hsl(240,17%,88%);border-radius:.45rem;padding:0 1.5rem}.back-link{display:flex;align-items:center;color:#42424d;font-size:18px;text-decoration:none;font-weight:500;transition:opacity .2s}.errmsg{color:var(--color-red);font-weight:700}.back-link:hover{opacity:.8}li{list-style-type:none;margin:0;padding:0}.btn{width:100%;height:60px;background:var(--color-light-yellow);border:0;border-radius:8px;color:var(--color-black);font-weight:700;display:inline-block;text-align:center;text-decoration:none;font-size:18px;line-height:60px;transition:all .2s}.btn:hover{filter:brightness(90%);cursor:pointer}.container{margin:3rem 10vw;display:grid;grid-template-columns:1fr 1fr;gap:2rem}.login-container{width:100%;min-height:100vh;display:grid;grid-template-columns:1fr 1fr;place-items:center;gap:1rem}.form-container form{display:flex;justify-content:space-around;flex-direction:column;align-items:center;gap:3ch}.form-container{width:100%;max-width:350px}.form-container img{width:350px;max-width:350px;height:fit-content}.form-hero-image{width:100%}.form-hero-image img{width:100%;min-width:300px;max-width:750px;object-fit:contain}@media(max-width:730px){.login-container{grid-template-columns:1fr}.form-hero-image{display:none}}.register-container{width:100%;height:100vh;display:grid;grid-template-columns:minmax(300px,1fr);place-items:center}.box{background:#f0f0f5;box-shadow:0 0 100px #0000001a;border-radius:8px;display:grid;grid-template-columns:minmax(300px,450px);padding:2rem;gap:2ch}.box img{width:70%;min-width:300px}.box p{font-size:1.1rem;color:#747481;line-height:32px}.box form{display:flex;justify-content:space-between;flex-direction:column;gap:2ch}.btn-register{width:100%}nav{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;padding:0 10vw;padding-bottom:.2rem;background-color:var(--color-dark-blue);font-size:.85rem}nav p{font-weight:500;color:#fff}@media(max-width:666px){nav p{margin-bottom:1rem;margin-left:.4rem}}nav img{width:125px;object-fit:contain;margin-bottom:-16px}.nav-links{display:flex;justify-content:space-between;align-items:center}.nav-links li a{color:var(--color-white);font-weight:500;text-transform:uppercase;transition:all .5s;padding:.4rem;border-radius:.2rem}.nav-links li a:hover{background-color:var(--color-light-blue);color:var(--color-light-yellow)}.btn-logout:hover{cursor:pointer}.team-container{display:flex;flex-direction:column;gap:1rem;position:sticky;top:0}.team-form{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem;margin-bottom:2ch}.team-form input{min-width:150px;font-size:1rem;padding:.5rem;height:fit-content}.team-form button{background-color:var(--color-red);color:var(--color-white);font-weight:600;border:none;cursor:pointer;transition:all .3s;font-size:1rem;border-radius:.7rem}.team-form button:hover,.team-form button:active,.team-form button:focus{transform:scale(1.05)}.btn-save:hover,.btn-save:active,.btn-save:focus{background-color:var(--color-green)}.btn-clean:hover,.btn-clean:active,.btn-clean:focus{background-color:var(--color-light-yellow)}.all-team{display:grid;grid-template-columns:repeat(2,minmax(300px,1fr));gap:1rem;max-width:100%;width:100%}.team-item{position:relative;display:grid;grid-template-columns:1fr 2fr;padding:1rem;gap:2ch;border-radius:.3rem;color:var(--color-white)}.with-border{border:1px solid hsla(210,6%,14%,.15)}.pokemon-avatar{display:flex;justify-content:space-evenly;align-items:center;flex-direction:column;max-width:100%;padding:.5rem;border-radius:.3rem}.pokemon-avatar>img{max-width:96px;height:fit-content}.pokemon-avatar>p{text-transform:capitalize;font-size:.9rem;font-weight:500}.pokemon-info{position:relative;display:flex;flex-direction:column;justify-content:space-evenly;gap:1ch}.pokemon-types{display:grid;grid-template-columns:1fr 1fr;text-align:center;gap:1ch}.pokemon-types-item{text-transform:uppercase;padding:.2rem;background-color:var(--color-white);border-radius:.3rem;font-weight:600;letter-spacing:.2ch;border:none}.type-chart{text-transform:capitalize;display:grid;grid-template-columns:1fr;gap:1ch}.close-icon{position:absolute;bottom:5%;right:5%;cursor:pointer;transition:all .5s;padding:.3ch}.close-icon:hover,.close-icon:focus{transform:scale(1.1)}.close-icon:active{transform:scale(.9)}.pokedex{display:flex;justify-content:space-between;gap:1rem;flex-direction:column}.pokedex-title{display:block;background-color:var(--color-red);color:#fff;width:100%;text-align:center;padding:.1rem}fieldset{padding:2ch;border-radius:10px;background-color:var(--color-white);border:1px solid hsl(221deg 30% 90%)}.filter-select{width:100%;height:3rem;font-size:1rem;font-family:Roboto,sans-serif;color:var(--color-black);background-color:var(--color-white);border:1px solid hsl(240,17%,88%);border-radius:.45rem;padding:0 1rem;cursor:pointer;transition:all .2s}.filter-select:hover{border-color:var(--color-light-blue)}.filter-select:focus{outline:none;border-color:var(--color-light-blue);box-shadow:0 0 0 3px #0074bd1a}fieldset>div{display:flex;gap:2ch;align-items:baseline;color:var(--color-black)}fieldset>div+div{margin-block-start:2ch}fieldset>div>label{line-height:1.5}.checkbox-item label{text-transform:capitalize}.pokedex-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:1rem}.pokedex-error{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2rem;padding:3rem 2rem;background-color:var(--color-white);border-radius:10px;border:1px solid hsl(221deg 30% 90%);box-shadow:0 0 100px #0000001a;margin:2rem auto;max-width:500px}.pokedex-error p{font-size:1.1rem;color:var(--color-red);font-weight:600;text-align:center;line-height:1.6}.retry-button{width:100%;max-width:200px;height:50px;background:var(--color-light-yellow);border:0;border-radius:8px;color:var(--color-black);font-weight:700;font-size:1rem;cursor:pointer;transition:all .2s}.retry-button:hover{filter:brightness(90%);transform:scale(1.05)}.retry-button:active{transform:scale(.95)}.pokemon-card{text-align:center;border:.5px solid hsla(0,0%,76%,.918);border-radius:.3rem;transition:all 1000}.pokemon-card:hover{border:2px solid hsl(0,0%,1%);cursor:pointer}.card-image-container{height:100%;background:#0000000d}.card-image{min-width:96px;max-width:110px}.description-id{border-top:.5px solid hsla(0,0%,76%,.918);font-weight:600}.description-name{text-transform:uppercase;font-size:.8rem;line-height:1.4}.teams{margin:5vh 10vw;display:flex;flex-direction:column;gap:5vh}.teams-item{display:flex;flex-direction:column;gap:1rem}.pokemons-team{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2ch}.normal{background-color:var(--normal)}.normal-c{color:var(--normal)}.fighting{background-color:var(--fighting)}.fighting-c{color:var(--fighting)}.flying{background-color:var(--flying)}.flying-c{color:var(--flying)}.poison{background-color:var(--poison)}.poison-c{color:var(--poison)}.ground{background-color:var(--ground)}.ground-c{color:var(--ground)}.rock{background-color:var(--rock)}.rock-c{color:var(--rock)}.bug{background-color:var(--bug)}.bug-c{color:var(--bug)}.ghost{background-color:var(--ghost)}.ghost-c{color:var(--ghost)}.steel{background-color:var(--steel)}.steel-c{color:var(--steel)}.fire{background-color:var(--fire)}.fire-c{color:var(--fire)}.water{background-color:var(--water)}.water-c{color:var(--water)}.grass{background-color:var(--grass)}.grass-c{color:var(--grass)}.electric{background-color:var(--electric)}.electric-c{color:var(--electric)}.psychic{background-color:var(--psychic)}.psychic-c{color:var(--psychic)}.ice{background-color:var(--ice)}.ice-c{color:var(--ice)}.dragon{background-color:var(--dragon)}.dragon-c{color:var(--dragon)}.fairy{background-color:var(--fairy)}.fairy-c{color:var(--fairy)}.bug-grass{background:linear-gradient(var(--gradient-angle),var(--bug),var(--grass))}.poison-grass{background:linear-gradient(var(--gradient-angle),var(--poison),var(--grass))}.poison-bug{background:linear-gradient(var(--gradient-angle),var(--poison),var(--bug))}.poison-ground{background:linear-gradient(var(--gradient-angle),var(--poison),var(--ground))}.poison-water{background:linear-gradient(var(--gradient-angle),var(--poison),var(--water))}.poison-ghost{background:linear-gradient(var(--gradient-angle),var(--poison),var(--ghost))}.flying-poison{background:linear-gradient(var(--gradient-angle),var(--flying),var(--poison))}.flying-fire{background:linear-gradient(var(--gradient-angle),var(--flying),var(--fire))}.flying-bug{background:linear-gradient(var(--gradient-angle),var(--flying),var(--bug))}.flying-rock{background:linear-gradient(var(--gradient-angle),var(--flying),var(--rock))}.flying-water{background:linear-gradient(var(--gradient-angle),var(--flying),var(--water))}.flying-dragon{background:linear-gradient(var(--gradient-angle),var(--flying),var(--dragon))}.flying-electric{background:linear-gradient(var(--gradient-angle),var(--flying),var(--electric))}.flying-ice{background:linear-gradient(var(--gradient-angle),var(--flying),var(--ice))}.normal-flying{background:linear-gradient(var(--gradient-angle),var(--normal),var(--flying))}.ground-rock{background:linear-gradient(var(--gradient-angle),var(--ground),var(--rock))}.rock-water{background:linear-gradient(var(--gradient-angle),var(--rock),var(--water))}.steel-electric{background:linear-gradient(var(--gradient-angle),var(--steel),var(--electric))}.fighting-water{background:linear-gradient(var(--gradient-angle),var(--fighting),var(--water))}.water-psychic{background:linear-gradient(var(--gradient-angle),var(--water),var(--psychic))}.water-ice{background:linear-gradient(var(--gradient-angle),var(--water),var(--ice))}.grass-psychic{background:linear-gradient(var(--gradient-angle),var(--grass),var(--psychic))}.psychic-fairy{background:linear-gradient(var(--gradient-angle),var(--psychic),var(--fairy))}.psychic-ice{background:linear-gradient(var(--gradient-angle),var(--psychic),var(--ice))}.normal-fairy{background:linear-gradient(var(--gradient-angle),var(--normal),var(--fairy))}.loader{border:10px solid var(--bg-color);border-top:10px solid var(--color-light-blue);border-radius:50%;width:50px;height:50px;animation:spin 2s linear infinite;margin:0 auto}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}