*{  
  margin: 0;
  padding: 0;

}

.encabezado{
  background-color: rgb(238, 22, 22);
  width: 1363px;
  height: 70px;
  box-shadow: 0px 3px 0px 0px;
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  padding-top: 0px;
  padding-bottom: 0px;
}

#pokeLogo{
  float: left;
  position: absolute;
  margin-left: 100px;
  margin-top: 6px;
}

h1{
  position: absolute;
  margin-left: 500px;
  margin-top: 7px;
  font-size: 50px;
  color: white;
  -webkit-text-stroke: 1px black;
  font-family: 'Anton', sans-serif;;
}

.pokedex {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  padding-top: 290px;
  padding-bottom: 50px;
}



div {
  display: block;
}


.pokedexIzq {
  background-color: rgb(172, 31, 31);
  position:absolute;
  width: 389px;
  height: 550px;
  left: 25%;
  border-radius: 4% 3% 3% 4%;
}

.fondo1 {
  background-color: rgb(238, 38, 38);
  position:relative;
  width: 382px;
  height: 540px;
  left: 5px;
  top: 3px;
  border-radius: 4% 3% 3% 4%;
  box-shadow: 0px 1px 0px 2px rgb(61, 3, 3);
}

.fondo2 {
  background-color: rgb(238, 38, 38);
  position:absolute;
  width: 316px;
  height: 405px;
  left: 8px;
  margin-top: 128px;
  border-radius: 1% 0% 1% 5%;
  box-shadow: 0px 0px 0px 2px rgb(61, 3, 3);
}

.pantalla{
  background-color: rgb(224, 223, 223);
  position: absolute;
  width: 255px;
  height: 214px;
  top: 165px;
  left: 40px;
  border-radius: 3% 3% 3% 3%;
  box-shadow: 1px 1px 0px 2px rgb(92, 91, 91);

}

#triangulo-der {
width: 24px;
height: 25px;
-webkit-transform: skew(45deg);
   -moz-transform: skew(45deg);
     -o-transform: skew(45deg);
     position: absolute;
background: rgb(238, 38, 38);
box-shadow: 2px 0px 0px 0px  rgb(92, 91, 91);
border-radius: 1% 1% 1% 1%;
margin-top: 192px;
margin-left: -13px;
}


.pantallaint{
  background-color: rgb(180, 230, 100);
  position: absolute;
  width: 188px;
  height: 132px;
  top: 45px;
  left: 33px;
  border-radius: 3% 3% 3% 3%;
  box-shadow: -1px -1px 0px 3px rgb(120, 145, 82);
}

#pokeImg{
  position: absolute;
  width: 100px;
  top: 25px;
  left: 15px;
}

#pokeNombre{
  font-size: 17px;
  margin-left: 15px;
}

#pokeId{
  font-size: 17px;
  margin-left: 15px;
}

.stats{
  margin-top: 2px;
}

.led1{
  background-color: rgb(245, 4, 4);
  width: 8px;
  height: 8px;
  position: absolute;
  box-shadow: 0px 0px 0px 2px rgb(136, 136, 136);
  border-radius: 95%;
  margin-left: 110px;
  margin-top: 20px;
}

.led2{
  background-color: rgb(245, 4, 4);
  width: 8px;
  height: 8px;
  position: absolute;
  box-shadow: 0px 0px 0px 2px rgb(136, 136, 136);
  border-radius: 95%;
  margin-left: 140px;
  margin-top: 20px;
}

.led3{
  background-color: rgb(245, 4, 4);
  width: 15px;
  height: 15px;
  position: absolute;
  box-shadow: 0px 0px 0px 2px rgb(136, 136, 136);
  border-radius: 95%;
  margin-left: 35px;
  margin-top: 188px;
}

.brillo {
  width: 40%;
  height: 40%;
  border-radius: 100%;
  background-color: white;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -ms-border-radius: 100%;
  -o-border-radius: 100%;
  margin: 5px;
  opacity: .9;
}

