/* 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{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,details,figcaption,figure,footer,header,hgroup,menu,section{display:block}body{line-height:1}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}
*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }


/* Variables */

/* Potential magenta color: #5B70D9 */
:root {
	--background: #FFFFFF;
	--block: #FFFFFF;

	--text: #1e1e1e;
	--dark-text: #FFFAFA;

	--link: #0546d1;
	--highlight: #dde8fc;
	--focus: #cb3b69;
	--focus-highlight: #f0e5de; 

	--heading: #000000;
	--heading-highlight: #ebebeb;
	
	--bump: #F4F4F4;
	--bump-text: #888888;
	--info: #9b9b9b;

	--button: #20293A;
	--button-text: #ffffff;
	--button-hover: #cb3b69;
	--button-hover-text: #ffffff;
	--secondary: #cccccc;
	--button-dark: #2833d3;
	--button-dark-hover: #cb3b69;

	--input: #f0f3f5;
	--input-text: #181818;
	--input-dark: #B6C2EC;
	--input-border: #D8D7E4;

	--hr: #eee;
	--border: #e9e9e9;
	--tag: #E8EAED;
	--tag-text: #999999;

	--vector: #ACAFB4;
	--action: #EFF2FE;
	--action-text: #4B5668;
	--quote: #F2F2F6;
	--quote-border: #e9e9f0;
	--mark: #FCF0A9;

	--icon: #788397;
	--font: system-ui, -apple-system, BlinkMacSystemFont, "SF UI Text", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}

@media (prefers-color-scheme: dark) {
	body {
		--background: #18181b;
		--block: #28292C;

		--text: #cccccc;
		--dark-text: #cccccc;

		--link: #a1bff1;
		--highlight: #323d51;
		--focus: #cc4576;
		--focus-highlight: #553530; 
		--heading: #cccccc;
		--heading-highlight: #383838;

		--heading: #cccccc;
		--heading-sub: #494949;

		--bump: #393B40;
		--bump-text: #aaaaaa;
		
        --button: #92B5F2;
        --button-text: #000000;
		--button-hover: #cc4576;
		--button-hover-text: #000000;
		--secondary: #888888;
		--button-dark: #E8993E;
		--button-dark-hover: #cc4576;

        --input: #26262A;
		--input-text: #aaaaaa;
		--input-dark: #26262A;
		--input-border: #404045;

		--hr: #393B40;
		--border: #323336;
		--tag: #333333;
		--tag-text: #aaaaaa;

		--vector: hsl(225, 5%, 15%);

		--icon: #cccccc;

		--action: #26262A;
		--action-text: #cccccc;
		--quote: #2D3037;
		--quote-border: #292b2f;
		--mark: #b49866;
	}
}

/* Base */
html, body { 
	height: 100%; 
	-webkit-text-size-adjust: 100%;
}

body {
	background: var(--background);
	font:18px var(--font);
	font-weight: 400;
	color: var(--text);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	letter-spacing: normal;
	-webkit-font-smoothing: subpixel-antialiased !important; 
    text-rendering:optimizeLegibility !important;
}

img {
	max-width: 100%;
	border: 0px;
	display: block;
	border-radius: 15px;
}

.inline {
	padding: 0px;
	width: 30%;
  	margin: auto;
	margin-top: 20px;
	margin-bottom: 20px;
  	display: block;
}

.center {
	text-align: center;
	color: var(--link);
	padding: 0 30px 0 30px; 
}

mark {
	background: var(--mark);
}

/* Clearfix */
.clearfix:after {
	content: "";
	display: table;
	clear: both;
}
.hidden { 
	display: none; 
}

/* Layout */

.block {
	display: block;
}

.block-sec {
	display: inline-block;
	border: 1px solid var(--tag);
	border-radius: 15px;
	width: 100%;
	padding: 20px;
}

.block-action {
	background: var(--action);
	color: var(--action-text);
	padding: 20px 20px 20px 20px;
	/* box-shadow: 0px 5px 10px 1px rgba(0, 0, 0, 0.05); */
	/*	box-shadow: 0px 7px 20px -1px rgba(0,0,0,0.15);*/
	border: 0px;
	border-radius: 15px;
	width: 100%;
}

.block-rel {
	margin-bottom: 50px;
}

.block-rel-small {
	margin-bottom: 20px;
}

