/* Master */

body {
	margin: 0;
	font-family: 'Open Sans', sans-serif;
	background-color: #101010;
	color: #f0f0f0;
	overflow-x: hidden;
}

::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

::-webkit-scrollbar-track {
	background: #404040; 
}
 
::-webkit-scrollbar-thumb {
	background: #606060; 
}

::-webkit-scrollbar-thumb:hover {
	background: #707070; 
}

/* Header */

.site-header {
	margin: 0;
	border: 0;
	border-style: solid;
	border-bottom-width: 1px;
	font-family: 'Red Hat Mono', monospace;
	font-weight: 500;
}

.site-nav {
	max-width: 900px;
	height: 23px;
	margin: auto;
	padding: 20px;
}

.main-menu {
	list-style-type: none;
	margin: 0;
	padding: 0;
	height: fill;
	font-size: 16px;
	margin-top: 1px;
}

.navlink {
	float: right;
	display: block;
	color: lightgray;
	transition-duration: 0.3s;
	text-decoration-color: #f0f0f000;
	text-decoration-thickness: 0px;
}

.navlink:hover {
	transition-duration: 0.15s;
	text-decoration-color: #f0f0f0ff;
	text-decoration: underline;
	text-decoration-thickness: 2px;
}

.navlink-sep {
	padding-left: 10px;
	padding-right: 10px;
	float: right;
	text-decoration: none;
}

.list-sep {
	color: #404040;
}

.deemphasis {
	color: #a0a0a0;
}

/* Main content */

.container {
	max-width: 895px;
	margin: auto;
	padding-left: 30px;
	padding-right: 30px;
	margin-bottom: 30px;
}

.title-background {
	padding: 40px;
	padding-bottom: 17px;
	padding-top: 120px;
	border-radius: 5px;
	margin-top: 26px;
	margin-left: -40px;
	margin-right: -40px;
	margin-bottom: 22px;
	transition-duration: 0.5s;
	background-position: 50% 50%;
}
.reading-container {
	margin-left: -40px;
	margin-right: -40px;
	width: unset;
}
.audio-reading {
	border-radius: 0 0 5px 5px;
	margin-top: 0;
	height: 37px;
}
@media only screen and (max-width: 970px) {
	.title-background {
		margin-top: 0;
	}
}
@media only screen and (max-width: 964px) {
	.container {
		overflow: hidden;
	}
	.reading-container {
		margin-left: -33px;
		margin-right: -33px;
		border-radius: 0 0 0 0;
	}
	.default-img {
		border-radius: 0 !important;
	}
}

.tag-container {
	display: block;
	margin-top: 3px;
	height: min-content;
}
.tag-block {
	display: inline-block;
	padding: 2px 5px;
	color: white;
	text-decoration: none;
	background: #00000033;
	border-radius: 3px;
	margin: 0;
	margin-right: 3px;
	margin-top: 4px;
	outline: #fff4 solid 1px;
	transition-duration: 0.2s;
}
.tag-block:hover {
	background: #ffffff18;
	outline: #fff6 solid 1px;
}
.tag-block:focus {
	background: #ffffff18;
	outline: #fff6 solid 2px;
}

.article-title {
	margin-bottom: 0px;
	text-shadow: #0007 0 0px 4px;
}
.date {
	margin-top: 0;
	font-weight: 500;
	display: inline;
	margin-bottom: 0;
}
.article-heading {
	margin-bottom: 10px;
}

h1 {
	font-weight: 300;
	margin-top: 30px;
	margin-bottom:16px;
}

h2 {
	margin-top: 20px;
	margin-bottom: 10px;
	font-weight: 300;
}

h3 {
	font-weight: 400;
}

spoiler {
	filter: blur(4px);
	transition-duration: 7s;
	opacity: 75%;
}
spoiler:hover {
	opacity: 100%;
	filter: blur(0px);
	background: none;
}

