@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400;1,700&family=Spectral:ital,wght@0,300;0,500;1,300;1,500&display=swap');
@import url('https://highlightjs.org/static/demo/styles/grayscale.css');

/* variables */
html {
	/* Blue */
	--background: white; /* #DBE9EE; */
	--section-background: #efefef; /* #C0D6DF; */
	--accent-color: #e1e1e1; /* #4A6FA5; */
	--content-text-color: rgba(0, 0, 0, 0.9); /* #4F6D7A; */
	--heading-text-color: rgba(0, 0, 0, 0.9); /* #2B7A78; */
	--understated-text-color: rgba(0, 0, 0, 0.5); /* #5d8798; */
	--bright-text-color: rgba(0, 0, 0, 1); /* #166088; */
	--focused-text-color: rgba(0, 0, 0, 1); /* #4A6FA5; */
	--display-font: 'Playfair Display', serif;
	--body-font: 'Spectral', serif;
	--text-indent: 0rem;
	--font-base-size: 20px;
	--base-line-height: 1.5rem;
}

/*

   RESET

   http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)

*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	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;
}

/* Global Styles */

::selection {
  text-shadow: none !important;
  background: rgba(255, 230, 100, 0.5);
}

body, html {
	font-size: var(--font-base-size);
}

body {
  background-color: var(--background);
	color: var(--content-text-color);
	font-family: var(--body-font);
	font-weight: 300;
	line-height: var(--base-line-height);
	padding: 0;
}

.content {
	max-width: 30rem;
	margin: calc(var(--base-line-height) * 4) auto 0 auto;
}

p {margin-bottom: var(--base-line-height); text-indent: var(--text-indent);}
h1+p, h2+p, h3+p, h3+p, h4+p, h5+p, h6+p, hr+p, blockquote+p, br+p {text-indent: 0;}
h1+p strong, h2+p strong, h3+p strong, h3+p strong, h4+p strong, h5+p strong, h6+p strong, hr+p strong, blockquote+p strong, br+p strong {margin-left: var(--text-indent);}

strong {font-weight: 500;}
em {font-style: italic;}

strong em {
  margin: 0 -0.5em;
  padding: 0.1em 0.5em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
	font-style: normal;
	font-weight: 300;
	background: rgba(255, 230, 100, 0.5);
}

h1, h2, h3, h4 {
  font-weight: 700;
  color: var(--heading-text-color);
  font-size: 1.2rem;
	line-height: 1.8rem;
  margin: 1.5rem 0 .5rem;
	font-family: var(--display-font);
}

small, .font_small, h5, h6 {
	font-size: 0.75rem;
	font-style: italic;
	color: var(--understated-text-color);
}

a {
	color: var(--bright-text-color);
}

a:visited {
	color: var(--bright-text-color);
}

a:hover {
	color: var(--focused-text-color);
}

pre, code {
	white-space: pre;
	font-size: .75rem;
	font-family: 'Source Code Pro', monospace;
}

pre {
	display: block;
	margin: 0 0 var(--base-line-height) 0;
	padding-left: 1rem !important;
	border-left: 1px dotted var(--understated-text-color);
}

ul, ol {
	list-style-position: outside;
  margin-bottom: var(--base-line-height);
}

ul {
	list-style-type: square;
	padding-left: var(--base-line-height);
}

ol {
	list-style-type: decimal-leading-zero;
	padding-left: var(--base-line-height);
}

blockquote {
	padding: var(--base-line-height);
	font-size: 1rem;
	font-style: italic;
	background: var(--section-background);
	border-left: 1px solid var(--accent-color);
	border-right: 1px solid var(--accent-color);
	width: 80%;
	margin: 0 auto var(--base-line-height) auto;
}

blockquote *:last-child {
	margin-bottom: 0;
}

blockquote em, em em {
	font-style: normal;
}

img {
	max-width: 80%;
	margin: 0 auto;
	display: block;
}

hr {
	border: none;
}

hr::before {
	content: '***';
	display: block;
	width: 100%;
	text-align: center;
}

.nav {
	display: flex;
	justify-content: space-evenly;
	max-width: 360px;
	margin: 0 auto;
	padding: var(--base-line-height) 0;
	font-variant: small-caps;
}

.nav a {
	text-decoration: none;
}

.copyright {
	font-size: .5rem;
	text-align: center;
	color: var(--understated-text-color);
}

.home-content p:first-of-type a {
	text-decoration: none;
}

.home-content p:first-of-type a:hover {
	border-bottom: .2rem dotted;
}

.category-title {
	list-style: none;
}

.essay-title h1 span {
	margin: 0 -0.5em;
  padding: 0.15em 0.5em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
	background: rgba(255, 230, 100, 0.5);
}

.essay-title h1, .home-content p:first-of-type {
	font-size: 2rem;
	font-family: var(--display-font);
	line-height: calc(var(--base-line-height) * 2);
	margin-top: 0;
}

.essay-title h2 {
	color: var(--understated-text-color);
	margin-bottom: 0;
}

.essays-list {
	padding-left: 0;
}

@media (max-width: 600px) {
	.content {
		padding: 0 1rem;
	}
}

@media print {
	.home-link, .essays-list, .essays-list-title, .nav, .copyright {
		display: none;
	}
	blockquote {
		border: none;
	}
}