/* ============================================================
   williambox.com — custom.css
   Loads after simple.css. Overrides colors and font only.
   Let simple.css handle everything structural.
   ============================================================ */


/* ------------------------------------------------------------
   Self-Hosted Font — Nunito Sans
   Files live in css/fonts/
   ------------------------------------------------------------ */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/nunito-sans-v19-latin-regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Nunito Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/nunito-sans-v19-latin-italic.woff2') format('woff2');
}

@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/nunito-sans-v19-latin-600.woff2') format('woff2');
}

@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/nunito-sans-v19-latin-700.woff2') format('woff2');
}


/* ------------------------------------------------------------
   Variables — overrides simple.css defaults
   ------------------------------------------------------------ */
:root {
  /* Font — slots into simple.css's own --sans-font variable */
  --sans-font: 'Nunito Sans', -apple-system, BlinkMacSystemFont, "Segoe UI",
    Arial, Helvetica, sans-serif;

  /* Colors — Option D: Parchment & Slate */
  --bg:           #faf9f7;   /* warm white page background */
  --accent-bg:    #f0ebe2;   /* parchment — header, aside, table stripes */
  --text:         #2c2c2a;   /* dark charcoal body & header text */
  --text-light:   #5f5e5a;   /* muted secondary text */
  --border:       #d8d3ca;   /* warm subtle borders */
  --accent:       #2d4a6b;   /* deep slate — links, active nav, buttons */
  --accent-hover: #3d6491;   /* lighter slate on hover */
  --accent-text:  #ffffff;   /* text ON accent backgrounds (buttons) */
  --marked:       #f0ebe2;   /* highlight element */
  --disabled:     #e8e4de;   /* disabled inputs */
}


.footer-nav {
  margin: 1em;
}

li {
 padding-bottom: 1em;
}

hr {
  margin-top: 4em;
}

.example-list {
  list-style-type: none;
}

.examples {
  text-decoration: none;
}

.about-img {
  float: left;
  margin-right: 1em;
}