:root {
  --nt-green: #AEBF92;
  --nt-apricot: #F6A06B;
  --nt-terracotta: #C67139;
  --nt-cream: #F2E7D5;
  --nt-off-white: #FDF8EE;
  --nt-dark: #28251E;
  --nt-white: #FFFFFF;
}

.nt-word-card,
.nt-random {
  box-sizing: border-box;
  width: 100%;
  padding: clamp(1.5rem, 3vw, 2.75rem);
  border: 3px solid var(--nt-dark);
  border-radius: 26px;
  background: var(--nt-cream);
  color: var(--nt-dark);
  box-shadow: 7px 7px 0 var(--nt-dark);
}

.nt-word-card__eyebrow,
.nt-random__eyebrow {
  margin-bottom: .8rem;
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.nt-word-card__title,
.nt-random__word {
  font-size: clamp(1.8rem, 4vw, 4rem);
  font-weight: 900;
  line-height: .98;
  overflow-wrap: anywhere;
  hyphens: auto;
}

.nt-word-card__number,
.nt-random__number {
  margin-top: 1rem;
  font-weight: 800;
  opacity: .65;
}

.nt-random__button {
  margin-top: 1.4rem;
  padding: .8rem 1.15rem;
  border: 2px solid var(--nt-dark);
  border-radius: 999px;
  background: var(--nt-terracotta);
  color: var(--nt-white);
  font: inherit;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 4px 4px 0 var(--nt-dark);
  transition: transform .15s ease, box-shadow .15s ease;
}

.nt-random__button:hover {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--nt-dark);
}

.nt-random__button:disabled {
  cursor: wait;
  opacity: .65;
}