.title {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-primary-semi-bold);
  font-size: var(--font-size-4);
  line-height: 1.11;

  color: var(--palette-text-900);

  margin-bottom: var(--spacing-1);
}

.username {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-primary-regular);
  font-size: var(--font-size-3);
  line-height: 1.25);

  color: var(--palette-text-500);
}

.changeButton {
  padding-bottom: var(--spacing-4);
}

.changeButtonMessage {
  padding-bottom: var(--spacing-1);
}

.heading {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-primary-semi-bold);
  font-size: var(--font-size-3);
  line-height: 1.25;

  color: var(--palette-text-900);

  margin-bottom: var(--spacing-3);
}

.description {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-primary-regular);
  font-size: var(--font-size-3);
  line-height: 1.25;

  color: var(--palette-text-500);
}

.label {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-primary-bold);
  font-size: var(--font-size-2);
  line-height: 1.14;

  color: var(--palette-text-500);
}

.tooSoon {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-primary-regular);
  font-size: var(--font-size-2);
  line-height: 1.14;

  color: var(--palette-text-100);

  margin-bottom: var(--spacing-4);
}

.footer {
  margin-top: var(--spacing-5);
  margin-bottom: var(--spacing-5);
}

.footerButton {
  margin-right: var(--spacing-2);
}

.successMessage {
  padding-bottom: var(--spacing-3);
}
