:root {
  --blue-primary-700: hsl(229, 23%, 23%);
  --blue-primary-400: hsl(185, 75%, 39%);
  --gray-primary-500: hsl(227, 10%, 46%);

  --gray-neutral-300: hsl(0, 0%, 59%);

  --footer: hsl(185, 93%, 23%);
  --white: hsl(0, 0%, 100%);

  --fm-base: "Kumbh Sans", sans-serif;

  --fw-regular: 400;
  --fw-bold: 700;
}

/* ----- Global ----- */
body {
  min-height: 30rem;
  background-color: var(--blue-primary-400);
  background-image: url(../assets/images/bg-pattern-top.svg),
    url(../assets/images/bg-pattern-bottom.svg);
  background-repeat: no-repeat, no-repeat;
  background-position: right 50vw bottom 20vh, left 45vw top 50vh;
  font-family: var(--fm-base);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.blue-clr-fw-700 {
  color: var(--blue-primary-700);
  font-weight: var(--fw-bold);
}

.gray-neutral-fw-400 {
  color: var(--gray-primary-500);
  font-weight: var(--fw-regular);
}

/* ----- Card ----- */
.card {
  width: 20.4375rem;
  background-color: var(--white);
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: 0 0 2rem 1rem rgba(0, 0, 0, 0.1);
}

.card__bg {
  height: 8.175rem;
  background-image: url(../assets/images/bg-pattern-card.svg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.card__profile-picture {
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  border: 0.3125rem solid var(--white);
  margin: -3.3125rem auto;
}

.card__info-section {
  margin: 4.3125rem 0 1.5rem;
}

.card__title {
  font-size: 1.125rem;
  display: flex;
  justify-content: center;
  gap: 0.5rem;
}

.card__age {
  color: var(--gray-primary-500);
  font-weight: var(--fw-regular);
}

.card__from {
  font-size: 0.875rem;
  text-align: center;
}

.divider {
  border-bottom: 0.0313rem solid var(--gray-neutral-300);
  opacity: 0.25;
}

.card__stats-section {
  margin: 1.5rem 0;
  display: flex;
  justify-content: center;
  gap: 1.5rem;
}

.card__stat {
  width: 4rem;
  text-align: center;
  display: flex;
  flex-direction: column-reverse;
}

.card__stat-title {
  font-size: 0.625rem;
  letter-spacing: 0.0938rem;
}

.card__stat-number {
  font-size: 1.125rem;
}

/* ----- Footer ----- */
.attribution {
  font-size: 0.6875rem;
  text-align: center;
  margin-top: 2rem;
}

.attribution a {
  color: var(--footer);
  font-weight: var(--fw-bold);
}

.attribution a:hover {
  transition: 0.25s;
  opacity: 0.7;
}