.card {
  display: flex;
  flex-direction: column;

  margin: 0;
  margin-bottom: 40px;
  padding: 20px;
  gap: 0;

  box-sizing: border-box;

  width: 30vw;
  height: auto;

  background: var(--card-background-color);

  border: dotted 2px var(--dimmed-primary-color);
  border-radius: 10px;
  box-shadow: 0 5px 13px -2px #1e2d5a, 0 3px 7px -3px #1e2d5a;

  -webkit-transition: ease-out 0.2s;
  -moz-transition: ease-out 0.2s;
  transition: ease-out 0.2s;
}

.card:hover {
  border-color: var(--primary-color);
  box-shadow: 0 10px 32px -4px #1e2d5a, 0 6px 14px -6px #1e2d5a;
}

.card__title {
  font-family: Inter;

  font-size: 35px;
}

#card__title1,
#card__title2,
#card__title3,
#card__title4,
#card__title5 {
  background-size: 100%;

  background-clip: text;
  -webkit-background-clip: text;
  -moz-background-clip: text;

  -webkit-text-fill-color: transparent;
  -moz-text-fill-color: transparent;

  margin: 0;
}

#card__title1 {
  color: var(--card-orange);

  background-image: var(--card-title1-gradient);
}

#card__title2 {
  color: var(--card-blue);

  background-image: var(--card-title2-gradient);
}

#card__title3 {
  color: var(--card-yellow);

  background-image: var(--card-title3-gradient);
}

#card__title4 {
  color: var(--card-softBlue);

  background-image: var(--card-title4-gradient);
}

#card__title5 {
  color: var(--card-purple);

  background-image: var(--card-title5-gradient);
}

.card__resume {
  margin: 0;
  margin-top: 35px;

  font-family: Inter;

  font-size: 20px;

  text-align: justify;

  color: var(--white-font-color);

  width: auto;
  height: auto;
}