.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}
.modal.normal .modal-content {
  background-color: #a6a877;
}

.modal.grass .modal-content {
  background-color: #77c850;
}

.modal.fire .modal-content {
  background-color: #ee7f30;
}

.modal.water .modal-content {
  background-color: #678fee;
}

.modal.electric .modal-content {
  background-color: #f7cf2e;
}

.modal.ice .modal-content {
  background-color: #98d5d7;
}

.modal.ground .modal-content {
  background-color: #dfbf69;
}

.modal.flying .modal-content {
  background-color: #a98ff0;
}

.modal.poison .modal-content {
  background-color: #a040a0;
}

.modal.fighting .modal-content {
  background-color: #bf3029;
}

.modal.psychic .modal-content {
  background-color: #f65687;
}

.modal.dark .modal-content {
  background-color: #725847;
}

.modal.rock .modal-content {
  background-color: #b8a137;
}

.modal.bug .modal-content {
  background-color: #a8b720;
}

.modal.ghost .modal-content {
  background-color: #6e5896;
}

.modal.steel .modal-content {
  background-color: #b9b7cf;
}

.modal.dragon .modal-content {
  background-color: #6f38f6;
}

.modal.fairy .modal-content {
  background-color: #f9aec7;
}

.modal-content {
  background-color: #fff;
  padding: 2rem;
  border-radius: 1rem;
  width: 80%;
  max-width: 400px;
  text-align: center;
  position: relative;
  text-transform: capitalize;
}

.close-button {
  position: absolute;
  top: 10px;
  right: 20px;
  font-size: 1.5rem;
  color: #333;
  cursor: pointer;
}

.modal .type {
  border-radius: 0.5rem;
  padding: 0.25rem;
}

.modal ul {
  display: list-item;
  list-style: none;
  text-align: left;
  padding-left: 5.5rem;
}

.hidden {
  display: none;
}