.brillo2 {
  width: 40%;
  height: 40%;
  border-radius: 100%;
  background-color: white;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -ms-border-radius: 100%;
  -o-border-radius: 100%;
  margin: 1px;
  opacity: .8;
}

.brillo3 {
  width: 40%;
  height: 40%;
  border-radius: 100%;
  background-color: white;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -ms-border-radius: 100%;
  -o-border-radius: 100%;
  margin: 1px;
  opacity: .8;
}


.rejillas{
  width: 25px;
  height: 2px;
  position: absolute;
  background-color: black;
  margin-top: 187px;
  margin-left: 197px;
}

#rej2{
  margin-top: 192px;
}

#rej3{
  margin-top: 197px;
}

#rej4{
  margin-top: 202px;
}

.boton{
  position: absolute;
  width: 37px;
  height: 37px;
  background-color: black;
  border-radius: 95%;
  left: 40px;
  top: 400px;
}

.botonNegro{
  background-color: rgb(23, 23, 26);
  width: 34px;
  height: 34px;
  margin-left: 1px;
  border-radius: 95%
}
.botonRojo{
  position: absolute;
  background-color: rgb(219, 4, 4);
  width: 37px;
  height: 7px;
  margin-left: 95px;
  border-radius: 30%;
  top: 399px
}

.botonAzul{
  position: absolute;
  background-color: rgb(13, 3, 148);
  width: 37px;
  height: 7px;
  margin-left: 160px;
  border-radius: 30%;
  top:399px;
}

#pokeName{
  position: absolute;
  width: 95px;
  height: 58px;
  background-color: rgb(180, 230, 100);
  border-radius: 4% 4% 4% 4%;
  left: 95px;
  top: 425px;
  text-align: center;
}

.prepad{
  position: absolute;
  width: 90px;
  height: 90px;
  margin-top: -150px;
  margin-left: 220px;
}

.pad {
  background: #1c1c1d;
  height: 90px;
  position: arelative;
  width: 30px;
  margin-left: 30px;
  margin-top:20px;
  border-radius:15% 15% 15% 15% ;
}
.pad::after {
  background: #1c1c1d;
  content: "";
  height: 30px;
  left: -30px;
  position: relative;
  top: 30px;
  width: 90px;
  border-radius:15% 15% 15% 15% ;
}

.pad1{
  background-color: #1c1c1d;
  width: 30px;
  height: 30px;
  position: absolute;
  border-radius:15% 15% 0% 0%;
}

.pad2{
  background-color: #1c1c1d;
  width: 30px;
  height: 30px;
  position: absolute;
  margin-left: -30px;
  margin-top: 30px;
  border-radius:15% 0% 0% 15%;
}

.pad3{
  background-color: #1c1c1d;
  width: 30px;
  height: 30px;
  position: absolute;
  margin-top: 60px;
  border-radius:0% 0% 15% 15%;
}

.pad4{
  background-color: #1c1c1d;
  width: 30px;
  height: 30px;
  position: absolute;
  margin-top: 30px;
  margin-left: 30px;
  border-radius:0% 15% 15% 0%;
}



#paralelograma {
	width: 225px;
	height: 50px;
	-webkit-transform: skew(-45deg);
	   -moz-transform: skew(-45deg);
	     -o-transform: skew(-45deg);
       position: absolute;
	background: rgb(238, 38, 38);
  box-shadow: 6px 5px 0px 1px  rgb(141, 33, 33);
  border-radius: 7% 3% 3% 7%;
  margin-top: 65px;
  margin-left: 21px;
}

#paralelograma2 {
	width: 50px;
	height: 50px;
	-webkit-transform: skew(-45deg);
	   -moz-transform: skew(-45deg);
	     -o-transform: skew(-45deg);
       position: absolute;
	background: rgb(238, 38, 38);
  box-shadow: -2px -2px 0px 0px  rgb(10, 10, 10);
  border-radius: 7% 3% 3% 7%;
  margin-top: 79px;
  margin-left: 250px;
}

