*,
*::before,
*::after {box-sizing: border-box;
padding: 0;
margin: 0;}

body {color: #C3CBD6;
background-color: #2A403D;
display: flex;
flex-direction: column;
text-align: center;
align-items: center;
font-family: sans-serif;
height: 100%;
}

h1 {margin: 2rem;
padding: 1rem;
background-color: #4f5250;
border-radius: 5%;
border: 0.5rem solid #C3CBD6;}

#pokedex {background-color: #4f5250;
padding: 1rem;
border-radius: 5%;
border: 0.5rem solid #C3CBD6;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;}

p {margin: 0.5rem;}

input {height: 1.5rem;
margin: 0.5rem;}

button {height: 1.5rem;
width: 4rem;
margin: 0.5rem;
border-radius: 5%;
font-family: sans-serif;
border: none;}

button:hover {cursor: pointer;}

#bio {
margin: 0.5rem;
display: flex;
flex-direction: column;
gap: 10px;
text-align: left;
background-color: #585c59;
border-radius: 5%;
}

.row {display: flex;
      gap: 10px;
      align-items: left;
      justify-content: left;}

#pic {display: flex;
align-items: center;
justify-content: center;}

#sprite {
  width: 12rem;
}

span {margin-right: 0.5rem;
padding: 0.5rem;
border-radius: 10%;}

#types {color: black;}

#stats {display: flex;
justify-content: center;}

th, td {padding: 0.5rem;
border-radius: 5%;
border: 1px solid #C3CBD6;
}

#random-button {min-width: 150px;
width: 10rem;}

/* type Background */

.normal {
  background-color: #b7b7aa;
}

.fire {
  background-color: #ff6f52;
}

.water {
  background-color: #42a1ff;
}

.electric {
  background-color: #fecc33;
}

.grass {
  background-color: #78cc55;
}

.ice {
  background-color: #66ccfe;
}

.fighting {
  background-color: #d3887e;
}

.poison {
  background-color: #c68bb7;
}

.ground {
  background-color: #dfba52;
}

.flying {
  background-color: #8899ff;
}

.psychic {
  background-color: #ff66a3;
}

.bug {
  background-color: #aabb23;
}

.rock {
  background-color: #baaa66;
}

.ghost {
  background-color: #9995d0;
}

.dragon {
  background-color: #9e93f1;
}

.dark {
  background-color: #b59682;
}

.steel {
  background-color: #abaabb;
}

.fairy {
  background-color: #ed99ed;
}