/* ===========================================================================
   FONTS AND SIZES FOR THE WHOLE WEBSITE
   Change a value here and every page follows. Section 8 of the setup guide
   explains each line. 1rem = 16px, so 1.25rem = 20px.
   =========================================================================== */
:root{
  /* FONTS */
  --display: Arial, Helvetica, sans-serif;          /* titles */
  --label:   Arial, Helvetica, sans-serif;          /* subtitles, buttons, small labels */
  --body:    Calibri, Carlito, "Segoe UI", sans-serif; /* body text */
  --serif:   Georgia, "Times New Roman", serif;     /* stories, quotes, sample messages, sign-offs */

  /* TEXT SIZES */
  --size-body:       1.25rem;   /* body text on computers (20px) */
  --size-body-phone: 1.125rem;  /* body text on phones (18px) */
  --size-topline:    clamp(1.15rem, 2.3vw, 1.6rem); /* gold line at the top of the sales page */
  --size-h1:         clamp(1.75rem, 4.4vw, 3.4rem); /* main page title on computers */
  --size-h1-phone:   clamp(1.75rem, 7.6vw, 3rem);   /* main page title on phones */
  --size-h2:         clamp(1.7rem, 4.4vw, 2.4rem);  /* section titles */
  --size-h3:         1.35rem;                       /* small titles */
}

/* MAKE EVERYTHING BIGGER OR SMALLER: 100% is normal, 110% is one tenth bigger. */
html{font-size:100%}

/* WHERE THE SERIF FONT IS USED */
.story,.quote,.borrow,.demo div,.sig,.tip{font-family:var(--serif);font-size:.96em}