@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,400;0,800;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@700&display=swap'); */

/* Reset */

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: inherit;
	font-size: 100%;
	vertical-align: baseline;
}

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary {
	display:block
}

html,body {
	line-height: 1;
}

ol,ul {
	list-style: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

caption,th,td {
	text-align: left;
	font-weight: normal;
	vertical-align: middle;
}

q,blockquote {
	quotes: none;
}

q:before,q:after,blockquote:before,blockquote:after {
	content: "";
	content: none;
}

a img {
	border: none;
}

/* Basics */

div.clear {
  clear: both;
}

html {
	height: 100%;
}

body {
	padding: 0;
	margin: 0;
	color: #222;
	background-color: #fff;
	font-family: "Nunito Sans", Helvetica, Arial, sans-serif;
	-webkit-text-size-adjust: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
	text-rendering: optimizeLegibility;
	font-weight: bold;
	font-family: "Roboto Condensed";
}

ul {
	list-style-type: disc;
}

ol {
	list-style-type: decimal;
}

strong {
	font-weight: bold;
}

em {
	font-style: italic;
}

del, s {
	text-decoration: line-through;
}

a {
	color: #2299CC;
}

a:visited {
	color: #2299CC;
}

a:focus {
	color: #dd4000;
}

a:hover {
	color: #dd4000;
}

a:active {
	color: #dd4000;
}

.icon {
	text-rendering: geometricPrecision !important;
}

footer#site-footer {
	font-family: "Nunito Sans", Helvetica, Arial, sans-serif;
	margin-top: 0px;
	padding: 10px 0;
	max-width: 880px;
	margin: 0 auto;
}

footer#site-footer p {
	color: #a0a0a0;
	font-size: 14px;
	line-height: 18px;
	text-align: center;
}

footer#site-footer a {
	color: #808080;
}

/* Blog post */

article.main {
	max-width: 880px;
	margin: 60px auto 0 auto;
	border: 1px solid #eee;
	border-radius: 4px;
}

article.main h2 {
	color: #111;
	font-size: 36px;
	line-height: 40px;
	margin-top: 60px;
	margin-bottom: 20px;
	text-align: center;
}

article.main h3 {
	color: #111;
	font-size: 28px;
	line-height: 32px;
	margin-top: 60px;
	margin-bottom: 20px;
	text-align: center;
}

article.main h4 {
	color: #111;
	font-size: 18px;
	line-height: 24px;
	margin-top: 30px;
	margin-bottom: 10px;
	padding: 0 70px;
}

article.main p {
	font-size: 18px;
	line-height: 24px;
	padding: 0 70px;
	margin-bottom: 20px;
	font-weight: 400;
}

article.main a {
	font-weight: 400;
}

article.main ul, article.main ol {
	margin: 20px 0 30px 0;
	padding: 0 70px;
}

article.main li {
	font-size: 18px;
	line-height: 24px;
	font-weight: 400;
	margin: 0 60px 0px 60px;
}

article.main li p {
	margin-bottom: 20px;
	padding: 0;
}

article.main blockquote {
	padding: 10px 70px;
	position: relative;
}

article.main blockquote p {
	font-family: "Nunito Sans", Helvetica, Arial, sans-serif;
	color: #888;
	font-style: italic;
	line-height: 22px;
	padding: 0 80px 0 80px;
	margin: 0;
}

article.main blockquote:before {
	display: block;
	position: absolute;
	left: 122px;
	top: 4px;
	font-family: Georgia, serif;
	font-size: 60px;
	color: #bbb;
	content: "\201C";
}

article.main pre {
	padding: 20px 30px;
	margin: 30px 0;
}

article.main pre, article.main pre code {
	font-family: Menlo, "Lucida Console", monospace;
	font-size: 14px;
	line-height: 20px;
	padding: 0 70px;
}

article.main p code, article.main tt, article.main li code {
	color: #000;
	font-family: Menlo, "Lucida Console", monospace;
	font-size: 15px;
	line-height: 18px;
	background-color: #f8f8f8;
	padding: 0px 4px;
	border-radius: 3px;
}

