/* a simple light/dark stylesheet for my web zettelkasten
 *
 * heavily grafted from: <https://protesilaos.com>, <https://openbsd.org> */

:root {
	--fg: #bbb;
	--bg: #000000;
	/* --bg: #101010; */ 
	--code: #ffffff;
	--fg-term: #ffffff;
	/* --bg-term: #18191b; */
	--bg-term: #242529;
	--heading: #fff;
	--interlink: #f2cfa6;
	/* --interlink: #f8dec0; */
	--intralink: #99b9f0;

	/* denote colours */
	--red: #ff5f59;
	--red-alt: #ff6b55;
	--green: #44bc44;
	--green-alt: #70b900;
	--yellow: #d0bc00;
	--yellow-alt: #fec43f;
	--blue: #2fafff;
	--blue-alt: #79a8ff;
	--magenta: #f78fe7;
	--magenta-alt: #b6a0ff;
        --cyan: #00d3d0;
        --cyan-alt: #6ae4b9;
	--gray: #555555;

	/* gruv colours */
	--gruv-green: #b8bb26;
	--gruv-yellow: #fabd2f;
	--gruv-orange: #fe8019;
	--gruv-red: #fb4934;
}

/* light theme */
@media (prefers-color-scheme: light) {
	:root {
		--fg: #000000;
		--bg: #eeeeee;
		--code: #8f0075;
		--fg-term: #000000;
		--bg-term: #ffffff;
		--heading: #5d3026;
		--interlink: #005e8b;
		--intralink: #0031a9;
	}
}

ul.index {
	  list-style-type: none; /* Removes the bullets/numbers */
  /* margin: 0;           /* Removes default outer spacing */
  padding: 0;          /* Removes default inner spacing (indentation) */
  }

.index, .index.a, nav {
	/*font-family: monospace; */
  line-height: 1.4;
}

.index a:link, nav a:link {
	text-decoration: none;
}

.index a:hover, nav a:hover {
	background-color: var(--gray);
}

.id {
	font-family: monospace;
	/* font-size: 1.2em; */
	color: var(--gruv-green); }
.signature {
	color: var(--gruv-yellow); }
.title {
	color: var(--gruv-orange); }
.keyword {
	color: var(--gruv-red);
	/* text-decoration: underline; */ }
.delimiter {
	color: var(--gray); }

.id {
	font-family: monospace;
	 font-size: 0.85rem;
	color: #928374; /* muted gray-brown */
}
.signature {
	color: #a89984; /* lighter gray-brown */
}
.title {
	color: var(--fg); /* same as body text */
}
.keyword {
	color: #d65d0e; /* keep orange for accent */
}





body {
  font-family: sans-serif;
  color: var(--fg);
  background: var(--bg);
  line-height: 1.4;
  margin: 1em auto;
  padding: 0 1.2em;
  /* max-width: 55em; */
  overflow-wrap: break-word;
}

@media (min-width: 57em) {
	body {
		max-width: 57em;
	}
}

@media (min-width: 76em) {
	body {
		max-width: 75%;
	}
} 

/* prevent being in `<article>` from making the title normal instead of stupidly oversized */
h1 { font-size: 2em; }

h1, h2, h3, h4, h5, h6 {
  color: var(--heading);
}

img {
  max-width: 100%;
  height: auto; 
}

a {
  color: var(--interlink);
}

a[href^=http] {
  color: var(--intralink);
}

ul {
  padding-left: 1.5em;
}

code {
  font-family: monospace;
  font-size: 0.85rem;
  /* font-family: Hack, "DejaVu Sans Mono", "Source Code Pro", monospace; */
  color: var(--code);
  /* font-size: .85rem; */
  padding: 0.15em 0.3em;
	background: var(--bg-term);
}

pre > code {
/*	color: var(--fg-pre); */
  padding: 0;
}

pre {
	color: var(--fg-term);
	background: var(--bg-term);
  overflow: auto;
  padding: 1em;
}