html {
  background: var(--color-bg-primary);
}

body {
  min-inline-size: 20rem;
  overflow-x: clip;
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-family: var(--font-family-fa);
  font-weight: var(--font-weight-regular);
  font-synthesis: none;
}

:where(a) {
  color: inherit;
}

:where(button, a, input, textarea, select):focus-visible {
  outline: 0.125rem solid var(--color-accent-lime);
  outline-offset: 0.25rem;
}

.container {
  inline-size: min(100% - (2 * var(--gutter-page)), var(--container-max));
  margin-inline: auto;
}

.text-fa {
  direction: rtl;
  font-family: var(--font-family-fa);
}

.text-en {
  direction: ltr;
  font-family: var(--font-family-en);
  unicode-bidi: isolate;
}

.visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}