html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(70, 104, 31);
  background-image: url(../../ressources/tp_pokemon/pr_api.jpg);
  background-repeat: repeat-y;
  background-size: cover;
}

main {
  height: 100%;
  text-align: center;
  padding-top: 3vh;
}

/* formulaire */
.formSubmit {
  height: 10%;
  margin-top: 4.5vh;
}

/* input */
.poke {
  text-align: center;
  border-radius: 2em;
  height: 3em;
  width: 30%;
  border-style: none;
  border: 0.5px solid black;
  background-color: rgb(204, 168, 168);
}

#suggestions {
  width: 100%;
  height: 2vh;
}

/* div avec l'affichage des données */

.view {
  text-align: center;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* la div dans le js */

.carte {
  width: 80%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: rgba(198, 232, 132, 0.775);
  border-radius: 0.3em;
}

section {
  width: 70%;
  border: 0.5px solid black;
  border-radius: 0.3em;
  box-shadow: 3px 4px 7px 1px #363636cc;
  margin: 3vh 1vh;
  padding: 1vh;
  background-color: #dbd1b2ce;
}

.row {
  width: 100%;
  display: flex;
  flex-direction: row;
}

.left,
.right {
  width: 100%;
  justify-content: center;
  justify-items: center;
}

.default {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: center;
  justify-items: center;
}

/* le visuel devant et derrière du pokémon*/

.imgPoke {
  width: 50%;
}

h2 {
  text-transform: uppercase;
  text-shadow: #ffffff 1px 1px, #ffffff -1px 1px, #ffffff -1px -1px,
    #ffffff 1px -1px;
}