/*
A simple CSS setup inspired by https://github.com/RadicalTeapot/simple-html-website/tree/main
*/

:root {
  --bg0: #f9f5d7;
  --bg1: #ebdbb2;
  --bg2: #d5c4a1;
  --bg4: #a89984;
  --fg0: #282828;
  --fg1: #3c3836;
  --fg4: #7c6f64;
  --blue: #076678;
  --blue-lighter: #288799; /* 13% lighter than blue above */
  --green: #79740e;
  --aqua: #427b58;
  --orange: #af3a03;
  --gray: #928374;
  --yellow: #b57614;
  --red: #9d0006;

  --font: BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-monospace: "Source Code Pro", "SFMono-Regular", "Consolas", "Liberation Mono", Menlo, monospace;
}

/*@media (prefers-color-scheme: dark) {
    :root {
    --bg0: #1d2021;
    --bg1: #3c3836;
    --bg2: #504945;
    --bg4: #7c6f64;
    --fg0: #fbf1c7;
    --fg1: #ebdbb2;
    --fg4: #a89984;
    --blue: #83a598;
    --blue-lighter: #a4c6b9; 
    --green: #b8bb26;
    --aqua: #8ec07c;
    --orange: #fe8019;
    --gray: #928374;
    --yellow: #fabd2f;
    --red: #fb4934;
    }
}*/

body {
    max-width:80ch;
    margin:5em auto auto;
    padding:0 5ch;
    font:1.15em / 1.4em var(--font);
    /*background-color: var(--bg0);*/
    color: var(--fg1);
}

/* Headers */
h1,h2,h3,h4,h5,h6 {
    font-size: 1em;
    line-height: 1.2em;
    color: var(--blue-lighter);
}
h5,h6 { color: var(--gray); }

/* Page title */
header h1{
    color:var(--orange);
    font-size:1.5em;
}

/* Footer */
footer { color: var(--gray) }

/* Figures */
figure {
    text-align: center;
    padding: 2ch;
    color: var(--gray);
    font-size: 0.9em;
}
figure img {
    box-sizing: border-box;
    max-width: 100%;
}

/* standard links (also includes <a class="l">) */
a:where(:link, :visited) { color: var(--blue); }
a:where(:active, :hover) { color: var(--blue-lighter); }

/* de-emphasized links */
a.d { color: var(--fg1); }
a.d:link, a.d:visited { text-decoration: underline var(--bg4); }
a.d:active, a.d:hover { text-decoration: underline var(--fg1); }

/* code, codeblock */
code { color: var(--gray); font-style: italic; font-family: var(--font-monospace); }
pre { background: var(--bg1); font-family: var(--font-monospace);  display: block; white-space: pre; margin: 1em 0px; border: 1px solid var(--bg4); padding: 1em 0px 1em 4ch; overflow-x: auto; }
pre code { font-style: normal; background: none; padding-left: 5ch; }