.heading-anchor {
	opacity: 10%;
	font-size: 18px;
	height: 18px;
	text-decoration: none;
	transition-duration: 0.2s;
	display: inline-block;
	vertical-align: middle;
}
.heading-anchor:hover {
	opacity: 70%;
}
.link-icon {
	margin-bottom: -1px;
	width: 16px;
	display: block;
	vertical-align: middle;
}

sup {
	font-size: 10px;
}

p {
	font-weight: 400;
}

img {
	width: 100%;
	max-width: 100%;
}
.default-img {
	width: calc(100% + 60px);
	max-width: calc(100% + 60px);
	margin: 0 -30px;
	border-radius: 4px;
}

.clean-separator {
	border-bottom: solid 1px #252525;
	padding-bottom: 10px;
}
hr {
	border: 0;
	height: 1px;
	background: #252525;
	margin-top: 21px;
	margin-bottom: 21px;
}

blockquote {
	margin-left: 0;
	padding-left: 37px;
	border-left-style: solid;
	border-left-width: 2px;
	border-left-color: #fa7116;
	transition-duration: 0.5s;
}

.caption {
	margin-top: 2px;
}

audio {
	width:100%;
	border-radius: 5px;
	box-shadow: rgba(0,0,0,0.6) 0 2px 4px;
}

code {
	font-family: 'Red Hat Mono', monospace;
	font-weight: 500;
	padding-right: 23px;
	display: inline-block;
	width: max-content;
}

pre {
	background-color: #171819;
	display: block;
	padding: 23px;
	border-radius: 5px;
	overflow: auto;
	font-size: 14px;
	border-style: solid;
	border-width: 1px;
	border-color: #212121;
}

:not(pre) > code {
	background: #181818;
	margin: -3px 0px -3px 0px;
	padding: 2px;
	border-radius: 4px;
	font-size: 15px;
	border-style: solid;
	border-width: 1px;
	border-color: #282828;
}

.webbutton {
	margin: 5px;
	height: 31px;
	width: 88px;
	image-rendering: pixelated;
	transition-duration: 1s !important;
	transition-delay: 0s !important;
	box-shadow: #0000 0px 0px 5px 5px;
	background: #0000;
	z-index: 1;
}
.webbutton:hover {
	transition-delay: 1.5s !important;
	transform: scale(3);
	z-index: 10;
	box-shadow: #0009 0px 0px 5px 5px;
	background: #0009;
}

.musing-item-title {
	text-decoration-opacity: 0;
	font-weight: 600;
	text-decoration-thickness: 0.1px;
	transition-duration: 0.3s;
	margin-top: 0px;
}
a:hover .musing-item-title {
	transition-duration: 0.1s;
	text-decoration: underline;
	text-decoration-opacity: 1;
	text-decoration-thickness: 1px;
}
a:focus .musing-item-title {
	transition-duration: 0.1s;
	text-decoration: underline;
	text-decoration-opacity: 1;
	text-decoration-thickness: 1px;
}

.post-snippet {
	display: block;
	padding: 5px;
	margin-bottom: 5px;
	border-radius: 7px;
	outline: #fff0 0px solid;
}
.post-snippet:hover {
	outline: #fff1 1px solid;
}
.post-snippet:focus {
	outline: #fff1 1px solid;
}

.musing-item-thumbnail {
	height: 50px;
	width: 50px;
	background: #222;
	object-fit: cover;
	border-radius: 4px;
	margin-right: 5px;
	outline: #fa7116 0px solid;
	transition-duration: 0.1s;
	transform: scale(1);
}
a:hover .musing-item-thumbnail {
	outline: #fa7116 1px solid;
	transform: scale(1.05);
}
a:focus .musing-item-thumbnail {
	outline: #fa7116 1px solid;
	transform: scale(1.05);
}

.musing-item-text-div {
	margin-left: 5px;
	margin-right: 5px;
}

.musing-item-date {
	font-size: 14px;
	display: inline-block;
	color: #fffd;
	text-decoration: 0 !important;
}
.musing-item-date:hover {
	text-decoration-thickness: 0px;
}