#paralelograma3 {
	width: 112px;
	height: 10px;
	-webkit-transform: skew(45deg);
	   -moz-transform: skew(45deg);
	     -o-transform: skew(45deg);
       position: absolute;
	background: rgb(238, 38, 38);
  box-shadow: 0px 4px 0px 0px  rgb(141, 33, 33);
  border-radius: 7% 3% 3% 7%;
  margin-top: 59px;
  margin-left: 262px;
}

#rectangulo{
  width: 50px;
	height: 55px;
  position: absolute;
  background: rgb(238, 38, 38);
  box-shadow: 2px -2px 0px 0px rgb(61, 3, 3);;
  border-radius: 7% 1% 0% 7%;
  margin-top: 79px;
  margin-left: 274px;
}

.borde{
  background-color: rgb(181, 180, 253);
  width: 70px;
  height: 70px;
  position: absolute;
  box-shadow: 1px 1px 0px 1px  rgb(23, 21, 31);
  border-radius: 95%;
  margin-left: 30px;
  margin-top: 20px;
}

#luzaz{  
  background-color: rgb(49, 46, 252);
  width: 62px;
  height: 62px;
  position: absolute;
  box-shadow: 1px 1px 0px 2px  rgb(10, 10, 94);
  border-radius: 95%;
  margin-top: 3px;
  margin-left: 3px;
}


#luzrj{  
  background-color: rgb(209, 18, 5);
  width: 15px;
  height: 15px;
  position: absolute;
  box-shadow: 0px 0px 0px 2px  rgb(19, 5, 5);
  border-radius: 95%;
  margin-left: 115px;
  margin-top: 15px;
}

#luzam{  
  background-color: rgb(214, 165, 4);
  width: 15px;
  height: 15px;
  position: absolute;
  box-shadow: 0px 0px 0px 2px  rgb(37, 35, 7);
  border-radius: 95%;
  margin-left: 145px;
  margin-top: 15px;
}

#luzvd{  
  background-color: rgb(16, 129, 1);
  width: 15px;
  height: 15px;
  position: absolute;
  box-shadow: 0px 0px 0px 2px  rgb(13, 39, 8);
  border-radius: 95%;
  margin-left: 175px;
  margin-top: 15px;
}







.pokedexDer {
  background-color: rgb(172, 31, 31);
  position:absolute;
  float: left;
  width: 335px;
  height: 410px;
  left: 53%;
  border-radius: 0% 5% 5% 0%;
  margin-top: 115px;
  display: flex;
  flex-direction: column;
}

.fondo3 {
  background-color: rgb(238, 38, 38);
  position:absolute;
  width: 325px;
  height: 400px;
  left: 5px;
  top: 3px;
  border-radius: 0% 3% 3% 0%;
  box-shadow: 0px 1px 0px 2px rgb(61, 3, 3);
}

.fondo4 {
  background-color: rgb(238, 38, 38);
  position:absolute;
  width: 300px;
  height: 385px;
  left: 15px;
  margin-top: 7px;
  border-radius: 0% 1% 1% 1%;
  box-shadow: 0px 0px 0px 2px rgb(61, 3, 3);
}

#fondorec{
  width: 60px;
  height: 60px;
  background-color: rgb(172, 31, 31);
  position: absolute;
  margin-left: 0px;
  margin-top: -50px;
}

#rec{
  width: 60px;
  height: 58px;
  background-color: rgb(238, 38, 38);
  position: absolute;
  margin-left: -15px;
  margin-top: -58px;
  box-shadow: -2px -1px 0px 0px rgb(61, 3, 3);;
}




#fondoparalelograma4 {
	width: 75px;
	height: 58px;
	-webkit-transform: skew(45deg);
	   -moz-transform: skew(45deg);
	     -o-transform: skew(45deg);
	background:  rgb(172, 31, 31);
  box-shadow: 0px 0px 0px 0px;
  border-radius: 3% 3% 0% 0%;
  margin-top: -51px;
  margin-left: 33px;
}

