.container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.title {
  width: 70%;
}

@media screen and (min-width: 576px) {
  .title {
    width: 396px;
  }
}
body {
  margin: 0;
  padding: 0;
  background-image: url("https://thumbs.gfycat.com/HugeVengefulAmericanbittern-max-1mb.gif");
  font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
  background-attachment: fixed;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

.divSearch {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-top: 50px;
  position: -webkit-sticky;
  position: sticky;
  top: 20px;
  z-index: 10;
}

#search {
  width: 300px;
  height: 30px;
  border-radius: 10px;
  border: 0;
  text-align: center;
  box-shadow: -5px 5px 20px;
}

#search:focus {
  outline: none;
  box-shadow: -5px 5px 30px;
}

#pokedex {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding-top: 0;
  padding: 30px;
  list-style: none;
}

.card {
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  text-align: center;
  position: relative;
  background: radial-gradient(circle at top left, #fdbb2d, #22c1c3);
  padding: 5px;
  margin: 0;
  margin-right: 25px;
  margin-left: 25px;
  margin-bottom: 40px;
  border-radius: 20px;
  height: 265px;
  border: solid whitesmoke 5px;
  cursor: pointer;
  box-shadow: -5px 5px 10px rgb(0, 0, 0);
  width: 250px;
  height: 350px;
}

.cardCont {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  text-align: center;
}

.backCont {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 20px;
  width: 100%;
}

.card:hover .imgFront {
  top: -20px;
}

.ability::first-letter {
  text-transform: uppercase;
}

.type::first-letter {
  text-transform: uppercase;
}

.pokeTitle {
  font-size: 25px;
  color: whitesmoke;
  border-radius: 5px;
}

.pokeTitle::first-letter {
  text-transform: uppercase;
}

.imgFront {
  width: 100%;
  filter: drop-shadow(-5px 5px 10px rgb(0, 0, 0));
  position: relative;
  top: 0;
  transition: top ease 300ms;
}

.imgBack {
  display: flex;
}

.contImg {
  width: 180px;
  height: 180px;
  display: flex;
}

.typeCont {
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  width: 80%;
}

.typeTitle {
  font-size: 25px;
  color: #A4E04F;
  font-weight: 1000;
}

.type {
  font-weight: 500;
}

.abiTitle {
  font-size: 25px;
  color: #A4E04F;
  font-weight: 1000;
}

.ability {
  font-weight: 500;
}

.id {
  background-color: #A4E04F;
  border-radius: 2px;
}

.height {
  font-style: italic;
}

.weight {
  font-style: italic;
}/*# sourceMappingURL=style.css.map */