html {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 500;
}

body {
  margin: 0;
  background: black;
}

.container-bg {
  margin: 0 auto;
  max-width: 420px;
  min-width: 275px;
  background-image: url("img/pokeball.png");
  background-repeat: no-repeat;
  background-position: 98% 36%;
  background-size: 180px;
}

.container {
  min-height: 740px;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.card-face {
  color: whitesmoke;
  padding: 40px 40px 0;
  display: flex;
  align-items: center;
}

.card-face section {
  margin: 0;
  padding: 0;
  display: flex;
  width: 90%;
  flex-direction: column;
}

button {
  background: white;
  border: none;
  color: white;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 600;
  line-height: 60px;
  width: 100%;
  margin: 0;
  padding: 0;
}

button:hover {
  cursor: pointer;
}

.card-face div {
  display: flex;
  margin: 0;
  padding: 0;
}

.card-face div p {
  padding: 8px 22px;
  margin-right: 7px;
  margin-bottom: 0;
  /* background: rgb(138, 138, 138); */
  border-radius: 100px;
  font-weight: 600;
  font-size: 14px;
}

.card-face div p::first-letter {
  text-transform: capitalize;
}

.card-face h1 {
  margin: 0;
  font-size: 35px;
  font-weight: 700;
}

.card-face h1::first-letter {
  text-transform: uppercase;
}

.card-face img {
  width: 250px;
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  top: 180px;
  left: 0;
  right: 60px;
}

.text-area {
  max-width: 100%;
  height: 350px;
  background: whitesmoke;
  border-radius: 40px 40px 0 0;
}

.text-area * {
  max-width: 80%;
  margin: 10px auto;
}

.text-area h2 {
  margin-top: 30px;
  font-size: 15px;
  color: rgb(119, 119, 119);
}

.text-area p {
  padding-left: 15px;
}

.grass {
  background: rgb(97, 194, 126);
}

.fire {
  background: rgb(218, 114, 114);
}

.water {
  background: rgb(103, 174, 231);
}

.normal {
  background: rgb(180, 185, 153);
}

.flying {
  background: rgb(39, 152, 156);
}

.bug {
  background: rgb(155, 194, 104);
}

.poison {
  background: rgb(187, 93, 187);
}

.electric {
  background: rgb(212, 212, 107);
}

.ground {
  background: rgb(196, 196, 115);
}

.fighting {
  background: rgb(184, 109, 109);
}

.psychic {
  background: rgb(221, 131, 146);
}

.rock {
  background: rgb(136, 125, 110);
}

.ice {
  background: rgb(58, 143, 143);
}

.ghost {
  background: rgb(109, 87, 109);
}

.dragon {
  background: rgb(102, 77, 161);
}

.dark {
  background: rgb(51, 48, 45);
}

.steel {
  background: rgb(100, 99, 98);
}

.fairy {
  background: rgb(236, 167, 179);
}

#grass {
  background: rgba(64, 187, 101, 0.85);
}

#fire {
  background: rgb(221, 65, 65, 0.85);
}

#water {
  background: rgb(57, 154, 233, 0.85);
}

#normal {
  background: rgb(171, 179, 135, 0.85);
}

#flying {
  background: rgb(39, 152, 156, 0.85);
}

#bug {
  background: rgb(143, 196, 74, 0.85);
}

#poison {
  background: rgba(128, 0, 128, 0.63);
}

#electric {
  background: rgb(201, 201, 53, 0.85);
}

#ground {
  background: rgb(173, 173, 75, 0.85);
}

#fighting {
  background: rgb(160, 61, 61, 0.85);
}

#psychic {
  background: rgb(219, 82, 105, 0.85);
}

#rock {
  background: rgb(94, 80, 60, 0.85);
}

#ice {
  background: rgb(5, 105, 105, 0.85);
}

#ghost {
  background: rgb(70, 42, 70, 0.85);
}

#dragon {
  background: rgb(65, 36, 133, 0.85);
}

#dark {
  background: rgb(51, 48, 45, 0.85);
}

#steel {
  background: rgb(100, 99, 98, 0.85);
}

#fairy {
  background: rgb(238, 133, 150, 0.85);
}