.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;
  font-family: Arial, Helvetica, sans-serif;

  display: flex;
  flex-direction: column;
}

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

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

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

.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;
  padding: 0.01rem;

  background: radial-gradient(circle, rgb(244, 233, 158), rgb(200, 174, 7));
  font-size: small;
  font-weight: bold;

  display: flex;
  justify-content: center;
}

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

  font-size: 0.7rem;
  border-bottom: 1px solid black;
}

.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: 75%;
  font-weight: bold;
  font-size: smaller;
}

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

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