:root{--size: 80;--unit: calc((var(--size) / 480) * 1vmin);--red: #dc0a2d;--dark-red: #8c0820;--soft-red: #f0667d;--black: #04312a;--blue: #21aefe;--blue-baby: #98d9ff;--red-light: #f7103c;--red-light-melon: #fd7991;--yellow-light: #ffdc40;--yellow-light-linen: #fcf6dc;--green-light: #326b3e;--green-light-asparagus: #7fbf8d;--screen-green: #51ae5e;--screen-dark: #232323;--white: #dedede;box-sizing:border-box;margin:0;padding:0;--type-grass: #78c850;--type-fire: #f08030;--type-water: #6890f0;--type-bug: #a8b820;--type-normal: #a8a878;--type-poison: #a040a0;--type-electric: #f8d030;--type-ground: #e0c068;--type-fairy: #ee99ac;--type-fighting: #c03028;--type-psychic: #f85888;--type-rock: #b8a038;--type-ghost: #705898;--type-ice: #98d8d8;--type-dragon: #7038f8;--type-dark: #705848;--type-steel: #b8b8d0;--type-flying: #a890f0}body{margin:0;padding:0;box-sizing:border-box;background-color:var(--white);transition:background-color 2s ease}*{font-family:"Press Start 2P",cursive}p{font-size:.7vw;color:var(--screen-green)}input{width:100%;font-size:45%;text-align:center;color:var(--screen-dark)}img.pokemon-picture{height:100%;width:100%}.pokedex{height:calc(360 * var(--unit));width:calc(480 * var(--unit));position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}.sound{display:flex;justify-content:flex-end}.pokeball{position:relative;margin-left:5px;width:80px;height:80px;background:var(--white);border:5px solid var(--screen-dark);border-radius:50%;overflow:hidden}.pokeball:before{content:"";position:absolute;background:var(--red);width:100%;height:50%}.pokeball:after{content:"";position:absolute;top:calc(50% - 3px);width:100%;height:50%;background:var(--white);border-top:3px solid}.boton{position:absolute;width:20px;height:20px;border:4px solid;border-radius:50%;top:calc(50% - 14px);left:calc(50% - 14px);z-index:10;background:var(--white)}.fa-play,.fa-pause{padding-left:4.5px}.rowdata1,.rowdata2,.rowdata3{display:none}.main-container{position:absolute;width:50%;height:100%;left:3%;top:0%;border-radius:3%;border:5px solid var(--dark-red);background:var(--red)}.hinge{position:absolute;width:15%;height:85%;left:85%;top:15%;border-radius:0%;background:linear-gradient(90deg,var(--dark-red),var(--soft-red),var(--red),var(--dark-red))}.hinge:before{content:"";position:absolute;width:100%;height:1%;left:0%;top:10%;background:var(--dark-red)}.hinge:after{content:"";position:absolute;width:100%;height:1%;left:0%;bottom:10%;background:var(--dark-red)}.blue-led{position:absolute;width:19%;height:13%;left:7%;top:4%;border-radius:50%;border:8px solid white;background:var(--blue);background:radial-gradient(var(--blue-baby) 0%,var(--blue) 50%)}.blue-led:after{content:"";position:absolute;width:20%;height:20%;top:20%;left:20%;border-radius:50%;background:#fff9}.leds{position:absolute;width:20%;height:3%;left:33%;top:3%}.red{position:absolute;width:23%;height:100%;left:0%;top:0%;border-radius:50%;border:1px solid black;background:radial-gradient(var(--red-light-melon) 0%,var(--red-light) 60%)}.red:after{content:"";position:absolute;width:20%;height:20%;left:20%;top:20%;border-radius:50%;background:#fff9}.yellow{position:absolute;width:23%;height:100%;left:42%;top:0%;border-radius:50%;border:1px solid black;background:radial-gradient(var(--yellow-light-linen) 0%,var(--yellow-light) 60%)}.yellow:after{content:"";position:absolute;width:20%;height:20%;left:20%;top:20%;border-radius:50%;background:#fff9}.green{position:absolute;width:23%;height:100%;left:84%;top:0%;border-radius:50%;border:1px solid black;background:radial-gradient(var(--green-light-asparagus) 0%,var(--green-light) 60%)}.green:after{content:"";position:absolute;width:20%;height:20%;left:20%;top:20%;border-radius:50%;background:#fff9}.line1{position:absolute;width:45%;height:0%;left:-1%;top:23%;background:var(--dark-red);border-top:5px solid var(--dark-red)}.line2{position:absolute;width:17.6%;height:0%;left:41%;top:18.9%;transform:rotate(-45deg);background:var(--dark-red);border-top:5px solid var(--dark-red)}.line3{position:absolute;width:45%;height:0%;left:55.5%;top:15%;background:var(--dark-red);border-top:5px solid var(--dark-red)}.screen-pokemon{position:absolute;width:65%;height:37%;left:10%;top:30%;border-radius:3%;background:var(--white)}.corner-triangle{position:absolute;width:15%;height:15%;left:-1%;top:86%;background:var(--red);clip-path:polygon(0 0,0% 100%,100% 100%)}.red-dot-1{position:absolute;width:5%;height:5%;left:42%;top:6%;border-radius:50%;background:var(--red)}.red-dot-2{position:absolute;width:5%;height:5%;left:58%;top:6%;border-radius:50%;background:var(--red)}.screen{position:absolute;width:72%;height:66%;left:14%;top:15%;background:var(--screen-dark)}.red-dot-3{position:absolute;width:7%;height:8%;left:14%;top:86%;border-radius:50%;border:1px solid black;background:var(--red)}.speakerbars{display:flex;flex-direction:column;justify-content:space-between;position:absolute;width:13%;height:12%;left:82%;top:84%}.speakerbar{width:100%;height:17%;border-radius:50px;background:var(--black)}.black-button{position:absolute;width:12%;height:8%;left:7%;top:74%;border-radius:50%;border:1px solid black;background:var(--black)}.red-pill-button{position:absolute;width:12%;height:2%;left:21%;top:70%;border-radius:50px;border:1px solid black;background:var(--red-light)}.blue-pill-button{position:absolute;width:12%;height:2%;left:38%;top:70%;border-radius:50px;border:1px solid black;background:var(--blue)}.id-input{position:absolute;width:30%;height:12%;left:22%;top:78%;border-radius:5%;border:1px solid black;background:var(--screen-green)}.directional-pad{position:absolute;width:21%;height:5%;left:58%;top:78%;border-radius:5%;border:1px solid black;background:var(--black)}.directional-pad:before{content:"";position:absolute;width:33%;height:100%;left:34%;top:-98%;border-radius:5%;border:1px solid black;border-bottom:none;background:var(--black)}.directional-pad:after{content:"";position:absolute;width:33%;height:100%;left:34%;top:97%;border-radius:5%;border:1px solid black;border-top:none;background:var(--black)}.circle{position:absolute;width:10%;height:30%;left:45%;top:33%;border-radius:50%;background:var(--screen-dark)}.directional-left{z-index:1;position:absolute;width:34%;height:100%;left:0%}.directional-right{z-index:1;position:absolute;width:34%;height:100%;left:68%}.directional-up{z-index:1;position:absolute;width:34%;height:100%;left:34%;right:34%;top:-90%}.directional-down{z-index:1;position:absolute;width:34%;height:100%;left:34%;right:34%;top:100%}.secondary-container{position:absolute;width:44%;height:76%;left:53%;top:24%;border:5px solid var(--dark-red);background:var(--red);z-index:-1}.secondary-container:before{content:"";position:absolute;width:33.5%;height:12%;left:1%;top:-11.8%;border-top:5px solid var(--dark-red);background:var(--red)}.secondary-container:after{content:"";position:absolute;width:20%;height:13%;left:24.8%;top:-8.3%;border-radius:0% 0% 50% 50%;transform:rotate(45deg);border-top:5px solid var(--dark-red);background:var(--red)}.large-screen{position:absolute;width:82%;height:25%;left:10%;top:7%;border-radius:5px;background:var(--screen-dark)}.large-screen>p{padding-left:5%}.blue-buttons{display:grid;grid-template-rows:repeat(2,1fr);grid-template-columns:repeat(5,1fr);position:absolute;width:79%;height:17%;left:10%;top:33%;background:var(--screen-dark)}.blue-button{height:100%;width:100%;border:2px solid var(--screen-dark);background:var(--blue)}.black-pill-buttons{display:flex;justify-content:space-evenly;position:absolute;width:30%;height:2%;left:60%;top:53%}.black-pill-button{display:flex;background:var(--screen-dark);width:45%;height:100%;border-radius:50px}.white-buttons{display:flex;justify-content:space-evenly;position:absolute;width:32%;height:9%;left:10%;top:57%}#white-button1,#white-button2{display:flex;align-items:center;justify-content:center;background:var(--white);border-radius:4px;height:100%;width:50%;border:1px solid var(--screen-dark)}.yellow-light{position:absolute;width:10%;height:8%;left:75%;top:61%;border-radius:100%;border:1px solid black;background:radial-gradient(var(--yellow-light-gradient) 0%,var(--yellow-light) 60%)}.yellow-light:after{content:"";position:absolute;width:20%;height:20%;left:20%;top:20%;border-radius:50%;background:#fff9}.small-screens{display:flex;justify-content:space-between;position:absolute;width:80%;height:10%;left:10%;top:78%}.small-screen-secondary{display:flex;justify-content:center;background:var(--screen-dark);border-radius:4px;height:100%;width:45%;border:1px solid var(--screen-dark)}@media (max-width:1000px){.blue-led{left:3.5%;top:2%}}@media (max-width: 799px){p{font-size:.7em}}@media (max-width:499px){p{font-size:.3em}.blue-led{left:3.5%;top:2%}}@media (max-width:399px){p{font-size:1.5vw}.blue-led{left:3.5%;top:2%}}