.minwidth200 {
	min-width: 200px;
}

.description {
	color: var(--action-text);
}

/*
.mt-20 {
	margin-top: 20px;
}*/

.meta {
	display: block;
}

.content {
	max-width: 900px;
	margin: 0 auto;
	position: relative;
	margin-top: 40px;
	margin-bottom: 0px;
	padding: 0px 20px 0px 20px;
}

.el {
	margin-right: 10px;
	display: inline-block;
}

/* Flexbox */ 

.post-row {
	justify-content: flex-start;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	/* Safari is bad */ 
	/* row-gap: 8px; */
}

.item-row {
	justify-content: start;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.post-row-element, .item-row-element {
	margin-bottom: 10px;
	display: inline-block;
}

.post-list-item {
	align-items: flex-start; 
	justify-content: left;
}

.post-list-item-small {
	max-width: 630px;
}

.break {
	flex-basis: 0%;
}


/* Elements */

.content .date {
	color: var(--info);
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	-webkit-transition: all 0.15s ease;
	-moz-transition: all 0.15s ease;
	-ms-transition: all 0.15s ease;
	-o-transition: all 0.15s ease;
	transition: all 0.15s ease;
}

#post-list .date {
	padding-bottom: 6px;
}

.content .tag  {
	height: 32px;
	padding: 6px 8px 6px 8px;
	border-radius: 12px;
	color: var(--tag-text);
	border: 1px solid var(--tag);
	-webkit-transition: all 0.15s ease;
	-moz-transition: all 0.15s ease;
	-ms-transition: all 0.15s ease;
	-o-transition: all 0.15s ease;
	transition: all 0.15s ease;
	font-size: 16px;
}

.content .tag-line {
	display: flex;
	align-items: center;
}

.content a.tag:hover {
	background: var(--bump);
	border-color: var(--tag) !important;
}

.article-image {
	display: block;
	width: 100%;
	margin-bottom: 20px;
}

.content .lead {
	padding: 0px;
	color: var(--link);
	display: inline-block;
	text-align: center;
	transition: all .2s;
	margin: 0px 10px 0px 0px;
	appearance: none;
	-webkit-appearance: none;
	-webkit-transition: all .2s;
	-o-transition: all .2s;
	display:inline-flex;
	vertical-align: top;
	align-items: center;
}

.vector-icon {
	fill: var(--icon);
	margin-right: 6px;
}

.vector-icon-dark {
	fill: var(--button-hover-text);
	margin-right: 6px;
}

.vector-icon-actionable:hover, .vector-icon-actionable:active, .vector-icon-actionable:focus {
	fill: var(--focus);
	transition: all .2s;
	-webkit-transition: all .2s;
	-o-transition: all .2s;
}

/* Unique */

#profile {
	width: 100%;
}

#avatar {
	width: 50px;
	height: 50px;
	display: inline;
	border: 0px;
	box-sizing: content-box;
	margin-bottom: -10px;
}

#footer {
	height: 100px;
	width: 100%;
}

#post-body h1 {
	border-bottom: 1px solid var(--highlight);
	display: block;
}

#post-list {
	margin-top: 10px;
}

/* Bleed for images 
#post-list img, #post-body img {
	max-width: none !important;
	width: 110% !important;
	position: relative;
	left: -5%;
	object-fit: cover;
} 

/*
#post-list figure, #post-body figure {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 1em auto;
    text-align: center
}*/

#post-nav {
	text-align: center;
}

#post-body {
	margin-top: 20px;
	line-height: 1.7;
}

#about img {
	width: 60%;
	text-align: center;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

#site-name {
	letter-spacing: 1.2px;
	font-size: 18px;
}

/* Links */
a {
	color: var(--link);
	border-bottom: 1px solid var(--highlight);
	text-decoration: none;
}

.nav-link {
	font-weight: 400;
}

.content h1 a, .content h1 a:visited, .content h2 a, .content h2 a:visited, .content h3 a, .content h3 a:visited {
	color: var(--heading);
	border-bottom: 1px solid var(--heading-highlight); 
	margin-bottom: 20px;
}

.content a:hover, .content a:active, .content a:focus {
	border-bottom: 1px solid var(--focus-highlight) !important;
	color: var(--focus) !important;
	transition: all .2s;
	-webkit-transition: all .2s;
	-o-transition: all .2s;
}