#paralelograma4 {
	width: 70px;
	height: 52px;
	-webkit-transform: skew(45deg);
	   -moz-transform: skew(45deg);
	     -o-transform: skew(45deg);
	background: rgb(238, 38, 38);
  box-shadow: 2px -1px 0px 0px;
  border-radius: 3% 3% 0% 0%;
  margin-top: -58px;
  margin-left: 13px;
}

#paralelograma5 {
	width: 61px;
	height: 52px;
	-webkit-transform: skew(45deg);
	   -moz-transform: skew(45deg);
	     -o-transform: skew(45deg);
       position: absolute;
	background: rgb(238, 38, 38);
  box-shadow: 2px -2px 0px 0px  rgb(61, 3, 3);;
  border-radius: 7% 3% 3% 7%;
  margin-top: -45px;
  margin-left: 22px;
}

#rectangulo2{
  width: 55px;
	height: 60px;
  position: absolute;
  background: rgb(238, 38, 38);
  box-shadow: -2px 0px 0px 0px rgb(61, 3, 3);;
  border-radius: 0% 1% 0% 0%;
  margin-top: -45px;
  margin-left: 0px;
}

.pantallaint2{
  background-color: rgb(180, 230, 100);
  position: absolute;
  width: 235px;
  height: 70px;
  top: 35px;
  left: 33px;
  border-radius: 3% 3% 3% 3%;
  box-shadow: -1px -1px 0px 3px rgb(120, 145, 82);
  font-size: 10px;
}

.stats{
  margin-left: 20px;
}

.teclado{
  width: 235px;
  height: 94px;
  position: absolute;
  margin-top: 130px;
  margin-left: 33px;
}

.teclado button{
  background-color: rgb(0, 119, 255);
  width: 47px;
  height: 47px;
  float: left;
  padding: 0px;
  text-align: center;
  font-weight: bold;
  color: white;
  font-size: 10px;
  border-radius: 10%;
}

.pantallaint3{
  background-color: rgb(180, 230, 100);
  position: absolute;
  width: 100px;
  height: 35px;
  top: 320px;
  left: 37px;
  border-radius: 3% 3% 3% 3%;
  box-shadow: -1px -1px 0px 3px rgb(120, 145, 82);
  font-size: 13px;
  text-align: center;
}

#pokeAltura{
  margin-top: 10px;
}

.pantallaint4{
  background-color: rgb(180, 230, 100);
  position: absolute;
  width: 100px;
  height: 35px;
  top: 320px;
  left: 165px;
  border-radius: 3% 3% 3% 3%;
  box-shadow: -1px -1px 0px 3px rgb(120, 145, 82);
  font-size: 13px;
  text-align: center;
}

#pokePeso{
  margin-top: 10px;
}

.botonNegro3{
  position: absolute;
  background-color: rgb(34, 28, 28);
  width: 37px;
  height: 7px;
  margin-left: 95px;
  border-radius: 30%;
  top: 227px;
  margin-left: 180px;
}

.botonNegro4{
  position: absolute;
  background-color: rgb(34, 29, 29);
  width: 37px;
  height: 7px;
  margin-left: 95px;
  border-radius: 30%;
  top: 227px;
  margin-left: 227px;
}

#luzam2{  
  background-color: rgb(214, 165, 4);
  width: 27px;
  height: 27px;
  position: absolute;
  box-shadow: 0px 0px 0px 2px  rgb(37, 35, 7);
  border-radius: 95%;
  margin-left: 230px;
  margin-top: 265px;
}

.brillo4 {
  width: 40%;
  height: 40%;
  border-radius: 100%;
  background-color: white;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -ms-border-radius: 100%;
  -o-border-radius: 100%;
  margin: 3px;
  opacity: .8;
}

.botn{
  width: 90px;
  height: 40px;
  position: absolute;
  margin-top: 253px;
  margin-left: 33px;
}

.botn button{
  background-color: rgb(238, 238, 238);
  width: 45px;
  height: 40px;
  float: left;
  padding: 0px;
  text-align: center;
  font-weight: bold;
  font-size: 10px;
  border-radius: 10%;
}