/*! Copyright jemhadar.com,
    Reproduce without our permission and die.
*/

@import url('https://fonts.googleapis.com/css2?family=Special+Elite&family=Syne+Mono&display=swap');

:root { 
	--body-font-size: 1.1rem; 
	--line-height: 1.5rem; 
	--h1-font-size: 2rem; 
	--h2-font-size: 1.5rem; 
	--h3-font-size: 1.3rem; 
	--small-font-size: 0.8rem; 
	--xsmall-font-size: 0.6rem; 
}

html { 
	--box-background-color: hsl(240, 9%, 90%); 
	--extra-light-text-color: hsl(240, 1%, 45%); 
	--light-border-color: hsl(0, 0%, 90%); 
	--light-text-color: hsl(240, 1%, 35%); 
	--link-color: #948A76; 
	--main-background-color: rgb(255, 255, 255); 
	--main-text-color: hsl(0, 0%, 10%); 
	--underline-color: hsl(0, 0%, 50%); 
}

@media (prefers-color-scheme: dark) { 
	html { --box-background-color: hsl(0, 0%, 20%); 
		--extra-light-text-color: hsl(0, 0%, 55%); 
		--light-border-color: hsl(0, 0%, 30%); 
		--light-text-color: hsl(144, 97%, 39%); 
		--link-color: hsl(0, 0%, 100%);  
		--main-background-color: hsl(180, 14%, 1%); 
		--main-text-color: hsl(144, 97%, 39%); 
		--underline-color: hsl(0, 0%, 50%); 
	} 
	p { 
		letter-spacing: .00em; 
	} 
}

html { 
	background-color: var(--main-background-color); 
	color: var(--main-text-color); 
	font-family: "Syne Mono", serif; 
	font-feature-settings: "kern" on; 
	font-variant-ligatures: common-ligatures; 
	height: 100%; 
	margin: 0; 
	text-rendering: optimizeLegibility; 
	-moz-osx-font-smoothing: grayscale; 
	-webkit-font-smoothing: antialiased; 
}

* { 
	padding: 0; 
}

body { 
	align-items: center; 
	display: flex; 
	flex-direction: column; 
	height: 100%; 
	margin: 0; 
	padding: 0 7.5%; 
}

p, details, summary { 
	font-size: var(--body-font-size); 
	line-height: 1.5; 
}

li {
	font-size: var(--body-font-size); 
	line-height: 1.5;
}

hr {
    border: 1px dashed #707070;
    border-style: none none dashed; 
	width:99%; 
}

.col li {
	line-height: 1.3;	
}

nav { 
	font-size: var(--small-font-size); 
	margin: 0; 
}

nav a { 
	color: var(--light-text-color); 
	margin-right: 5%; 
	text-decoration: none; 
}

nav .main-nav { 
	margin: 0 5% 0 0; 
}


.logo {
	margin-left:2%;
	float:left; 
	height:auto;
	width:40px;	
} 

.acontainer {
	width:100%;
	height:auto;
	padding:1%;
}



main { 
	flex: 1; 
	margin: 0; 
	max-width: 600px; 
	width: 100%; 
}

article { 
	flex: 1; 
	margin: 0; 
	max-width: 600px; 
	width: 100%; 
}

header { 
	margin: calc(1.5 * var(--line-height)) 0 calc(1.5 * var(--line-height)) 0; 
	max-width: 600px; 
	width: 100%; 
}

header h1 { 
	font-size: var(--h1-font-size); 
	margin: 0; 
	font-weight: normal;
}

header h1 a { 
	text-decoration: none;
}

header h1 a:hover { 
	text-decoration: none;
}

header nav { 
	margin-top: calc(.25 * var(--line-height)); 
}

header centered {
  left: 0;
  line-height: 40px;
  margin-top: -100px;
  position: absolute;
  text-align: center;
  top: 50%;
  width: 100%;
}

header img {
	margin: 0; 
}

time { 
	color: var(--light-text-color); 
	display: block; 
	font-size: var(--small-font-size); 
	margin-top: calc(.25 * var(--line-height)); 
}

footer { 
	color: var(--light-text-color); 
	display: flex; 
	flex-wrap: wrap; 
	font-size: var(--small-font-size); 
	margin: calc(1 * var(--line-height)) 0 0 0; 
	max-width: 600px; 
	padding: 1em 0 calc(1.5 * var(--line-height)) 0; 
	width: 100%; 
}

footer a { 
	color: var(--light-text-color); 
	/*margin-right: 5%; */
	text-decoration: none; 
}

h2 { 
	font-size: var(--h2-font-size); 
	margin: calc(var(--line-height) * 1.5) 0 0 0; 
	font-weight: bold; 
}

header h2 a { 
	text-decoration: none;
}

header h2 a:hover { 
	text-decoration: none;
}


h3 { 
	font-size: var(--h3-font-size); 
	margin: calc(var(--line-height) * 1.5) 0 0 0; 
	font-weight: bold; 
}

h2 + p, h3 + p { 
	margin-top: calc( var(--line-height) * .75); 
}

ul, ol { 
	list-style-position: outside;
	padding-left: var(--line-height);
}

li + li { 
	margin: calc(.5 * var(--line-height)) 0 0 0; 
}

blockquote { 
	font-style: italic; 
	margin: var(--line-height) 0; 
	color: var(--light-text-color); 
	font-size: 0.9rem;  
	line-height: 1.6em; 
	padding: 0 1.7em;  
}

tiny { 
	font-size: var(--xsmall-font-size); 
	margin: 0; 
	text-align: left; 
}

blockquote li { 
	padding: 0; 
}

quote-source { 
	font-style: italic; 
	margin-top: calc( .5 * var(--line-height)); 
	padding: 0 1.5em; 
}

a { 
	color: var(--main-text-color); 
	text-decoration-style: underline; 
}

pre { 
	font-family: Source Code Pro, Menlo, Monaco, monospace; 
	font-size: 1rem; 
	hanging-punctuation: none; 
	overflow: scroll; 
	padding: var(--line-height); 
}

code { 
	font-family: Source Code Pro, Menlo, Monaco, monospace; 
	font-size: 0.8rem; 
	line-height: 0.8rem; 
}

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

a:hover { 
	color: var(--link-color); 
	text-decoration: underline; 
	text-decoration-style: solid; 
}

.post-list { 
	color: var(--main-text-color); 
	text-decoration: none; 
}

.post-list p {
	line-height: 0.3;
	margin-top: 0;
  	margin-bottom: 0;
} 

.main-nav { 
	padding-bottom: calc(.3 * var(--line-height)); 
	display: flex; line-height: 1.4; 
	margin-top: calc(.5 * var(--line-height)); 
	max-width: 600px; 
	width: 100%; 
	min-height: var(--line-height); 
}

.main-nav a, .main-nav .nav-current-page { 
	margin: 0 5% 0 0; 
}

.redacted span {
	position: relative;
	white-space: pre;
	&:after {
	  background: white;
	  border-radius: 0.1em;
	  box-shadow: 0 0 1px rgba(0,0,0,0.35);
	  content: " ";
	  width: 100%;
	  height: 1.3em;
	  left: 0;
	  position: absolute;
	  transform: skewY(-5deg) rotate(5deg);
	  transform: skewY(-5deg) rotate(5deg);
			}
}