.content a:active, .content a:active {
	outline: 1px dotted #cccccc !important;
}

a.no-decor, a.no-decor:hover, a.no-decor:active, a.no-decor:focus {
	border: 0px !important;
	box-sizing: content-box;
}

/* Forms */
.content .button {
	color: var(--button-text);
	font: 16px var(--font);
	background-color: var(--button);
	cursor: pointer;
	border: 0px;
	border-radius: 8px;
	text-decoration: none;
	display: inline-block;
	padding: 8px;
	height: 36px;
	text-align: center;
	box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.1);
	display: inline-flex;
	vertical-align: center;
	align-items: center;
	transition: all .2s;
	appearance: none;
	-webkit-appearance: none;
	-webkit-transition: all .2s;
	-o-transition: all .2s;
}

.content .button-alt {
	background: #dd9c2d;
}

.content .button-dark {
	background: var(--button-dark);
}

/*
.content .button-secondary {
	background-color: var(--bump);
	color: var(--link);
	cursor: pointer;
	border: 0px !important;
	border-radius: 8px;
	text-decoration: none;
	display: inline-block;
	padding: 10px;
	height: 36px;
	text-align: center;
	transition: all .2s;
	font:16px var(--font);
	margin: 0px 10px 0px 0px;
	-webkit-appearance: none;
	-webkit-transition: all .2s;
	-o-transition: all .2s;
	display:inline-flex;
	vertical-align: top;
	align-items: center;
} */

.content .button:hover, .content .button:active {
	background: var(--button-hover);
	color: var(--button-hover-text) !important;
	border: none !important;
}

.content .button-dark:hover {
	background: var(--button-dark-hover);
	color: var(--button-hover-text) !important;
	border: none !important;
}

.content a.button-secondary:hover {
	background: var(--highlight);
	box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.05);
}

.edit {
	padding: 8px 9px;
	border: 1px solid var(--input-border);
	font:16px var(--font);
	min-width: 300px;
	transition-duration: 0.4s;	
	height: 36px;
	background-color: var(--input);
	border-radius: 8px;
	text-decoration: none;
	transition: all .2s;
	color: var(--input-text);
	margin: 0px 10px 0px 0px;
	-webkit-transition: all .2s;
	-o-transition: all .2s;
	appearance: none;
	-webkit-appearance: none;
	outline:none;
		/*box-sizing: border-box; */
}

.content .edit-dark {
	background: var(--background);
}

.content .button-small {
	font-weight: 500;
	cursor: pointer;
	font-size: 16px;
	color: var(--text);
	border: 0px;
	background-color: var(--tag);
	border-radius: 12px;
	text-decoration: none;
	display: inline-block;
	padding: 8px;
	text-align: center;
	transition: all .2s;
	appearance: none;
	-webkit-appearance: none;
	-webkit-transition: all .2s;
	-o-transition: all .2s;
}

.content a.button-small:hover, .content a.button-small:active, .content a.button-small:focus {
	border: none !important;
}

/*Lists*/

ul, ol 	{ 
	margin:0; 
	padding:0; 
}

ul { 
	list-style-type:disc; 
}

ol { 
	list-style: decimal; 
}

li	{ 
	list-style-position:outside; 
	line-height:1.7; 
	margin-left: 19px;
}

li ul {
	list-style-type:disc; 
}

li::marker {
	color: var(--link); 
}

/* Default elements */ 

/* Line Height */
p { line-height:1.7; padding: 0px; margin: 0px;}

b, strong { font-weight: bold; }
em, i { font-style: italic; }

/* Headers */
p, ul, ol, pre {
	margin-bottom: 15px;
}

.para {
	margin-bottom: 10px;
}

h1, h2, h3, h4, h5 {
	margin-bottom: 10px;
	color: var(--text);
}

h6 {
	margin-bottom: 5px;
	color: var(--text);
}

h1 {
	font-size: 36px;
	font-weight: bold;
	font-weight: 700;
	letter-spacing: normal;
	line-height: 120%;
}

h2 {
	font-size:26px;
	font-weight: 700;
	letter-spacing: normal;
}

h3 { font-size:28px; font-weight:bold; }
h3 { font-size:24px; font-weight:bold; }
h4 { font-size:22px; font-weight:bold; }
h5 { font-size:20px; font-weight: bold; }
h6 { font-size: 19px; font-weight: 500; }

