:root {
	--zero: black;					    /* 000, black, text */
	--first: ghostwhite;				/* fff, white, background */
	--second: gainsboro;				/* eee, alt bg */
	--third: lightgray;				/* ddd, highlights & borders  */
	--fourth: darkslategray;			/* 666, alt black, alt borders */
	--fifth: midnightblue;				/* alt highlightsi/text (links), ccc */
}

/* 
 * Colours To Consider
 * -------------------
 * Azure, a pale blue white
 * Dark Slate Gray, dark enough for black?
 * Gainsboro, a light gray type of color
 * DarkSlateBlue, a purplish dark blue (or medium for that matter).
 * Or use midnightblue for the links.
 * 
 * so far we use
 * zero (text), second (background), fifth (links)
 */

/* RESET */

* {
  box-sizing: border-box;
}
html {
    font-size: 100%;
    vertical-align: baseline;
}
body {
  line-height: 1.5;
  font-family: sans-serif;
  -webkit-font-smoothing: antialiased;
}
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}
input, button, textarea, select {
  font: inherit;
}
/* ul, ol {
  list-style: none;
} */
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* end reset*/

html {
	color: var(--zero);
	background-color: var(--second);
    font-size: 16px; 
    line-height: 1.5; 
    scroll-behavior: smooth; 
}


body {
    width: 900px;
    max-width: 1200px;
    margin: auto;
    padding: 1em;
    line-height: 2;
}

/*** fonts ***/

body {
  font-family: 'EB Garamond', serif;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Spectral', serif;
	/*Spectral, Libre Baskerville, Fraunces, IBM Sans*/
	text-transform: capitalize;
	/* font-style: italic; */
}

p {
	font-family: 'EB Garamond', serif;
}

/* body::selection, body::-moz-selection  {
  background: var(--first); 
} */

*::selection, *::-moz-selection  {
  background: var(--first); 
}

.title {
	font-family: inherit;
	font-weight: 500;
	line-height: 0.8rem;
}

.menu, .menu a {
    font-family: 'Spectral', serif;
    /* font-family: 'IBM Plex Sans', sans-serif; */
    font-weight: 300;
    text-transform: lowercase;
}

code, pre {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.8rem;
}

footer {
    font-family: 'Spectral', serif;
    /* font-family: 'IBM Plex Sans Condensed', sans-serif; */
    font-weight: 300;
    font-size: 0.9rem;
}


/*** anchors ***/
a, a:link { color: var(--zero); }

/* visited link */
a:visited { color: var(--fifth); }

/* mouse over link */
a:hover { color: var(--fifth); }

/* selected link */
a:active { color: var(--fifth); }

/*** header and footer areas ***/

header h1 {
	margin: auto;
	text-align: center;
	line-height: 1.5rem;
	font-family: 'IBM Plex Sans Condensed', sans-serif;
}

.menu { 
	padding: 0; 
}

.menu a {
	transition: .1s ease-in-out;
}

.menu li { 
	display: inline-block; 
	transition: .3s ease-in-out;
	font-weight: 500;
}

.menu a:hover {
	font-weight: 700;
}

.menu li:hover {
	/* transform: rotate(360deg); */
	/* border-bottom: 2px solid var(--third); */
	background: var(--fourth);
	font-weight: 500;
}

.article-meta, .menu a {
  text-decoration: none;
  background: var(--second);
  padding: 0.2rem 0.6rem;
  border-radius: 0;
  margin: 0;
}

.menu, .article-meta, footer { text-align: center; }

.title {
	font-size: 1.2em;
}

footer a { 
	font-style: italic;
	text-decoration: none; 
}

hr {
  border-style: solid;
  color: var(--first);
}



/*** code blocks ***/

pre {
  background-color: var(--first);
  border: 1px solid var(--third);
  box-shadow: 5px 5px 5px var(--third);
  padding: 1em;
  overflow-x: auto;
}
code { 
  background: none;
}
pre code { 
  background: none;
  /* font-size: 0.8rem;
  line-height: 0.8rem; */
}

/* 
pre code::selection, pre code::-moz-selection, .hljs::selection, .hljs::-moz-selection  {
  background: var(--fifth); 
} */

/* highlight.js */

.reveal pre code, .hljs {
  background-color: transparent !important; 
  padding: 5px;
  overflow: auto;
  max-height: 800px;
  word-wrap: normal;
}

.reveal pre, .hljs {
    box-shadow: none !important;
}

/* misc elements */

img, iframe, video { max-width: 100%; }
main { hyphens: auto; }
blockquote {
  background: none;		/* sixth */
  border-left: 5px solid var(--fourth); 	/* 5 or 3 */
  padding: 3px 1em 3px;
}

table {
  margin: auto;
  border: 1px solid var(--fourth);
}
table thead th { border-bottom: 2px solid var(--fourth); }
th, td { padding: 5px; }
thead, tfoot, tr:nth-child(even) { background: var(--first); }

/* latex/katex */

.katex { 
  font-size: 0.8 rem;   /* default is 1.2*/
}