@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap");

.card-container {
  width: 20rem;
  height: 28rem;
  padding: 0rem 0.5rem;

  overflow: hidden;
  --type-color-transparent: rgba(255, 255, 255, 0.489);
  background: linear-gradient(
      var(--type-color-transparent),
      var(--type-color-transparent)
    ),
    url(https://static.vecteezy.com/system/resources/thumbnails/004/837/100/small/grey-watercolor-paper-or-concrete-grunge-background-vector.jpg);
  background-size: 20rem;
  border: solid rgb(228, 199, 9) 1rem;
  border-radius: 1rem;
  color: black;
  font-family: "Lato", sans-serif;

  display: flex;
  flex-direction: column;
}

.card-header-container {
  width: 100%;
  height: 2.5rem;
  padding: 0.3rem 0rem;

  font-size: 1rem;
  font-weight: 700;

  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-title {
  width: 60%;
  height: 100%;
  overflow: hidden;
}

.card-id {
  font-size: xx-small;
}

.card-top-right {
  display: flex;
  gap: 0.5rem;
}
.card-hp {
  width: fit-content;

  display: flex;
  align-items: center;

  gap: 0.1rem;
}
.card-hp > p {
  font-size: small;
}

.card-name {
  /* Stop text from overflowing to new line */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-image-container {
  width: 95%;
  height: 12rem;

  border: solid rgb(228, 199, 9) 0.45rem;
  background: radial-gradient(circle, rgb(160, 186, 177), rgb(65, 57, 57));
  box-shadow: 4px 4px 13px 0px rgba(0, 0, 0, 0.75);
  cursor: pointer;

  align-self: center;
}

.card-image {
  width: 100%;
  height: 100%;

  object-fit: cover;
}

.card-occupation-container {
  width: 100%;
  height: 1.5rem;

  display: flex;
  justify-content: center;
  align-items: center;
}

.card-occupation {
  width: 14rem;
  height: 1rem;
  padding: 0.01rem;

  background: radial-gradient(circle, rgb(244, 233, 158), rgb(200, 174, 7));
  font-size: small;
  font-weight: bold;
  /* Stop text from overflowing to new line */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

.card-description-container {
  width: 100%;
  height: 2.7rem;
  padding: 0rem 1.2rem;

  font-size: 0.7rem;
  border-bottom: 1px solid black;
  overflow: hidden;
  word-wrap: break-word;
}

.card-moves-container {
  width: 100%;
  height: 5.3rem;

  border-bottom: 1px solid black;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

.move-container {
  height: 1.2rem;
  width: 100%;

  display: flex;
  align-items: center;
}

.move-type-container {
  width: 25%;
  scale: 0.6;

  display: flex;
  justify-content: left;
  gap: 0.3rem;
}

.move-name {
  width: 65%;
  font-weight: bold;
  font-size: smaller;
  /* Stop text from overflowing to new line */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.move-score {
  width: 10%;

  font-weight: bold;
}

.card-skills-container {
  width: 100%;
  height: 2rem;

  display: flex;
  justify-content: space-evenly;
  align-items: center;
  gap: 0.5rem;
}

.card-container a {
  text-decoration: none;
  color: black;
}
