* {
  margin: 0;
  box-sizing: border-box;
  padding: 0px;
  text-decoration: none;
  color: inherit;
  font-family: quicksand, "Nunito", Arial;
  font-weight: 400;
}

/* Safe-area insets, exposed as variables so every page can offset its header,
   content, and bottom bar past the notch / home-indicator once the viewport meta
   opts into the full screen with viewport-fit=cover. They resolve to 0px on
   devices (and browsers) without safe areas, so desktop layout is unchanged. */
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

/* Full-bleed page background.

   Each page sets its image on `body { background-image: url(...) }`; the sizing
   lives here on the body itself: cover + centered + fixed, so the image fits the
   viewport and stays pinned as the page scrolls (the original parallax look).

   (This replaced an earlier ::before layer that relied on `background-image:
   inherit`; that inherit is unreliable on Safari pseudo-elements, which left the
   layer empty and exposed the body's own untiled full-size background.)

   Note on iOS: while the bottom toolbar auto-hides, Safari briefly paints its own
   chrome/overscroll strip at the very bottom edge — a sliver no page's CSS can
   cover (every site shows it). The html background-color just keeps that sliver
   from ever flashing pure white. */
html {
  min-height: 100%;
  background-color: #d9dde1;
}

body {
  min-height: 100vh;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}

/* Normalise x-height across scripts: the Macedonian body font (Nunito) has a
   smaller x-height than the English font (Quicksand), so at the same font-size
   the Cyrillic reads ~13% smaller. font-size-adjust scales each font so its
   x-height matches Quicksand's ratio (~0.53); Quicksand itself is unchanged. */
body {
  font-size-adjust: 0.53;
}

/* Form controls (button, input, select, textarea) don't inherit
   font-size-adjust — the UA stylesheet resets it to none — so Macedonian text
   inside them (matching tiles, exercise option buttons, inputs) was rendering
   un-normalised and looked smaller. Force them to inherit it. */
button,
input,
select,
textarea {
  font-size-adjust: inherit;
}

/* Exclude the display fonts, which have their own intended proportions:
   Inter titles (deliberately prominent) and the Swanky And Moo Moo headings. */
.lesson-title,
.chapter-title,
.chapter_title,
.main-title,
.main-subtitle,
.about-title,
.help-title,
.legal-title,
.practice-title {
  font-size-adjust: none;
}