/* palette
light theme:
  --bg: #fffdf5;
  --accent-bg: #ffdcc7;
  --text: #250600;
  --text-light: #3e2a20;
  --border: #ff8031;
  --accent: #ffdd6c;
  --accent-hover: #f8670d;
  --accent-text: var(--bg);
  --code: #adf0ff;

dark theme:
    color-scheme: dark;
    --bg: #1e1b12;
    --accent-bg: #3c2c0c;
    --text: #fffce5;
    --text-light: #d5a97d;
    --accent: #f1ad00;
    --accent-hover: #de5500;
    --accent-text: var(--bg);
    --code: #00bdda;
 */

 /* foundations */
 
 html{
  min-width: 100vw;
  min-height: 100vh;
  /*cursor: url(img/cursor.png), auto;*/
  overflow-x:hidden;
}


:root { 
  /* Set sans-serif & mono fonts */
  --sans-font: 'Inter', Optima, Candara, 'Noto Sans', source-sans-pro, sans-serif;
  --serif-font: Palatino, 'Palatino Linotype', 'EB Garamond', "Times New Roman", Times, serif;
  --mono-font: Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
  --standard-border-radius: 5px;
  --border-width: 1px;

  /* Default (light) theme */
  --bg: #fffdf5;
  --accent-bg: #ffdcc7;
  --text: #250600;
  --text-light: #3e2a20;
  --border: #ff8031;
  --accent: #ffdd6c;
  --accent-hover: #f8670d;
  --accent-text: var(--bg);
  --code: #adf0ff;
  /*--preformatted: #444;
  --marked: #ffdd33;
  --disabled: #efefef;*/
}

/* Dark theme */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #1e1b12;
    --accent-bg: #3c2c0c;
    --text: #fffce5;
    --text-light: #d5a97d;
    --accent: #cc9200;
    --accent-hover: #de5500;
    --accent-text: var(--bg);
    --code: #00bdda;
    /*--preformatted: #ccc;
    --disabled: #111;*/
  }}
  
   html {
  /* Set the font globally */
  font-family: var(--serif-font);
  scroll-behavior: smooth;
  }

  
/* Make the header bg full width, but the content inline with body */
body > header {
  background-color: var(--accent);
  border-bottom: var(--border-width) solid var(--border);
  text-align: center;
  padding: 0 0.5rem 1rem 0.5rem;
  grid-column: 1 / -1;
}

/* Add a little padding to ensure spacing is correct between content and header nav */
main {
  padding-top: 1rem;
}

  header nav a:hover,
  header nav a.current,
  header nav a[aria-current="page"],
  header nav a[aria-current="true"] {
  background: var(--bg);
  border-color: var(--accent-hover);
  color: var(--accent-hover);
  cursor: pointer;
}

/* Reduce nav side on mobile */
@media only screen and (max-width: 720px) {
  header nav a {
    border: none;
    padding: 0.5rem;
    text-decoration: none;
    line-height: 1;
  }

  header nav a.current {
    background: none;
  }
}