article.main figure {
	text-align: center;
	margin-top: 40px;
	margin-bottom: 40px;
}

article.main figure img {
	max-width: 100%;
}

article.main figcaption h4 {
	font-size: 15px;
	line-height: 18px;
	font-weight: 400;
	margin: 0;
	padding: 10px 0 0 0;
}

article.main div.note {
	border: #80d080 1px solid;
	background-color: #f0fff0;
	border-radius: 4px;
	margin: 30px 70px;
	padding: 0px 20px;
}

article.main div.note p {
	font-family: "Nunito Sans", Helvetica, Arial, sans-serif;
	font-size: 15px;
	line-height: 18px;
	margin-bottom: 15px;
	color: #408040;
	padding: 0;
}

article.main div.note p a {
	color: #408040;
}

article.main div.note code {
	color: #408040;
	font-size: 12px;
	line-height: 14px;
	padding: 0;
	margin: 0;
	background-color: transparent;
}

article.main table {
	margin: 40px auto;
}

article.main th {
	font-weight: 600;
	font-size: 18px;
	line-height: 24px;
	margin-bottom: 20px;
	padding: 0px 20px;
	/* border-bottom: 1px solid #222; */
}

article.main td {
	font-size: 18px;
	line-height: 24px;
	margin-bottom: 20px;
	padding: 0px 20px;
	font-weight: 400;
}

span.katex-display {
	margin: 40px 0;
}

div.audio-player {
	text-align: center;
	padding: 20px 70px;
}

/* Blog post header */

article.main header {
	padding: 0;
	padding-bottom: 60px;
	margin-bottom: 60px;
	text-align: center;
	background-color: #fafafa;
	background-image: url("/images/header.jpg");
	background-position: center;
	background-size: 880px;
}

article.main header h1 {
	color: #000;
	font-size: 64px;
	line-height: 72px;
	margin: 0;
	padding: 60px 70px 0 70px;
	/* letter-spacing: -1.5px; */
}

article.main header p {
	font-family: "Nunito Sans", Helvetica, Arial, sans-serif;
	font-weight: 400;
	font-size: 18px;
	line-height: 24px;
	font-style: italic;
	width: 80%;
	margin: auto;
	margin-top: 20px;
	padding: 0;
}

/*
article.main nav {
	border: 1px #88bbdd solid;
	background-color: #f0faff;
	width: 60%;
	margin: 0 auto;
	padding: 10px 0 12px 0;
	border-radius: 4px;
	text-align: left;
}

article.main nav ul {
	margin: 0;
	list-style-type: none;
}

article.main nav li {
	margin: 0 20px;
	font-size: 15px;
	line-height: 21px;
}
*/

#article-links {
	text-align: center;
	margin-bottom: 0px;
	padding: 0;
	margin: 0;
}

#article-links img {
	width: 32px;
	height: 32px;
	padding: 0 20px;
}

/* Blog post footer */

article.main footer {
	margin: 80px 0 0 0;
	padding: 20px 70px 60px 70px;
	background-color: #fafafa;
}

article.main footer #byline {
	padding-bottom: 60px;
	color: #808080;
}

article.main footer #byline address {
	font-family: "Nunito Sans", Helvetica, Arial, sans-serif;
	font-weight: 400;
	font-size: 18px;
	line-height: 24px;
	margin-top: 20px;
	font-style: italic;
}

article.main footer #byline time {
	font-family: "Nunito Sans", Helvetica, Arial, sans-serif;
	font-weight: 400;
	font-size: 18px;
	font-style: italic;
	line-height: 24px;
}

article.main footer h3 {
	text-align: left;
	color: #666;
	font-size: 28px;
	line-height: 32px;
	/* letter-spacing: -1px; */
	margin-bottom: 20px;
	margin-top: 0px;
}

#read-more span.date {
	color: #808080;
}

#read-more a {
	text-decoration: none;
	color: #808080;
}

