:root{--scale: 2.5;--main-bg-color: #fe0065;--secondary-bg-color: #f2f2f2;--main-screen-bg-color: #98cb98;--secondary-screen-bg-color: #9e9d9d;--main-buttons-color: #585858;--square-buttons-color: #7ca9f7}@media(max-width:1200px){:root{--scale: 2}}@media(max-width:900px){:root{--scale: 1.75}}@media(max-width:600px){:root{--scale: 1.5}}@media(max-width:400px){:root{--scale: 1.25}}.red{background-color:red}.yellow{background-color:#fecb65}.green{background-color:#32cb65}.blue{background-color:#3298cb}.light-blue{background-color:#85bdfe}.light-red{background-color:#fe98cb}.light-yellow{background-color:#fefecb}.light-green{background-color:#98fe00}*{margin:0;padding:0}body{height:100vh;width:100vw;display:flex;flex-direction:column;justify-content:start;align-items:center;background-color:var(--secondary-bg-color);font-family:"Press Start 2P",cursive}.logo{justify-self:start;width:100%;height:20%;display:flex;justify-content:center;align-items:center}.search-container{width:100%;height:calc(80px * var(--scale));justify-self:center;align-self:center;display:flex;justify-content:center;align-items:center}.ball-container{overflow:hidden;width:calc(60px * var(--scale));height:calc(60px * var(--scale));border:calc(2px * var(--scale)) solid black;border-radius:50%;position:relative;animation:shake 1.5s ease-in infinite;animation-play-state:paused}@keyframes shake{0%{transform:rotate(5deg)}5%{transform:rotate(-5deg)}10%{transform:rotate(5deg)}15%{transform:rotate(-5deg)}20%{transform:rotate(5deg)}25%{transform:rotate(0)}to{transform:rotate(0)}}.ball-container:hover{cursor:pointer;animation-play-state:running}.upper-half-ball{position:absolute;width:100%;height:42%;background-color:var(--main-bg-color)}.bottom-half-ball{position:absolute;bottom:0;width:100%;height:42%;background-color:var(--secondary-bg-color)}.center-ball{background-color:#fff;width:20%;height:20%;border:solid black calc(2px * var(--scale));border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.center-line{background:#000;height:100%;width:100%}input{text-align:center;height:calc(40px * var(--scale));border-radius:calc(4px * var(--scale));margin-right:calc(2px * var(--scale))}#pokedex{height:calc(450px * var(--scale));width:calc(250px * 2 * var(--scale));display:flex;border-radius:calc(10px * var(--scale));margin-top:50px}@media only screen and (max-width:600px){#pokedex{width:90%}}#left-panel{background-color:var(--main-bg-color);box-sizing:border-box;height:100%;width:50%;display:grid;grid-template-rows:23% 50% 27%;border:solid black calc(3px * var(--scale));border-top-left-radius:calc(10px * var(--scale));border-bottom-left-radius:calc(10px * var(--scale));border-top-right-radius:calc(7px * var(--scale))}.lights-container{position:relative;display:flex;justify-content:start;align-items:center}.left-svg{position:absolute;z-index:+5;width:calc(245px * var(--scale));height:calc(100px * var(--scale))}.left-svg polyline{stroke-width:calc(3px * var(--scale))}.big-light-boarder{display:flex;justify-content:center;align-items:center;margin-left:calc(5px * var(--scale));height:calc(60px * var(--scale));width:calc(60px * var(--scale));border:solid black;border-radius:50%;background-color:#fff}.big-light{height:calc(50px * var(--scale));width:calc(50px * var(--scale));border-radius:50%;border:solid black}.big-dot{height:calc(15px * var(--scale));width:calc(15px * var(--scale));position:relative;top:calc(7px * var(--scale));left:calc(10px * var(--scale));border-radius:50%}.small-lights-container{margin-left:calc(15px * var(--scale));margin-top:calc(10px * var(--scale));width:calc(70px * var(--scale));height:100%;display:flex;align-self:start;justify-content:space-around}.small-light{border:solid black;width:calc(16px * var(--scale));height:calc(16px * var(--scale));border-radius:50%}.dot{height:calc(5px * var(--scale));width:calc(5px * var(--scale));position:relative;top:calc(3px * var(--scale));left:calc(3px * var(--scale));border-radius:50%}.screen-container{display:flex;flex-direction:column;align-items:center;gap:calc(8px * var(--scale));margin-top:calc(8px * var(--scale))}.screen{width:calc(150px * var(--scale));height:calc(150px * var(--scale));border:calc(2px * var(--scale)) solid black;border-radius:0 0 0 17%;display:grid;grid-template-rows:10% 72% 18%;background-color:#fff}.top-screen-lights{width:50%;margin-top:calc(2px * var(--scale));display:flex;justify-self:center;justify-content:center;align-items:center}.mini-light{border:solid black calc(1px * var(--scale));width:calc(5px * var(--scale));height:calc(5px * var(--scale));border-radius:50%;margin-right:calc(7px * var(--scale))}#main-screen{height:100%;width:80%;justify-self:center;background-color:var(--main-screen-bg-color);border:calc(2px * var(--scale)) solid black;border-radius:5%;background-position:center;background-repeat:no-repeat;background-size:contain;display:flex;align-items:center;justify-content:center;text-align:center}#main-screen img{width:100%;height:100%}.bottom-screen-lights{display:flex;margin-top:calc(5px * var(--scale));width:75%;justify-self:center;justify-content:space-between;align-items:center}.bottom-screen-lights .small-light{border:solid black calc(2px * var(--scale));width:calc(12px * var(--scale));height:calc(12px * var(--scale))}.bottom-screen-lights .dot{height:calc(4px * var(--scale));width:calc(4px * var(--scale));top:calc(2.5px * var(--scale));left:calc(2px * var(--scale))}.line{width:calc(18px * var(--scale));height:calc(2px * var(--scale));background-color:#000;margin-top:calc(2px * var(--scale))}.buttons-container{display:grid;grid-template-rows:40% 60%}.big-button{border-radius:50%;width:calc(25px * var(--scale));height:calc(25px * var(--scale));border:calc(2px * var(--scale)) solid black;background-color:var(--main-buttons-color);margin-left:calc(7px * var(--scale))}.long-button{width:calc(35px * var(--scale));height:calc(2px * var(--scale));border:calc(2px * var(--scale)) solid black;border-radius:calc(50px * var(--scale))}.green-screen{width:calc(80px * var(--scale));height:calc(30px * var(--scale));border-radius:calc(5px * var(--scale));border:solid black calc(2px * var(--scale));background-color:#3ab47d;display:flex;justify-content:center;align-items:center}#name-screen{width:100%;text-align:center;font-size:calc(12px * var(--scale));overflow-wrap:break-word}.circle{width:calc(4px * var(--scale));height:calc(4px * var(--scale));border-radius:50%;border:calc(1px * var(--scale)) solid black}.upper-buttons-container{display:flex;align-items:top;justify-content:start}.long-buttons-container{display:flex;width:calc(100px * var(--scale));justify-content:space-around;margin-left:calc(7px * var(--scale))}.nav-buttons-container{display:grid;grid-template-columns:27% 35% 38%}.dots-container{height:100%;width:50%;display:flex;justify-self:center;justify-content:space-between;font-size:x-large}.right-nav-container{position:relative;top:calc(-30px * var(--scale));display:flex;flex-direction:column;justify-content:center;align-items:center}.nav-button{height:calc(52px * var(--scale));width:calc(52px * var(--scale));display:flex;justify-content:center;align-items:center}.nav-button-vertical{position:absolute;transform:rotate(90deg);background-color:var(--main-buttons-color);border-radius:calc(5px * var(--scale));height:calc(12px * var(--scale));width:calc(52px * var(--scale));border:calc(2px * var(--scale)) solid black}.nav-button-horizontal{position:absolute;background-color:var(--main-buttons-color);border-radius:calc(5px * var(--scale));height:calc(12px * var(--scale));width:calc(52px * var(--scale));border:calc(2px * var(--scale)) solid black}.nav-center-circle{height:calc(5px * var(--scale));width:calc(5px * var(--scale));border-radius:50%;border:solid black calc(2px * var(--scale));z-index:+2}.border-top{border-top:calc(3.5px * var(--scale)) solid var(--main-buttons-color);position:absolute;top:calc(-3px * var(--scale));left:calc(20px * var(--scale));right:calc(19.5px * var(--scale))}.border-bottom{border-top:calc(3.5px * var(--scale)) solid var(--main-buttons-color);position:absolute;top:calc(11px * var(--scale));left:calc(20px * var(--scale));right:calc(19.5px * var(--scale))}.bottom-right-nav-container{display:flex;justify-content:center;align-items:center;text-align:center}.bottom-right-nav-container .dots-container{align-items:center;justify-content:center}.bottom-right-nav-container .small-light{border:solid black calc(2px * var(--scale));width:calc(7px * var(--scale));height:calc(7px * var(--scale));margin-right:calc(3px * var(--scale));margin-top:calc(10px * var(--scale))}.bottom-right-nav-container .dot{height:calc(2.5px * var(--scale));width:calc(2.5px * var(--scale));top:calc(1.5px * var(--scale));left:calc(1.5px * var(--scale))}#right-panel{background-color:var(--main-bg-color);box-sizing:border-box;position:relative;height:100%;width:50%;display:grid;grid-template-rows:24% repeat(4,19%);border-bottom:solid black calc(3px * var(--scale));border-bottom-right-radius:calc(10px * var(--scale))}#right-panel:before{content:"";position:absolute;left:calc(-2.5px * var(--scale));bottom:0;width:100%;height:calc(373px * var(--scale));border-right:solid black calc(3px * var(--scale));border-bottom-right-radius:calc(7px * var(--scale))}.top-screen-container{display:flex;justify-content:center;align-items:center}.right-panel-screen{width:calc(146px * var(--scale));height:calc(64px * var(--scale));background-color:var(--secondary-screen-bg-color);border:solid black calc(2px * var(--scale));border-radius:calc(4px * var(--scale));font-size:calc(12px * var(--scale));padding-left:calc(2px * var(--scale));padding-right:calc(2px * var(--scale));display:flex;align-items:center;justify-content:center;text-align:left;padding-left:calc(8px * var(--scale));line-height:2}.square-buttons-container{display:flex;justify-content:center;align-items:center}.blue-squares-container{width:calc(146px * var(--scale));height:calc(60px * var(--scale));display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(2,1fr)}.blue-square{border-radius:calc(2px * var(--scale));border:black calc(1.5px * var(--scale)) solid;background-color:var(--square-buttons-color);box-shadow:inset calc(-2px * var(--scale)) calc(-2px * var(--scale)) #3298cb}.center-buttons-container{display:flex;justify-content:space-around}.center-left-container{display:grid}.small-reds-container{display:flex;align-items:center;justify-content:start}.small-reds-container .small-light{border:solid black calc(2px * var(--scale));width:calc(7px * var(--scale));height:calc(7px * var(--scale));margin-right:calc(10px * var(--scale));margin-top:calc(10px * var(--scale))}.small-reds-container .dot{height:calc(2.5px * var(--scale));width:calc(2.5px * var(--scale));top:calc(1px * var(--scale));left:calc(1px * var(--scale))}.white-squares-container{display:flex;align-items:center;justify-content:center}.white-square{width:calc(25px * var(--scale));height:calc(25px * var(--scale));border-radius:calc(5px * var(--scale));border:black calc(2px * var(--scale)) solid;background-color:#fff;box-shadow:inset calc(-2px * var(--scale)) calc(-2px * var(--scale)) gray}.center-right-container{display:grid}.thin-buttons-container{display:flex;justify-content:space-between}.thin-button{width:calc(35px * var(--scale));height:calc(2px * var(--scale));border:calc(2px * var(--scale)) solid black;background-color:var(--main-buttons-color);margin-left:calc(10px * var(--scale))}.yellow-button{justify-self:end;width:calc(25px * var(--scale));height:calc(25px * var(--scale));border-radius:50%;border:solid calc(2px * var(--scale)) black;margin-left:calc(7px * var(--scale))}.yellow-button .big-dot{height:calc(7px * var(--scale));width:calc(7px * var(--scale));position:relative;top:calc(3px * var(--scale));left:calc(5px * var(--scale));border-radius:50%}.bottom-screens-container{display:flex;justify-content:space-around;align-items:center}.bottom-screens-container .right-panel-screen{width:calc(64px * var(--scale));height:calc(25px * var(--scale))}.mention{margin-top:calc(10px * var(--scale));width:calc(150px * var(--scale));display:grid;text-align:center;font-size:x-large}.links{display:flex;justify-content:space-between}.link-logo{width:calc(25px * var(--scale));height:calc(25px * var(--scale));background-position:center;background-repeat:no-repeat;background-size:contain}.screen-search{display:flex;align-items:center;gap:calc(6px * var(--scale))}.screen-search-input{width:calc(100px * var(--scale));height:calc(26px * var(--scale));font-size:calc(7px * var(--scale));font-family:"Press Start 2P",cursive;background-color:var(--secondary-screen-bg-color);border:calc(2px * var(--scale)) solid black;border-radius:calc(4px * var(--scale));text-align:center;box-shadow:inset calc(2px * var(--scale)) calc(2px * var(--scale)) #858383}.screen-search-ball{width:calc(24px * var(--scale));height:calc(24px * var(--scale))}.screen-search-input:focus{outline:none;box-shadow:0 0 calc(4px * var(--scale)) #98cb98}.right-empty-svg{width:calc(250px * var(--scale));height:calc(75px * var(--scale))}.right-empty-svg polyline{stroke-width:calc(3px * var(--scale))}.loading-text{letter-spacing:1px}.dots:after{content:"";animation:dots 1.4s steps(4,end) infinite}@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}to{content:""}}