blockquote {
	padding: 0px 10px 0px 20px;
	margin: 10px 0px 10px 0px;
	border-left: 4px solid var(--link);
	/*
	border-radius: 3px;
	background: var(--quote);
	border: 1px solid var(--quote-border);
	border-radius: 10px;
	background: var(--quote);
	*/
}

blockquote p { margin: 0px; }

hr {
	display: block;
	border: none;
	height: 1px;
	margin: 10px 0px 30px 0px;
	background: var(--hr);
	/*box-shadow: 0px 5px 15px 0.5px rgba(0, 0, 0, 0.2);*/
}

span.code { font-family:Menlo, Monaco, Courier; background-color:#EEE; font-size:14px; }

pre	{
	font-family:Menlo, Monaco, Courier;
	white-space:pre-wrap;
	/*border: 1px solid #ddd;*/
	padding:20px;
	background-color:#fdfdfd;
	/*font-size:14px;*/
	overflow:auto;
	border-radius: 3px;
	background: #272b2d;
	  font-family: 'Source Code Pro',Menlo,monospace;
	  font-size: 13px;
	  line-height: 1.5em;
	color: #d0d4d7;

}

/* Tables */
table {
	width: 100%;
	margin: 40px 0;
	border-collapse: collapse;
}

th,td {
	text-align: left;
	padding-right: 20px;
	vertical-align: top;
}

table td,td {
	border-spacing: none;
	border-style: solid;
	padding: 10px 15px;
}

tr>td {
	border-top: 1px solid #eaeaea;
}

tr:nth-child(odd)>td {
	background: #fcfcfc;
}

thead th,th {
	text-align: left;
	padding: 10px 15px;
	height: 20px;
	font-size: 13px;
	font-weight: bold;
	color: #444;
	border-bottom: 1px solid #dadadc;
	cursor: default;
	white-space: nowrap;
}

/* Media Queries */
@media screen and (max-width: 780px) {

	.content {
		margin: 30px 0px 0px 0px;
	}

	#post-list {
		margin-top: 30px;
	}


	.main-nav {
		margin: 0px 10px 0px 10px;
	}


	.break {
		flex-basis: 100%;
	}

	#post-list h6 {
		margin-bottom: 0px;
	}

	h1 {
		font-size: 26px;
		line-height: 150%;
	}
	
	h2 {
		font-size: 24px;
	}
	
	h3 { font-size:22px; font-weight:bold; }

	.edit {
		min-width: 100px;
	}

	.edit::placeholder {
		color: var(--bump-text);
	}

	#about img {
		width: 100%;
		text-align: center;
		display: block;
		margin-left: auto;
		margin-right: auto;
	}

	.content .lead {
		font-size: 15px;
	}
}

@media screen and (max-width: 600px)
{

	body, .content .button, .edit {
		font: 17px;
	}


	.content .lead {
		font-size: 13px;
	}

	.flex-to-center {
		justify-content: center;
		text-align: center;
	}
}

/*
@media screen and (max-width: 1000px)
{
	#post-body img, #post-list img {
		border-radius: 0px !important;
	}
}

@media screen and (max-width: 500px)
{
	#post-body img, #post-list img {
		width: 100%;
		max-width: 100% !important;
		left: 0%;
	}
}
*/

@media screen and (max-width: 510px)
{
	#subscribe-button {
		padding: 0px;
		text-align: center;
		width: 220px;
		display: block; 
		margin: 0 auto;
	}

	.edit {
		width: 218px;
		margin: 0 auto;
		display: block; 
	}
}

/* DEPRECATED
@media screen and (max-width: 350px)
{
	.nav-left {
		display: none;
	}
} */

/* CUSTOM ADDITIONS */

a.symbol {
    color: #cdd4da;
    font-size: 2rem;
    text-decoration: none;
	margin-right: 0.3rem;
	border:0px !important;
}

a.symbol:hover {
	color: var(--highlight);
	border:0px !important;
}

code {
	font-family:Menlo, Monaco, Courier;
	background-color:#EEE; font-size:14px;
	padding: 4px;
	font-weight: 600;
}

.turbolinks-progress-bar {
	background-color: var(--link) !important;
}