#read-more a:focus {
	color: #dd4000;
}

#read-more a:hover {
	color: #dd4000;
	text-decoration: underline;
}

#read-more a:active {
	color: #dd4000;
}

#read-more div.link {
	font-size: 18px;
	line-height: 21px;
	margin-bottom: 20px;
}

#read-more span.date {
	font-size: 14px;
	text-transform: uppercase;
	font-weight: 400;
}

/* Blog archive page */

#blog-links {
	margin-top: 60px;
	font-size: 18px;
	line-height: 24px;
	font-weight: 400;
	padding: 0 70px 0px 70px;
}

#blog-links .title {
	font-weight: bold;
	font-size: 28px;
	line-height: 32px;
	/* letter-spacing: -1px; */
	margin-bottom: 4px;
}

#blog-links .extra {
	margin-bottom: 40px;
}

#blog-links a {
	text-decoration: none;
	color: #000;
}

#blog-links a:focus {
	color: #dd4000;
}

#blog-links a:hover {
	color: #dd4000;
	text-decoration: underline;
}

#blog-links a:active {
	color: #dd4000;
}

#blog-links span.date {
	color: #808080;
	text-transform: uppercase;
	font-weight: 400;
	font-size: 18px;
	line-height: 24px;
}

#blog-links span.summary {
	color: #808080;
}

article.main #aboutme {
	text-align: center;
	width: 90%;
	margin: auto;
	padding-bottom: 40px;
	color: #444;
}

/* Smaller screens */

@media all and (max-width: 880px) {
	article.main {
		margin-top: 0;
	}
}

@media all and (max-width: 740px) {
	article.main h4,
	article.main ul,
	article.main ol,
	article.main blockquote,
	article.main blockquote p,
	article.main pre,
	article.main pre code,
	article.main p,
	article.main footer,
	div.audio-player,
	#blog-links {
		padding-left: 40px;
		padding-right: 40px;
	}

	article.main div.note {
		margin-left: 40px;
		margin-right: 40px;
	}

	article.main blockquote:before {
		left: 52px;
	}

	article.main li {
		margin: 0 40px 0px 60px;
	}

	article.main header h1 {
		padding: 60px 40px 0 40px;
	}
}

@media all and (max-width: 600px) {
	article.main h4,
	article.main ul,
	article.main ol,
	article.main blockquote,
	article.main pre,
	article.main pre code,
	article.main p,
	article.main footer,
	div.audio-player,
	#blog-links {
		padding-left: 20px;
		padding-right: 20px;
	}

	article.main div.note {
		margin-left: 20px;
		margin-right: 20px;
	}

	article.main blockquote p {
		padding-left: 10px;
		padding-right: 10px;
	}

	article.main blockquote:before {
		left: 2px;
	}

	article.main li {
		margin: 0 20px 0px 40px;
	}

	article.main header h1 {
		font-size: 48px;
		line-height: 56px;
		padding: 60px 0 0 0;
	}
}

/* Dark mode */

@media (prefers-color-scheme: dark) {
	body {
		color: #ccc;
		background-color: #111;
	}

	article.main {
		border: 1px solid #3f3f44;
	}

	article.main header {
		background-color: #2f2f34;
		background-image: url("/images/header-dark.jpg");
	}

	article.main header h1 {
		color: #eee;
	}

	article.main header p {
		color: #eee;
	}

	article.main h2, article.main h3, article.main h4 {
		color: #eee;
	}

	article.main p code, article.main tt, article.main li code {
		color: #eee;
		background-color: #2f2f34;
	}

	article.main footer {
		background-color: #2f2f34;
	}

	#blog-links a {
		text-decoration: none;
		color: #eee;
	}

	article.main div.note {
		border: #80d080 1px solid;
		background-color: #408040;
	}

	article.main div.note p {
		color: #b0f0b0;
	}

	article.main div.note p a {
		color: #b0f0b0;
	}

	article.main div.note code {
		color: #b0f0b0;
	}
}