 * {
   box-sizing: content-box;
   margin: 0;
   padding: 0;
 }

 /* Botones menu encabezado */
 .initial {
   background-color: #06204C;
   height: 6.2em;
   width: 100%;
   display: flex;
 }

 .logo {
   height: 6.313em;
   width: 10.813em;
 }

 .buttonInd {
   margin-left: auto;
   display: flex;
   margin-top: 2%;
   margin-bottom: 2%;
 }

 .menuhome {
   transition-duration: 0.3s;
   cursor: pointer;
   color: white;
   background-color: #f4f4f423;
   border-style: solid;
   border-color: #f4f4f4ef;
   border-radius: 3.125em 0em 0em 3.125em;
   width: 10em;
   font-family: 'Bubblegum Sans';
   font-size: 1.2em;
   font-weight: lighter;
   letter-spacing: 0.1em;
 }

 .menuhome:hover {
   background-color: #2ED1E7;
   box-shadow: 0 1em 1em 0 #9CD9F3, 0 17px 50px 0 #9CD9F3;
 }

 .menuapp {
   background-color: #f4f4f423;
   border-style: solid;
   border-color: #f4f4f4ef;
   color: white;
   width: 10em;
   font-family: 'Bubblegum Sans';
   font-size: 1.2em;
   font-weight: lighter;
   letter-spacing: 0.1em;
 }

 .menuapp:hover {
   background-color: #2ED1E7;
   box-shadow: 0 1em 1em 0 #9CD9F3, 0 17px 50px 0 #9CD9F3;
 }

 .menuj {
   background-color: #f4f4f423;
   border-style: solid;
   border-color: #f4f4f4ef;
   color: white;
   border-radius: 0em 3.125em 3.125em 0em;
   width: 10em;
   margin-right: 0.3em;
   font-family: 'Bubblegum Sans';
   font-size: 1.2em;
   font-weight: lighter;
   letter-spacing: 0.1em;
 }

 .menuj:hover {
   background-color: #2ED1E7;
   box-shadow: 0 1em 1em 0 #9CD9F3, 0 17px 50px 0 #9CD9F3;
 }

 /* primera pantalla */
 .sectionOne {
   background-image: url(imagenes/Fondo.png);
   height: 120vh;
   max-width: 100vw;
   background-repeat: no-repeat;
   overflow: hidden;
   justify-content: center;
   display: flex;
   background-size: cover;
   position: relative;
 }

 .welcome {
   position: absolute;
   top: 3%;
   left: 30%;
   right: 30%;
   font-family: 'Bubblegum Sans';
   line-height: 0.8;
   font-weight: lighter;
   font-size: 4rem;
   text-align: center;
   color: #06204C;
   margin-top: 0.8em;
 }

 .description {
   position: absolute;
   top: 38%;
   left: 30%;
   right: 28%;
   font-family: "Nunito";
   font-size: 1.5em;
   color: #061D2A;
   text-align: center;
   background-color: #96c9de94;
   filter: blur(1.5 rem);
   border-radius: 40px;
   box-shadow: 0 0 20px 8px #96c9de9a;
 }

 /* Botón segunda pantalla */
 .pokeball {
   position: absolute;
   width: 7em;
   height: 7em;
   top: 75%;
   left: 46%;
 }

 /* caja de texto pokebola */
 figcaption {
   top: 65%;
   left: 54%;
   display: none;
   position: absolute;
   text-align: center;
 }

 figure:hover>figcaption {
   display: block;
   height: 5em;
   width: 10em;
   border-radius: 50%;
   box-shadow: 1px 12px 33px rgba(0, 0, 0, 0.5);
   padding: 1.1em;
   background-color: #06204cbe;
   border-color: white;
   border-width: 0.2em;
   border-style: solid;
   color: white;
 }

 /* pie de página */
 .foot {
   margin-left: 1em;
   font-size: 1em;
   font-family: 'Bubblegum Sans';
   color: #06204C;
 }

 .networks {
   display: flex;
   width: 1em;
   height: 2em;
   margin-left: 1em;
 }

 /* Segunda pantalla */
 .sectionTwo {
   background-image: url(imagenes/Fondo2.png);
 }

 .messenger {
   top: 10em;
   left: 76%;
   display: none;
   position: fixed;
   text-align: center;
 }

 figure:hover>.messenger {
   display: block;
   height: 5em;
   width: 10em;
   border-radius: 50%;
   box-shadow: 1px 12px 33px rgba(0, 0, 0, 0.5);
   padding: 1.1em;
   background-color: #06204cbe;
   border-color: white;
   border-width: 0.2em;
   border-style: solid;
   color: white;
 }

 /* Botón estasdistica */
 .statist {
   position: fixed;
   left: 88%;
   width: 9em;
   height: 8em;

 }

 /* Fondo de Tarjetas */
 #card {
   background-image: url(imagenes/imgtarg.png);
   background-size: cover;
   height: 21.2em;
   width: 12em;
   font-family: "Nunito";
   padding: 2em;
   box-shadow: 2px 2px 30px rgb(142, 177, 171);
 }

 /* Contenedor General */
 #rowCard {
   margin-top: 10%;
   display: grid;
   grid-gap: 3em;
   grid-template-columns: repeat(auto-fill, minmax(14em, 1fr));
   margin-right: 6em;
   margin-left: 4em;
 }

 .welcome {
   position: absolute;
   top: 3%;
   left: 30%;
   right: 30%;
   font-family: 'Bubblegum Sans';
   line-height: 0.8;
   font-weight: lighter;
   font-size: 4rem;
   text-align: center;
   color: #06204C;
   margin-top: 0.8em;
 }

 .description {
   position: absolute;
   top: 38%;
   left: 28%;
   right: 26%;
   font-family: "Nunito";
   font-size: 1.5em;
   color: #061D2A;
   text-align: center;
   background-color: #96c9de94;
   filter: blur(1.5 rem);
   border-radius: 40px;
   box-shadow: 0 0 20px 8px #96c9de9a;
 }


 .foot {
   margin-left: 1em;
   font-size: 1em;
   font-family: 'Bubblegum Sans';
   color: #06204C;
 }

 .networks {
   display: flex;
   width: 1em;
   height: 2em;
   margin-left: 1em;
 }

 .pokeball {
   position: absolute;
   top: 75%;
   left: 46%;
   height: 7em;
   width: 7em;
 }

 .position1 {
   display: grid;
   justify-content: flex-start;
   margin-top: 3%;
   margin-left: 40%;
 }

 .position2 {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(18em, 1fr));
   margin-top: 3%;
   justify-content: space-evenly;
   margin-left: 25%;
 }

 .list {
   font-family: 'Nunito';
   font-size: 1.5rem;
   text-align: center;
   color: #06204C;
   justify-content: center;
   padding-top: 2em;
 }

 /* Menu Desplegable */
 #type {
   height: 2em;
   width: 20vw;
   border-radius: 0.4em;
   font-family: 'Bubblegum Sans';
   padding-left: 0.5em;
   font-size: 1em;
   background-color: #06204c3d;
 }

 #colum {
   height: 2em;
   width: 20vw;
   border-radius: 0.4em;
   font-size: 1em;
   font-family: 'Bubblegum Sans';
   padding-left: 0.5em;
   background-color: #06204c3d;
 }


 #alfabet {
   height: 2em;
   width: 20vw;
   border-radius: 0.4em;
   font-size: 1em;
   font-family: 'Bubblegum Sans';
   padding-left: 0.5em;
   background-color: #06204c3d;
 }

 #nametClass {
   font-family: 'Bubblegum Sans';
   text-align: center;
   margin-top: 0.2em;
   font-size: 1.5em;
 }

 #imagClass {
   margin-left: 2.2em;
   padding: 0em;
   box-sizing: border-box;
   margin-top: 0em;
   height: 7.2em;
 }

 #numberClass {
   font-family: 'Bubblegum Sans';
   text-align: center;
   margin-top: 0.1em;
   font-size: 1.5em;
 }

 #weakClass {
   margin-top: 0.5em;
   width: 9em;
   height: auto;
   font-family: 'Patrick Hand';
   font-size: 1em;
   font-weight: 500;
   text-align: left;
 }

 #typeText {
   margin-top: 0em;
 }

 #typesClass {
   width: 2em;
   height: 2em;
   margin-top: 0em;
 }

 #resistClass {
   width: 1.8em;
   height: 1.8em;
 }

 #resisTextClass {
   font-family: 'Patrick Hand';
   font-size: 1em;
   font-weight: lighter;
   text-align: left;
   align-items: baseline;
 }

 /*Estilo de modal grafica*/
 .myModal {
   position: fixed;
   z-index: 1;
   top: 1.5em;
   bottom: 4em;
   width: 80%;
   height: 92%;
   margin-left: 2em;
   margin-right: 2em;
   background-color: rgba(252, 252, 252, 0.918);
   box-shadow: 0 0 20px 8px #5061689a;
   border-style: solid;
   border-width: 0.3em;
   border-radius: 0.5em;
   border-color: #06204cee;
   font-weight: bolder;
 }

 .contModal {
   margin: 2em;
   padding: 0.2em;
   width: 80%;
   height: 90%;
 }

 #myGraph {
   width: 80%;
   margin-left: 4em;
 }

 #xModal {
   margin: 0em;
   margin-left: 95%;
   font-size: 3em;
   cursor: pointer;
 }

 @media only screen and (min-width: 550px) and (max-width: 800px) {
   .buttonInd {
     display: grid;
     grid-row-gap: 0.2em;
     margin-top: 0.5em;
   }

   .menuhome {
     width: 10.5em;
     border-radius: 3.125em 3.125em 3.125em 3.125em;
   }

   .menuapp {
     width: 10.5em;
     border-radius: 3.125em 3.125em 3.125em 3.125em;
   }

   .menuj {
     width: 10.5em;
     border-radius: 3.125em 3.125em 3.125em 3.125em;
   }

   .description {
     font-size: 1.4em;
     left: 24%;
     right: 22%;
   }

   .pokeball {
     left: 42%;
     height: 6em;
     width: 6em;
   }
 }

 @media only screen and (min-width: 350px) and (max-width: 549px) {
   .sectionOne {
     background-image: url(imagenes/FondoMovil.webp);
   }

   .buttonInd {
     display: grid;
     grid-row-gap: 0.1em;
     margin-top: 0.5em;
   }

   .menuhome {
     width: 8.5em;
     border-radius: 3.125em 3.125em 3.125em 3.125em;
     font-size: 1.1em;
   }

   .menuapp {
     width: 8.5em;
     border-radius: 3.125em 3.125em 3.125em 3.125em;
     font-size: 1.1em;
   }

   .menuj {
     width: 8.5em;
     border-radius: 3.125em 3.125em 3.125em 3.125em;
     font-size: 1.1em;
   }

   .logo {
     height: 6em;
     width: 9em;
   }

   .welcome {
     font-size: 3rem;
     left: 20%;
     right: 20%;
   }

   .description {
     font-size: 1.4em;
     left: 20%;
     right: 18%;
     top: 27%;
   }

   .pokeball {
     left: 42%;
     height: 6em;
     width: 6em;
   }
 }

 @media only screen and (min-width: 250px) and (max-width: 350px) {
   .sectionOne {
     background-image: url(imagenes/FondoMovil.webp);
   }

   .buttonInd {
     display: grid;
     grid-row-gap: 0.1em;
     margin-top: 0.2em;
   }

   .menuhome {
     width: 8.5em;
     border-radius: 3.125em 3.125em 3.125em 3.125em;
     font-size: 0.7em;
   }

   .menuapp {
     width: 8.5em;
     border-radius: 3.125em 3.125em 3.125em 3.125em;
     font-size: 0.7em;
   }

   .menuj {
     width: 8.5em;
     border-radius: 3.125em 3.125em 3.125em 3.125em;
     font-size: 0.7em;
   }

   .logo {
     height: 5em;
     width: 7em;
   }

   .welcome {
     font-size: 2.8rem;
     left: 14%;
     right: 14%;
   }

   .description {
     font-size: 1.2em;
     left: 20%;
     right: 18%;
     top: 27%;
   }

   .pokeball {
     left: 36%;
     height: 6em;
     width: 6em;
   }
 }

 @media only screen and (min-width: 550px) and (max-width: 820px) {
   .list {
     font-size: 1.3rem;
     margin: 2em;
   }

   .position1 {
     margin-left: 28%;
     width: 20em;
   }

   #type {
     width: 34vw;
   }

   .position2 {
     margin-left: 28%;
     width: 20em;
     grid-row-gap: 1em;
   }

   #colum {
     width: 32vw;
   }

   #alfabet {
     width: 30vw;
   }

   #rowCard {
     margin-left: 6em;
     margin-right: 4em;
   }

   .statist {
     left: 82%;
     width: 11em;
     height: 10em;
   }
 }

 @media only screen and (min-width: 360px) and (max-width: 550px) {
   .list {
     font-size: 1.2rem;
     margin: 0.5em;
   }

   .position1 {
     margin-left: 22%;
     width: 10em;
   }

   #type {
     width: 34vw;
     font-size: 0.8em;
   }

   .position2 {
     margin-left: 28%;
     width: 15em;
     grid-row-gap: 1em;
   }

   #colum {
     width: 32vw;
     font-size: 0.8em;
   }

   #alfabet {
     width: 30vw;
     font-size: 0.8em;
   }

   #rowCard {
     margin-left: 2em;
   }

   .statist {
     left: 60%;
     width: 9em;
     height: 9em;
   }

   .myModal {
     top: 2em;
     height: 64%;
     margin-left: 1em;
     margin-right: 1em;
   }

   #myGraph {
     margin-left: 1em;
   }

   .messenger {
     left: 54%;
   }

   figure:hover>.messenger {
     top: 40%;
     height: 6em;
     font-size: 0.5em;

   }
 }

 @media only screen and (min-width: 250px) and (max-width: 360px) {
   .list {
     font-size: 1.1rem;
   }

   .position1 {
     margin-left: 10%;
     width: 6em;
   }

   #type {
     width: 38vw;
     font-size: 0.8em;
   }

   .position2 {
     margin-left: 11%;
     width: 4em;
     grid-row-gap: 1em;
   }

   #colum {
     width: 38vw;
     font-size: 0.8em;
     margin-left: 8em;
   }

   #alfabet {
     width: 38vw;
     font-size: 0.8em;
     margin-left: 8em;
   }

   #rowCard {
     margin-left: 0.3em;
   }

   #card {
     height: 19.5em;
     width: 11em;
   }

   .statist {
     left: 55%;
     width: 9em;
     height: 9em;
   }

   .myModal {
     top: 1em;
     height: 50%;
     margin-left: 0em;
     margin-right: 0em;
   }

   #myGraph {
     margin-left: 0em;
   }

   .contModal {
     margin: 0.1em;
     width: 90%;
     height: 100%;
   }

   .messenger {
     left: 50%;
   }

   figure:hover>.messenger {
     top: 35%;
     height: 5em;
     font-size: 0.4em;
   }
 }
