@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;1,400;1,500&display=swap');

 :root {
--lm: auto;
--textcolor: #555;
--maxwidth: 40rem;
}
body {
	background: #fff;
	margin: 0 1.5rem; padding: 0;
	font-family: "EB Garamond", "Times", serif;
	font-size: 15pt; line-height: 20pt;
	color: var(--textcolor);	
	font-optical-sizing: auto;	
	font-variant-numeric: proportional-nums oldstyle-nums;
}


/* ----------------- LAYOUT and STRUCTURE ----------------- */

header {
/*	border-bottom: 0px #ddd solid;*/
  margin: 0 var(--lm);
	max-width: var(--maxwidth);
}

nav {
	margin: 0 var(--lm);
	max-width: var(--maxwidth);
	border-top: 1px black solid; 
	padding: 0px;
}
nav ul {margin: 0;padding: 0px;}
nav ul li.nav-item {
	display: inline; 
	font-family: Tahoma, Verdana; font-size: 10pt; 
	padding: 0 5px;
}
li.nav-item a.nav-link {border: none}
li.nav-item a.active {color: var(--textcolor)}


main {
	max-width: var(--maxwidth);
	margin: 2rem var(--lm);
/*	border: 1px blue solid;*/
}

/*This should be done better:*/
main.books {font-size: 14pt; line-height: 18pt;}
main.books h2 {font-style: italic; margin-top: 2rem; margin-bottom: 0;}


div.post-list {
	font-family: Tahoma, Verdana;
}
div.post-list-item {
	background-color: #fff;
	border-top: 1px #ecc solid;
	border-left: 1px #ecc solid;
  margin-bottom: 2rem; 
  padding: .2rem .5rem;
}
div.post-list-item p {
	font-family: EB Garamond; 
	font-size: 90%; line-height: 120%;
	margin-top: 1em; 
	hyphens: none;
} 
span.post-title {font-size: 120%; font-family: EB Garamond; font-weight: normal;}
span.post-date {font-size: 70%;}


div#metablock {
		font-family: Tahoma, Verdana; font-size: 9pt; 
		margin: 0 0 1rem 0.4rem;
}



footer {
	max-width: var(--maxwidth);
	border-top: 1px #ccc solid; 
		margin: 3rem var(--lm);

}

figure {max-width: 100%; margin: 0; margin-bottom: 0.5rem;}
img {
	max-width: 100%; border: 1px black solid; 
}
figcaption {
	font-family: Tahoma, verdana; font-size: 70%;
	margin-left: .3rem; margin-top: -.3rem;
}

hr { color: #999; border: 0;}

hr.break { color: #fff; border: 0;}


/* ------------------ TYPOGRAPHIC TWEAKS --------------------- */

a {text-decoration: none;}
a:link {color: #a00;}
a:visited {color: #900;}

h1.site-title {
	font-size: 200%;font-weight: 500; font-style: italic;
	letter-spacing: -.05rem; margin-bottom: .3rem;
}
h1.site-title span {
	  background-color: #f3ec78;
    background-image: linear-gradient(90deg, rgba(255,0,0,1) 0%, rgba(0,0,0,1) 45%, rgba(255,255,255,1) 105%);
    background-size: 100%;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent; 
    -moz-text-fill-color: transparent;
}

h1, h2, h3 {
	font-style: normal; font-weight: 500; color: var(--textcolor);
	font-size: 150%; line-height: 120%;
	margin-bottom: 0; padding-bottom: 0;
}

article { }
article h1 { 	margin-bottom: 0;}

p {
	text-align: auto; text-justify: auto; hyphens: auto;
	margin-top: .5em;
}

blockquote {font-style: italic;}

pre {line-height: 85%; margin-left: 2rem;}
code {font-size: 70%;}
div.greenscreen{
	background-color: #222; color: #4D4;
	padding: .2rem 0; border-radius: 20px;
}

sup.footnote-ref {
	font-size: 60%;  font-family: Tahoma, Verdana;font-style: normal;
	vertical-align: 50%; line-height: 100%; /*keep it from breaking leading*/
}

section.footnotes {
	margin-top: 2rem; 
	border-top: 1px grey solid;
	font-size: 90%; line-height: 130%;
}
section.footnotes ol {
	margin-left: -1.5rem;
}

.smallcaps {

	font-variant: small-caps;
	letter-spacing: 1pt;
	font-weight: 500;
}