html,body{
     margin:0px;
     font-family: 'Lato', sans-serif;
     background-color: #d7ffd7;
     scroll-behavior: smooth;
   }
   header {
     position: relative;
     grid-column: span 12;
  grid-row: span 1;

  background-image: url(./images/pokemon.png);

  /* Full height */
  height: 100vh;

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  margin: 0px;
  z-index: 21;
  opacity: .95;
   }
   figure{
     margin:0px;
   }
   nav{
   height: 62px;
   /* background-color: #fafafb00; */
   position: fixed;
   width: 100%;
   top: 0;
   z-index: 30;
 }

.nav-colored { background-color:rgb(155, 30, 30); }
.nav-transparent { background-color:transparent;}
 .pokedex{
 background-color:white;
 border-style: outset;
 border-radius: 12px;
 color: #1b1a1ac2;
 margin: 2.5%;
 width: 11%;
 text-align: center;
 font-size: 1vw;
 display: inline-block;
 }
 .button-filter{
 display: none;
   }
   .pokepedia{
   /* padding-left: 36%; */
   padding-top: 80px;
   padding-bottom: 80px;
   margin-top: 20px;
   /* position: relative; */
     width: 450px;

 }
 .pedia-kanto{
    margin: 0px;
    width: 20%;
    margin-top: .7em;
    position: absolute;
    background-color: #fafafb00;
    border: none;
 }
 .tipoP{
   border-radius: 12px;
   border-style: solid;
   color: white;
   font-size: .9vw;
   width: 100%;
 }
 .style-filter{
    /* z-index: 20;
   float: left;
   width: 20%;
   height: 43em;
   position: relative;
   padding-top: 21px;
   margin-top: -110px; */
   /* color: #d5e0d5; */
   /* margin-left: 0%; */
   /* background-color: #eff7ef; */
   /* overflow:auto;  */

   /* top: 60px;
   position: fixed;
   z-index: 50; */
   display: none;
 }
 .style-font{
   font-family: 'Lato', sans-serif;
   color: #000000ad;
   font-size: 1.5vw;
 }
 .style-button{
  background-size: cover; 
  /* background-position: center; */
  border: 0;
  /* font-size: 1vw; */
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
  /* margin-top: 10px; */
  /* height: 6.5em; */
  /* width: 28%; */
  /* margin-bottom: 10px; */
  background-color: #eff7ef00;
  /* margin-left: 3%; */
  color: black;
  padding:0px!important;
     }

 .style-button:focus{
      outline: none;

     }
