header { flex-basis: 100%; flex-shrink: 0; }
article { flex-basis: 60%; padding-left: 1em; }
footer { flex-basis: 100%; flex-shrink: 0; }
header nav { display: flex; justify-content: space-between; }
nav a, header a { text-decoration: none ; color: inherit; }
header h1 span { margin-left: 1em; font-size: 50%; font-style: italic; }
body > nav { flex-basis: content; padding-right: 1vw; min-width: 16em; }
nav ul { display: flex; flex-direction: column; list-style-type: none; list-style-position: outside; padding-left: 0;  }
nav li ul { padding-left: 0.6em }
footer { display: flex; justify-content: space-between; }

* {
  cursor: url('https://thedaemons.space/Images/cursor.png'), auto;
}

body {
	background-color: #fbfbe7;
	color: rgb(14, 0, 0);
	link: #55aaaa;
	visited: #55aaaa;
	active: #55aaaa;
	font-family: Helvetica, Arial, sans-serif;
	display: flex;
	flex-wrap: wrap;
}
/* header and top bar */
header nav { background-color: #b4ab99; color: white; padding: 0.3em; font-size: 100%; }
header h1 { background-color: #b4ab99; color: black; margin: 0; border-bottom: 4px solid #72635c; font-weight: normal; padding: 0.25ex;text-align: right; }
header a:hover { text-decoration: none; }

/* sidebar */
body > nav { border-right: 4px solid #55aaaa; padding: 0;  } 
body > nav > div { border-bottom: 0px solid #ddd; } 
body > nav > div a { color: rgb(14, 0, 0); display: block; text-transform: capitalize; font-weight: bold; padding: 0.25em 1ex 0.25em 2mm; font-size: 102%} 
body > nav > div a:hover { color: #f4dab0; background-color: #b4ab99; border-left: black solid 0.2em; text-decoration: none; }
body > nav > div p { font-weight: bold; margin: 0 0 0.5em 2mm; padding: 1em 0 0 0; }

.container {
	display: flex;
	align-items: left;
	justify-content: left;
}

.image {
	flex-basis:10%;
}
.text {
	padding-left: 10px;
}

.thumb {
	width:250px;
}

hr {
	width:50%;
	border-width:2px;
	color:cyan;
	border-style:solid;
}

img{max-width:100%}
nav{float:left;width:12em}
article{float:left;margin-bottom:4em;max-width:80%;padding:1em}
article p{max-width:44em}
nav p{font-weight:bold;font-size:2em}
nav li{list-style-type:none}
nav ul{margin-left:.5em;padding:0}
nav a{text-decoration:none;color:black}
.cur{font-style:italic}
.sitemap{position:absolute;top:0;right:2em}
.n{max-width:70%;}
.n a{color:black;text-decoration:none}
body{font-family:sans;max-width:100%}
pre{overflow:scroll;max-width:100%}
.col{width:4em}
.nolts{list-style-type:none}
.large img {width:100%}
footer p {clear:both;margin-left:2em}
a:hover {color:gray;text-decoration:none}

@media only screen and (max-width: 640px) {
nav{float:none}
article{max-width:100%;float:none}
}