:root {
  --font-family: "Lexend", "Roboto", sans-serif;
  --font-family-condensed: "Roboto Condensed", sans-serif;
  --font-size: clamp(10px, 0.5vw + 10px, 20px);

  --font-family-serif: "EB Garamond", sans-serif;
  --font-size-serif: 1.2rem;

  --font-family-cursive: "Cherish", cursive;
  --font-size-cursive: 1.5rem;

  --first-letter-font-family: "Passions Conflict", cursive;
  --first-letter-font-size: 3rem;

  --line-height: 150%;

  --title-font-family: "Lexend", sans-serif;
  --title-font-weight: 700;
  --title-text-transform: none;
  --title-letter-spacing: 0;
  --title-border-bottom-dark: 2px solid rgba(0, 0, 0, 0.25);
  --title-border-bottom-light: 2px solid rgba(255, 255, 255, 0.125);

  --note-font-family: "Lexend", sans-serif;
  --note-font-size: 1rem;
}

/* ============================================================================ */

.font-default {
  font-family: var(--font-family);
  font-size: var(--font-size);
}

.font-condensed {
  font-family: var(--font-family-condensed);
  font-size: var(--font-size);
}

.font-serif {
  font-family: var(--font-family-serif);
  font-size: var(--font-size-serif);
}

.font-cursive {
  font-family: var(--font-family-cursive);
  font-size: var(--font-size-cursive);
}