/* Global variables. */
:root {
    /* Set sans-serif & mono fonts */
    --sans-font: "Book Antiqua", Georgia, "Times New Roman", serif;
    --mono-font: "Fira Mono", Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
    --standard-border-radius: 5px;
  
    /* Default (light) theme */
    --bg: #fffffc;
    --accent-bg: #c0bfc4;
    --text: #353238;
    --text-light: #9a999a;
    --border: #898EA4;
    --accent: #767522;
    --accent-hover: #a5aa52;
    --accent-text: var(--bg);
    --code: #767522;
    --preformatted: #444;
    --marked: #ffdd33;
    --disabled: #efefef;
  }
  
  /* Dark theme */
  @media (prefers-color-scheme: dark) {
    :root {
      color-scheme: dark;
      --bg: #212121;
      --accent-bg: #2b2b2b;
      --text: #dcdcdc;
      --text-light: #ababab;
      --accent: #ffb300;
      --accent-hover: #ffe099;
      --accent-text: var(--bg);
      --code: #f06292;
      --preformatted: #ccc;
      --disabled: #111;
    }
    /* Add a bit of transparency so light media isn't so glaring in dark mode */
    img,
    video {
      opacity: 0.8;
    }

  /* Make the body a nice central block */
    body {
      color: var(--text);
      background-color: var(--bg);
      font-size: 1.15rem;
      line-height: 1.5;
      display: grid;
      grid-template-columns: 1fr min(45rem, 90%) 1fr;
      margin: 0;
      hyphens: auto;
    }
    main {
      max-width: 65ch;
    }  
  }