/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/* ---------- 1. Colours, kept in one place ----------
   These are "CSS variables". Change a colour here and it
   updates everywhere it's used below.                      */
:root {
  --background: #000035;   /* navy blue */
  --text:       #ece6d9;   /* warm off-white, like old paper */
  --muted:      #a59f93;   /* dimmer text for notes/footers */
  --link:       #d8c9a3;   /* soft gold for links */
  --link-hover: #ffffff;   /* links brighten when hovered */
  --rule:       #3a3732;   /* colour of horizontal lines */
}
 
 
/* ---------- 2. The page as a whole ---------- */
html {
  background-color: var(--background);
}
 
body {
  background-color: var(--background);
  color: var(--text);
 
  /* Font "stack": the browser uses the first one it has.
     EB Garamond / Garamond first, then Times New Roman,
     then whatever serif font the device has.             */
  font-family: "EB Garamond", Garamond, "Adobe Garamond Pro",
               "Times New Roman", Times, serif;
  font-size: 1.25rem;      /* Garamond runs small, so bump it up */
  line-height: 1.6;        /* space between lines, for easy reading */
 
  /* The "large margins": limit the text column's width
     and centre it on the page.                           */
  max-width: 38em;         /* about 65–75 characters per line */
  margin: 0 auto;          /* "auto" left/right = centred */
  padding: 4em 2em;        /* breathing room top/bottom and sides */
}
 
 
/* ---------- 3. Paragraphs: justified text ---------- */
p {
  text-align: justify;
  hyphens: auto;           /* breaks long words to avoid big gaps */
  margin: 0 0 1.2em 0;     /* space after each paragraph */
  text-indent: 2em; /* 'em' scales nicely with font size */
}
 
 
/* ---------- 4. Headings ---------- */
h1, h2, h3 {
  font-weight: normal;     /* elegant, not chunky bold */
  line-height: 1.25;
  text-align: center;
}
 
h1 {
  font-size: 2.4rem;
  font-style: italic;
  margin: 0.5em 0 0.3em 0;
}
 
h2 {
  font-size: 1.5rem;
  margin: 2em 0 0.6em 0;
  letter-spacing: 0.03em;
}
 
h3 {
  font-size: 1.25rem;
  font-style: italic;
  margin: 1.5em 0 0.5em 0;
}
 
 
/* ---------- 5. Links ---------- */
a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;   /* nudges underline below the letters */
}
 
a:hover,
a:focus {
  color: var(--link-hover);
}
 
a:visited {
  color: var(--muted);
}
 
 
/* ---------- 6. Images ---------- */
img {
  display: block;          /* lets us centre it */
  max-width: 100%;         /* never wider than the text column */
  height: auto;            /* keep proportions when shrinking */
  margin: 2em auto;        /* centred, with space above/below */
}
 
 
/* ---------- 7. Lists (e.g. an index of essays) ---------- */
ul, ol {
  padding-left: 1.5em;
  margin: 0 0 1.2em 0;
}
 
li {
  margin-bottom: 0.4em;
}
 
 
/* ---------- 8. Smaller touches ---------- */
em, i {
  font-style: italic;
}
 
blockquote {
  margin: 1.5em 2em;
  font-style: italic;
  color: var(--muted);
}
 
hr {
  border: none;
  border-top: 1px solid var(--rule);
  width: 40%;
  margin: 3em auto;
}
 
footer {
  margin-top: 4em;
  font-size: 0.95rem;
  color: var(--muted);
  text-align: center;
}
 
footer p {
  text-align: center;      /* don't justify short footer lines */
}
 
/* Colour of highlighted (selected) text */
::selection {
  background: var(--text);
  color: var(--background);
}
 
 
/* ---------- 9. Small screens (phones) ----------
   This block only applies when the screen is narrower than 600px. */
@media (max-width: 600px) {
  body {
    font-size: 1.1rem;
    padding: 2em 1.2em;    /* smaller side margins on phones */
  }
 
  h1 {
    font-size: 1.9rem;
  }
}