.style-water{
     background-image: url(./images/water.png);
}
.style-bug{
     background-image: url(./images/bug.png);
}
.style-fire{
     background-image: url(./images/fire.png);
}
.style-grass{
     background-image: url(./images/grass.png);
}
.style-ground{
     background-image: url(./images/ground.png);
}
.style-rock{
     background-image: url(./images/roca.png);
}
.style-steel{
     background-image: url(./images/steel.png);
}
.style-ice{
     background-image: url(./images/ice.png);
}
.style-electric{
     background-image: url(./images/electric.png);
}
.style-dragon{
     background-image: url(./images/dragon.png);
}
.style-ghost{
     background-image: url(./images/ghost.png);
}
.style-psychic{
     background-image: url(./images/psychic.png);
}
.style-normal{
     background-image: url(./images/normal.png);
}
.style-fighting{
     background-image: url(./images/fighting.png);
}
.style-poison{
     background-image: url(./images/poison.png);
}
.style-flying{
     background-image: url(./images/flying.png);
}
.style-dark{
     background-image: url(./images/dark.png);
}
.style-fairy{
     background-image: url(./images/fairy.png);
}

 .style-button:hover{
  /* opacity: .6; */
  -webkit-transform:scale(1.25);
-moz-transform:scale(1.25);
-ms-transform:scale(1.25);
-o-transform:scale(1.25);
transform:scale(1.25);
 }
 .pokedex:hover{
   background-color: #7d7b7b52
 }
 .browser{
       /*position: absolute;*/
       height: 2.5em;
       width: 300px;
       z-index: 22;
       /* margin-left: 30%; */
       border-radius: 8px;
       border-style: inset;
       margin-top: 12px;
       color: gray;
       padding-left: 2.5%;
       margin-right: 2%;
       float:right;

   }
   div h1{
         margin-top:.5em;
         margin-bottom: 0px;
         font-size: 1vw;
       }
       div p{
         margin-top:0px;
         margin-bottom: 2px;
       }
       div img{
         width: 95%;
       }
       .color-background{
         background-color: #d7ffd7;
       }
       .return{
         /* margin-left: 23% */
     }
     .button-login{
           height: 62px;
           background-color: #fafafb;
           color: gray;
           margin-left: 85%;
           border-style: none;
           position: absolute;
           font-size: 1.2vw;
           width: 15%;
           z-index: 40;
           display: table;
           position: relative;
           top: -76%;
       }
       .button-register{

       background-color: #fafafb;
           color: gray;
           margin-left: 70%;
           border-style: none;
           position: relative;
           font-size: 1.2vw;
           width: 15%;
           top: -110px;
           display: flex;
           height: 62px;
           padding-left: 4%;
       }
       /*clases modales*/
       .imgpokemon{
        width: 80%;
        margin: 5%;
        background-color: #78c84f05;
        border-radius: 12px;
        padding-left: 13%;
        padding-right: 13%;
        padding-bottom: 5%;
        padding-top: 5%;
       }

       .modalWidth{
        width: 100%;
        text-align: center;
        background-color: #78c84f00;
        border-radius: 10px;

       }
       .Water{
         background-color:#6890f0
       }
       .Electric{
        background-color:#f8d030
       }
       .Fire{
        background-color:#f07f2f
       }
       .Grass{
        background-color:#78c84f
       }
    .Normal{
      background-color:#a9a878
      }
       .Poison{
        background-color:#a040a1
       }
       .Rock{
        background-color:#b7a038
       }
       .Ground{
        background-color: #e0c069
       }
       .Ice{
        background-color:#98d8d8
       }
       .Fighting{
        background-color:#c03028
       }
       .Flying{
        background-color: #a890f0
       }
       .Psychic{
        background-color:#a890f0
       }
       .Bug{
        background-color:#a8b821
       }
       .Ghost{
        background-color:#705798
       }
       .Dragon{
        background-color:#7038f9
       }
       .Dark{
        background-color:#6f5848
       }
       .Steel{
        background-color:#b8b8d0
       }
       .Fairy{
        background-color:#f7c9e3
       }
       .White{
         background-color:white;
       }
       .btnn{
    padding: 6px 12px;
    margin-bottom: 0;
    font-weight: 400;
    line-height: 1.42857143;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
       }
       .modalMargin{
        margin-left: 40%;
        margin-top: 10em;
        width: 25%;
       }
      .weaknesses{
        background-color: #000000b8;
        color: white;
        font-size: 1.2vw;
        width: 44%;
        text-align:center;

      }
      .section-type{
        padding-top: 5%;
        padding-bottom: 3%;
        border-radius: 10px;
      }

      .table-type{
        width: 80%;
        margin-left: 10%;
        padding-top: 10px;
      }

   nav i{
    color: gray;
      position: absolute;
      margin-top: 22px;
      margin-left: 31%;
    }
    .modal-title{
      color: white;
    }
    .modal-body{
      padding: 1px;


    }
    .modal-header{
      border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    }

   footer {
   display: none;
 }
 .order-a{
   background-color:yellow;
 }
 .order-z{
  background-color:#0000ffa1;

 }
 .prom{
   background-image: url(https://cdn5.dibujos.net/dibujos/pintados/201606/bombilla-la-casa-el-salon-10423275.jpg)
 }
 nav p{
   margin-left: 5%;
   color: black;
 }
 h4{
   font-size: 2vw;
   color: #000000db;
 }
 .modal-backdrop-in{
   opacity: 0.7;

}

.close{
     padding: 0px!important;
     margin: 0px!important;
}


.modal-dialog {
  max-width: 300px!important;

}

.img-down{
    float: right;
    margin: 10px; 
    margin-top:150px;
}

@media screen and (max-width: 1125px){
  .img-down{ 
    margin-top: 62px;
  }
}
   @media screen and (max-width: 680px) {
     body{
       margin: 0;
       padding: 0;
     }
     header {
       display: none;
       height: 55em;
       width: 100%;
       position: absolute;
       z-index: 60;
     }
   nav{
       background-color: #ffffff;
       width: 100%;
       height: 4em;
       border-bottom: 2px solid rgb(184, 184, 184);
       position: fixed;
       top: 0;
       z-index: 11;
   }
   .container-browser{
       margin-top: 30px;
       margin-bottom: 31px;
       margin-left: 3em;
       z-index: 5;
       position: relative;
   }
   .container-buttonfilter{
     float: right;
     margin-right: 1em;
     margin-top: -4em;
     width: 4em;
     z-index: 35;
     position: relative;
     top: 39em;
   }
   .button-filter{
    display: inline;
    background-image: url(./images/menu.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 30px;
    width: 2.5em;
    margin-left: 1%;
    position: relative;
    z-index: 40;
    top: 13px;
    border-radius: 5px;
    background-color: white;
    border: none;
    float: right;
     }
     .browser{
      border-radius: 7px;
      height: 2em;
      width: 58%;
      margin-left: 27%;
      margin-top: 12px;
      padding-left: 5%;

   }
   i{
    margin-top: 20px;
    margin-left: 28%;
   }
     footer {
       background-color: #FFFFFF;
       height: 61px;
       position: fixed;
       bottom: 0;
       border-top: 2px solid rgb(184, 184, 184);
       width: 100%;
       height: 4em;
       z-index: 10;
     }
     .pokedex{
      background-color: white;
      border-style: outset;
      border-radius: 12px;
      color: gray;
      margin: 1%;
      width: 30%;
      text-align: center;
      font-size: 3.5vw;
      display: inline-block;
      height: 12em;
     }
   .position-filter{
    display: none;
   }
   .mostrar{
     display: block;
   }
   .style-filter{

    z-index: 9;
    color: #d5e0d5;
    float: right;
    width: 49%;
    margin-top: 63px;
    background-color: #eff7ef;
    height: 43em;
    position: fixed;
    padding-top: 8px;
    left: 51%;
    overflow: scroll;
    
   }
   .containerMenu{
     height: 25px;
       width: 20%;
       display: grid;
       grid-column-start: 3;
       grid-row-start: 1;
       z-index: 40;
       padding-left: 19em;
   }
   .container-filters{
         display: grid;
         width: 80%;
         height: 51%;
         text-align: center;
         margin-left: 10%;
         padding-top: 10em;
   }

   .style-button{
    outline: none;
    border: 0;
    text-align: center;
    font-size: 2vw;
    padding-top: 1.4em;
    border-radius: 1em;
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
    margin-top: 1px;
    height: 10em;
    width: 33%;
    margin-bottom: 21px;
    padding-bottom: 10%;
    cursor: pointer;
    margin-left: 11%;
    
   }
   .style-button:hover{
     background-color: rgb(239, 247, 239);
     color: rgb(1, 1, 1);
     -webkit-transform:scale(1.02);
     -moz-transform:scale(1.02);
     -ms-transform:scale(1.02);
     -o-transform:scale(1.02);
     transform:scale(1.02);
     opacity: .6;
   }
     .return{
       margin-left: 0;
       display: inline;
       position: absolute;
       z-index: 5;
       padding-top: 4em;
       width: 100%;
     }
     .color-background{
       background-color: #d7ffd7;
     }
     .button-login{
       display: none;
     }
     .button-register{
       display: none;
     }
     .tipoP{
     border-radius: 12px;
     border-style: solid;
     color: white;
     font-size: 2.8vw;
   }
figure{
   position: relative;
   top: 43em;
   width: 55em;
   left: 27%;
}
.pedia-kanto{
  background-image: url(https://fontmeme.com/permalink/190215/43106cf0497ff771e5229c84ee101b79.png);
  width: 10%;
  margin-top: -42em;
  position: absolute;
  height: 2em;
  background-color: #fafafb;
  border: none;
    padding-left: 10%;
    margin-left: -11%;

}
.modalMargin{
  margin-left: 20%;
  margin-top: 11em;
  width: 60%;
}
footer{
  display: block;
  position: fixed;
    z-index: 50;
}
footer i{
  margin-top: 14px;
    margin-left: 46%;
    font-size: 7vw;
    color: #000000fa;
}
.modal-backdrop{
  display:none

}
nav i{
  margin-left: 28%;
  margin-top: 19px;
}
.weaknesses{
  font-size: 3.5vw
}
h4{
  font-size: 6vw;
}
.imgpokemon{
  background-color: white;


}
.pokepedia{
  padding-left: 0%;
  margin-top: -450px;
  position: fixed;
  width: 70%;
  margin-left: -14%;
}
.p-welcome{
  margin-top: 8em;
    padding: 15%;
    font-size: 7vw;
    color: white;
    text-align: center;
    font-weight: 800;
    padding-top: 15%;
    font-style: italic;

}
.style-font{
  font-size: 5vw
}
.modal-dialog {
  max-width: none!important;
}

 }