*{padding:0;margin:0;box-sizing:border-box}html{font-size:62.5%;overflow-x:hidden;font-family:Arial,Helvetica,sans-serif}h1{font-size:3rem}h2{font-size:2.5rem}h3,p{font-size:2rem}.pokemon-card{width:30rem;height:40rem;margin:2rem;padding:2rem;border-radius:1rem;box-shadow:#0000003d 0 3px 8px;text-transform:capitalize;display:flex;align-items:center;justify-content:space-between;flex-direction:column;transition:all .3s}.pokemon-card:hover{transform:scale(1.02);box-shadow:#00000040 0 14px 28px,#00000038 0 10px 10px}.pokemon-card img{width:20rem}.pokemon-card .catched{width:15rem;height:5rem;background-color:green;border-radius:1rem;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}.pokemon-card .catchedimg{filter:saturate(1)}.pokemon-card .notcatched{width:15rem;height:5rem;background-color:red;border-radius:1rem;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}.pokemon-card .notcatchedimg{filter:saturate(0)}.pokemon-card button{width:12rem;height:3rem;background-color:#fff;border:none;border-radius:1rem;color:#000;display:flex;align-items:center;justify-content:center;cursor:pointer}.pokemon-card button:hover{background-color:#000;color:#fff;cursor:pointer}.home-section{width:100vw;min-height:100vh}.search-field{width:100%;height:5rem;display:flex;align-items:center;justify-content:center}.search-field input{width:20rem;height:4rem;text-align:center;border:none;border:2px solid black;border-radius:1rem}.pokemon-card-gallery{width:100%;display:flex;align-items:center;justify-content:space-evenly;flex-wrap:wrap}*{margin:0;padding:0;box-sizing:border-box}.TYPES{width:250px;margin:13vh auto;display:flex;flex-wrap:wrap;justify-content:center;background-color:#e5e5e5;background-image:url(../../assets/img/pngegg.png);background-repeat:no-repeat;background-position:left}.typebutton{outline:none;border:2px solid #ffcb05;width:100px;height:40px;cursor:pointer;transition:all .5s;margin:5px;border-radius:5px;background-color:#00a0e4;color:#fff;font-weight:700;text-transform:capitalize;display:flex;align-items:center;justify-content:center;background-repeat:no-repeat;background-position:50% 50%;background-size:50%;padding:0 10px}.typebutton:hover{border:2px solid rgb(211,211,211);border-bottom:4px solid rgb(211,211,211);background-color:#fff;color:#000}:root{--black: black;--white: white;--blue: lightblue;--brown: brown;--lightgrey: lightgrey;--dimgrey: dimgrey}main{min-height:85vh}html{font-size:62.5%}a{text-decoration:none;color:var(--black);font-weight:900}header{background-color:#87cefa;padding:10px;min-height:15vh}nav{display:flex;justify-content:center;align-items:center;flex-direction:column;width:100%;margin-bottom:10px;height:100%}.headerDiv{display:grid;width:100%;grid-template-columns:repeat(3,1fr);grid-template-rows:auto;padding-top:10px}.headerDiv div{margin:0 auto}.headerDiv input{border-radius:15px;border:none;text-align:center}.dark-header{background-color:var(--lightgrey)}.dark{background-color:var(--dimgrey)}.toggleactive{background-color:var(--white);color:var(--black);padding:5px 10px;border-radius:15px;cursor:pointer;text-align:center;margin:auto;font-size:clamp(.8rem,1.2vw,2rem)}.toggle{background-color:var(--black);color:var(--white);padding:5px 10px;border-radius:15px;cursor:pointer;text-align:center;margin:auto;font-size:clamp(.8rem,1.2vw,2rem)}.backbtn{padding:5px;font-size:clamp(2rem,3vw,4rem)}.typesbtn{width:30px;height:30px;display:flex;justify-content:space-evenly;align-items:center;flex-direction:column;padding-top:3px}.typesbtn:hover>div{background-color:var(--brown)}.typesbtn div{width:30px;height:3px;background-color:#000}.toggleactive:hover{background-color:var(--black);color:var(--white)}.toggle:hover{background-color:var(--white);color:var(--black)}.backbtn:hover{color:var(--brown)}.light{background-color:var(--blue)}.modalDialog{position:Fixed;font-family:Verdana,Sans-Serif;top:0;right:0;bottom:0;left:0;background-color:#0009;z-index:99999;opacity:0;transition:opacity .4s ease-in;pointer-events:None}.modalDialog:target{opacity:1;pointer-events:Auto}.modalDialog>div{width:400px;position:relative;margin:10% Auto;padding:5px 20px 13px;border-radius:10px;background-color:#fff;background:linear-gradient(#ffffff,#999999);cursor:Default}.close{background-color:#606061;color:#fff;line-height:25px;position:Absolute;right:-12px;text-align:Center;top:-10px;width:24px;text-decoration:None;font-weight:700;border-radius:12px;box-shadow:1px 1px 3px #000}.close:hover{background-color:#00d9ff}.loadingSection{display:flex;justify-content:center;align-items:center;height:100vh}.loading{animation:sizeUp 2.5s linear}.pokeball{background-color:#000;width:300px;height:300px;border-radius:50%;overflow:hidden;display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative}.upperBall{background-color:red;width:300px;height:130px}.lowerBall{background-color:#d3d3d3;width:300px;height:130px;margin-top:40px}.ballMid{width:90px;height:90px;position:absolute;background-color:#d3d3d3;border-radius:50%;border:solid black 1px;display:flex;align-items:center;justify-content:center}.ballMidDot{width:60px;height:60px;background-color:#d3d3d3;border-radius:50%;border:solid black 1px}@keyframes sizeUp{0%{transform:scale(.1)}50%{transform:scale(1)}to{transform:scale(2)}}@font-face{font-family:roboto;src:url(../assets/fonts/Roboto-Bold.ttf)}img{max-width:100%}.details-section img:hover{transform:scale(1.5);opacity:80%;cursor:pointer}.details-section{background-color:#00ffff5f;min-height:100vh;font-family:roboto,Arial,Helvetica,sans-serif}.img-section{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;min-height:35vh}.img-background{background:rgba(34,192,195,.481);background:linear-gradient(0deg,rgba(34,192,195,.752) 0%,rgba(253,187,45,.794) 100%);width:40vw;height:20vh;border-radius:3rem;-webkit-box-shadow:0px 10px 13px -7px #000000,5px 5px 15px 5px rgba(0,0,0,0);box-shadow:0 10px 13px -7px #000,5px 5px 15px 5px #0000;display:flex;align-items:center;justify-content:center}.img-background img{width:25rem;margin-top:-15rem}.name-section{display:flex;justify-content:center;margin-bottom:2rem;text-transform:capitalize}.name-section h2{color:#ffcb05;font-size:10vw;-webkit-text-stroke:2px #3d7dca;font-size:8vw}.type-section{display:flex;justify-content:center;gap:3rem}.type-section h6{font-size:2vw;background-color:green;color:#fff;padding:1rem 2.5rem;border-radius:1rem;margin-bottom:5rem;-webkit-box-shadow:-10px 0px 13px -7px #000000,10px 0px 13px -7px #000000,5px 5px 15px 5px rgba(0,0,0,0);box-shadow:-10px 0 13px -7px #000,10px 0 13px -7px #000,5px 5px 15px 5px #0000}.stats-section{display:flex;flex-direction:column;justify-content:center;align-items:center}.stats-section img{width:5vw;border-radius:2rem;padding:1px;margin:5px}.stats-section h5{font-size:4vw;color:#737271;margin-bottom:1rem;padding:1rem;border:2vmin solid;border-image:conic-gradient(from var(--angle),red,yellow,lime,aqua,blue,magenta,red) 1;animation:10s rotate linear infinite}.stats-section table{min-width:30vw;background:rgba(184,212,239,.667);border-radius:2rem;-webkit-box-shadow:0px 10px 13px -7px #000000,5px 5px 15px 5px rgba(0,0,0,0);box-shadow:0 10px 13px -7px #000,5px 5px 15px 5px #0000;border:2vmin solid;border-image:conic-gradient(from var(--angle),red,yellow,lime,aqua,blue,magenta,red) 1;animation:10s rotate linear infinite}.stats th{border-top:10px solid rgba(145,145,144,.919);border-left:10px solid rgba(107,108,108,.501);border-right:10px solid rgba(117,117,119,.513);border-bottom:10px solid rgba(162,162,163,.513);background-color:#5a5858;font-size:1.5vw;color:#d1e70c;border-radius:5px}.gifs th{border-top:10px solid rgba(111,110,109,.919);border-left:10px solid rgba(107,108,108,.501);border-right:10px solid rgba(117,117,119,.513);border-bottom:10px solid gray;background-color:#000;font-size:1.5vw;color:#d1e70c;border-radius:5px}.stats-section td{font-size:2vw;text-align:center;border-left:10px solid rgba(121,121,124,.501);border-right:10px solid rgba(125,126,127,.513);border-bottom:10px solid gray;border-top:10px solid gray;color:#ffcb05;font-weight:700;background-color:#4e4b4b}.gifs th:hover{transform:scale(2);opacity:70%;cursor:pointer}.attributs td:hover{transform:scale(1.5);color:red;font-size:4vw;opacity:70%;border:none;border-radius:5px;cursor:pointer}.type-section h6:hover{transform:translateY(2px);box-shadow:0 0 #0000}@keyframes rotate{to{--angle: 360deg}}@property --angle{syntax: "<angle>"; initial-value: 0deg; inherits: false;}