/* override css styles of the main theme here */

section.main .content .page-heading {
	font-size: 2.0rem;
}
	
/* Syntax Highlight */
section.main .content .markdown chroma {
	background-color: #252525;
}

section.main .content .markdown .chroma,
section.main .content .markdown code,
section.main .content .markdown pre {
	background-color: #f7f7f7;
}

section.main .content .markdown pre.chroma {
	max-height: 600px;
}
section.main .content .markdown pre.chroma,
section.main .content .markdown .chroma pre {
	/* Hugo specific: consider using the 'highlight' shortcode */
	word-wrap: normal;
	overflow: auto;
	white-space: pre;
}

section.main .content .markdown .chroma table {
	overflow: auto;
	display: block;
	max-height: 600px;
	border: 0px solid #e5e5e5;
}

section.main .content .markdown .chroma table pre {
	margin: 0 0;
}

section.main .content .markdown .chroma td,
section.main .content .markdown .chroma th {
	padding: 0 0; 
	border: 0 solid #e5e5e5;
}

span.lnt {
	display: block;
	white-space: nowrap; 
}

/*********
Footnotes
/*********/
section.footnotes {
	margin-left: 0;
	margin-right: 0;
	align-items: left;
	display: block;
}

/*********
Mobile tweaks
/*********/

@media (max-width: 600px) {
	section.main .container .content .post-item {
		display: block;
		margin-bottom: 5pt;
	}
	
	section.main .container .content .post-item .meta {
		display: block;
		text-align: left;
		font-size: 90%;
	}

}

/*********
Figures & Images
/*********/

section.main .content .markdown figure img {
	margin-bottom: 0px;
}

section.main .content .markdown figcaption p {
	text-align: center;
	color: #999999;
	font-size: 0.8em;
}

section.main .content .markdown p.caption {
	text-align: center;
	color: #999999;
	font-size: 0.8em;
}

section.main .content .markdown .center {
	text-align: center;
}
/*********
Footnotes
/*********/

section.main .content .markdown sup,
section.main .content .markdown sub {
	/* Specified in % so that the sup/sup is the
	right size relative to the surrounding text */
	font-size: 75%;

	/* Zero out the line-height so that it doesn't
	interfere with the positioning that follows */
	line-height: 0;

	/* Where the magic happens: makes all browsers position
	the sup/sup properly, relative to the surrounding text */
	position: relative;

	/* Note that if you're using Eric Meyer's reset.css, this
	is already set and you can remove this rule */
	vertical-align: baseline;
}

section.main .content .markdown sup {
	/* Move the superscripted text up */
	top: -0.5em;
}
section.main .content .markdown sub {
	/* Move the subscripted text down, but only
	half as far down as the superscript moved up */
	bottom: -0.25em;
}

/*********
Self-Intro
/*********/

section.header h3.selfintro {
	font-size: 1em;
	font-family: 'Raleway', 'Helvetica Neue', 'Arial', sans-serif;
	letter-spacing: -0.005rem;
	font-weight: 400;
	color: #555;
	margin-bottom: 1rem;
}



.videoContainer {
	position: relative;
	height: 0;
	padding-top: 56.25%;
	width: 100%;
	margin-top: 1em;
	margin-bottom: 1em;
}
.videoContainer iframe {
	position: absolute;
	top: 0;
	left: 0;
	border: 0;
	width: 100%;
	height: 100%;
}

/*********
Prelude
/*********/

section.main .content .markdown .prelude {
	background-color: #f6f6f6;
	border-radius: 10pt;
	border: 2pt solid #eee;
	margin: 0 5pt 30pt 5pt;
	padding: 8pt 10pt 0pt 10pt;
}

section.main .content .markdown .prelude p {
	/* font-size: 0.9em; */
	color: #333333;
	padding: 0pt 0pt 0pt 14pt;
}

/*********
Update
/*********/
section.main .content .markdown .update {
	background-color: #f5f2dc;
	border-radius: 5pt;
	border: 2pt solid #f5f2dc;
	margin: 0 5pt 30pt 5pt;
	padding: 8pt 10pt 0pt 10pt;
}

@media (min-width: 600px) {
  .container {
    margin: 0;
  }
}

/****
 * Dark Mode
 */

section.icons .content a .icon {
	color: #555;
}

@media (prefers-color-scheme: dark) {
	body {
		background-color: rgb(24,24,24,1);
	}
	section.header .name {
		color: #ccc;
	}
  
	section.header h3.selfintro {
		color: #999;
	}

	section.header nav ul a {
		color: #999;
	}
	section.header nav ul a:hover {
		color: #ccc;
	}

	section.main .content {
		color: #bcbcbc;
	}
	section.main .content .markdown blockquote {
		color: #e5e5e5;
	}
	section.main .content .page-heading {
		color: #ccc;
		font-size: 2.0rem;
	}
	section.main .content .front-matter .meta {
		color: #999;
	}

	section.main .container .content .post-item .meta {
		color: #999;
	}
	
	section.main .content .markdown h1,
	section.main .content .markdown h2,
	section.main .content .markdown h3,
	section.main .content .markdown h4,
	section.main .content .markdown h5,
	section.main .content .markdown h6 {
		color: #ccc;
	}
	
	section.main .content .markdown .chroma, 
	section.main .content .markdown code, 
	section.main .content .markdown pre {
		background-color: #252525;
	}
	
	section.icons .content a .icon {
		color: #aaa;
	}
	
	section.main .content .markdown .prelude {
		background-color: #454545;
		border-color: #666;
	}

	section.main .content .markdown .prelude p {
		/* font-size: 0.9em; */
		color: #ccc;
	}
	
	
	section.main .content .markdown tbody tr:nth-child(odd) td,
	section.main .content .markdown tbody tr:nth-child(odd) th {
	  background-color: #252525;
	}
	
	section.main .content .markdown .update {
		background-color: #1E1E1E;
		border: 2pt solid #aaa;
	}
	
}

@media (max-width: 600px) and (prefers-color-scheme: dark){  
  	section.header {
  		background-color: #1d1d1d;
  	}
  	section.icons {
  		background-color: #1d1d1d;
  	}
}