.musing-item-description {
	color: white;
	max-height: 0px;
	overflow: hidden;
	margin: 0;
	transition-duration: 0.4s;
}
a:hover .musing-item-description {
	color: white;
	max-height: 50px;
}

/* Colors */

.navlink {
	color: #c0c0c0;
}

.navlink:hover {
	color: #f0f0f0;
}

.navlink-sep {
	color: #404040;
	transition-duration: 0.3s;
}
	
.site-header {
	border-color: #202020;
	background: #171819;
}

a {
	color: #fa7116;
	text-decoration-color: #fa711600;
	text-decoration-thickness: 1px;
	transition-duration: 0.3s;
}
a:hover {
	text-decoration-color: #fa7116ff;
	transition-duration: 0.1s;
}

::selection {
	background: #fa7116;
	color: white;
}

/* Breakpoint(s) */

.mainlogo {
	width: 140px;
}

@media only screen and (max-width: 450px) {
	.mainlogo {
		margin-top: -1px;
		width: 35px;
		height: 25px;
	}
}
@media only screen and (max-width: 355px) {
	.navlink-sep {
		padding-left: 3px;
		padding-right: 3px;
	}
}

/* Fonts */


/* red-hat-mono-300 - latin */
@font-face {
  font-family: 'Red Hat Mono';
  font-style: normal;
  font-weight: 300;
  src: local(''),
       url('/fonts/red-hat-mono-v8-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/fonts/red-hat-mono-v8-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* red-hat-mono-regular - latin */
@font-face {
  font-family: 'Red Hat Mono';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('/fonts/red-hat-mono-v8-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/fonts/red-hat-mono-v8-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* red-hat-mono-500 - latin */
@font-face {
  font-family: 'Red Hat Mono';
  font-style: normal;
  font-weight: 500;
  src: local(''),
       url('/fonts/red-hat-mono-v8-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/fonts/red-hat-mono-v8-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* red-hat-mono-600 - latin */
@font-face {
  font-family: 'Red Hat Mono';
  font-style: normal;
  font-weight: 600;
  src: local(''),
       url('/fonts/red-hat-mono-v8-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/fonts/red-hat-mono-v8-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* red-hat-mono-700 - latin */
@font-face {
  font-family: 'Red Hat Mono';
  font-style: normal;
  font-weight: 700;
  src: local(''),
       url('/fonts/red-hat-mono-v8-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/fonts/red-hat-mono-v8-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}



/* open-sans-300 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local(''),
       url('/fonts/open-sans-v29-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/fonts/open-sans-v29-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* open-sans-regular - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('/fonts/open-sans-v29-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/fonts/open-sans-v29-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* open-sans-500 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 500;
  src: local(''),
       url('/fonts/open-sans-v29-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/fonts/open-sans-v29-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* open-sans-600 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: local(''),
       url('/fonts/open-sans-v29-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/fonts/open-sans-v29-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* open-sans-700 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: local(''),
       url('/fonts/open-sans-v29-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/fonts/open-sans-v29-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* open-sans-800 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 800;
  src: local(''),
       url('/fonts/open-sans-v29-latin-800.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/fonts/open-sans-v29-latin-800.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* open-sans-300italic - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300;
  src: local(''),
       url('/fonts/open-sans-v29-latin-300italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/fonts/open-sans-v29-latin-300italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* open-sans-italic - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: local(''),
       url('/fonts/open-sans-v29-latin-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/fonts/open-sans-v29-latin-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* open-sans-500italic - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 500;
  src: local(''),
       url('/fonts/open-sans-v29-latin-500italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/fonts/open-sans-v29-latin-500italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* open-sans-600italic - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 600;
  src: local(''),
       url('/fonts/open-sans-v29-latin-600italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/fonts/open-sans-v29-latin-600italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* open-sans-700italic - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 700;
  src: local(''),
       url('/fonts/open-sans-v29-latin-700italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/fonts/open-sans-v29-latin-700italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* open-sans-800italic - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 800;
  src: local(''),
       url('/fonts/open-sans-v29-latin-800italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/fonts/open-sans-v29-latin-800italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}