* {
  box-sizing: border-box;
    word-wrap: break-word;
  overflow-wrap: break-word;

-webkit-hyphens: auto;
   -moz-hyphens: auto;
        hyphens: auto;
}

@font-face {
  font-family: serif-font;
  src: url(fonts/vermiglione.ttf);
  font-style: normal;
  font-weight: normal;
}

@font-face {
  font-family: serif-font;
  src: url(fonts/EBGaramond-Bold.ttf);
  font-style: normal;
  font-weight: bold;
}

@font-face {
  font-family: serif-font;
  src: url(fonts/EBGaramond-Italic.ttf);
  font-style: italic;
  font-weight: normal;
}

@font-face {
  font-family: glossary_font;
  src: url(fonts/century-roman.otf);
}

@font-face {
  font-family: mono;
  src: url(fonts/CONSOLAS.TTF);
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: mono;
  src: url(fonts/CONSOLAS_B.TTF);
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: sans-font;
  src: url(fonts/Raleway-Regular.ttf);
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: sans-font;
  src: url(fonts/Raleway-Bold.ttf);
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: h2_font;
  src: url(fonts/GoudyBookletter1911.otf);
}

@font-face {
  font-family: nav_font;
  src: url(fonts/Raleway-Regular.ttf);
}



:root {
	--bg-body:#fff;
	--bg-body-link-hover:#003060;
	--bg-nav:#003060;
	--bg-nav-hover:#68BBE3;
	--bg-wrapper:#eee;
	--bg-content:#fff;

	--color-body:white;
	--color-body-link:#055C9D;
	--color-body-link-hover:#68BBE3;
	--color-nav:;
	--color-nav-link:#ddd;
	--color-nav-link-hover:#68BBE3;
	--color-content:#222;
	--color-heading:#055C9D;
	--color-post-date:#055C9D;

	--border-nav:#003060;

	--glossary-font:glossary_font;
}


html {
	width: 100vw;
	height: 100vh;
}

body {
	font-family: serif-font;
	xbackground-color: #eee;
	font-size: 22px;
	margin: 0;
	padding: 0;
	width: 100%;
	
}

nav {
	position: fixed;
	font-family: nav_font;
	top:0;
	left:0;
	height: 100vh;
	background-color: var(--bg-nav);
	width: 250px;
	text-transform: capitalize;
	text-align: left;
	xfont-size: 1.25em;
}

nav a:link, nav a:visited {
	color: white;
	text-decoration: none;
}

nav a:hover {
	background-color: rgba(255, 255, 255, 0.5);
}

nav ul, nav ol {
	  list-style-type: none;
  margin: 0;
  padding: 2ch;
}

nav li {
	border-top: white 1px dotted;
	padding:2px 0;
}

footer {
	position: fixed;
	font-family: nav_font;
	left:0;
	bottom: 0px;
	color: #8098b0;
	padding: 5px;
	margin: 0;
	text-indent: ;
	background-color: var(--bg-nav);
	width: 250px;
	max-width: 100%;
	text-align: center;
	font-size: .5em;

}

footer p {
	margin: 0;
	padding: 10px;
	width: revert;
}

footer img {
	position: relative;
	display: inline;
	float:left;
}

#sidebar_logo a img {width: 100%; height:100px;}

.header_logo {
	position: relative;
	padding:0;
	margin: 0;
	xleft:-65px;
}

main {
	padding-left:5ch;
}

.page {
	position: relative;
	padding:0px;
	margin: 0px;
	margin-left: 250px;
}



h1, h2, h3, h4 {
	font-family: h2_font;
	font-weight: bold;
	text-transform: capitalize;
	margin:0;
	margin-top:2ch;
}

h2 { padding-left: 1vw; }

h3 { padding-left: 2vw; text-decoration: underline;}


	margin-left: 2ch;
	text-indent: 0;
}

ol, ul, li {
	all:revert;
	list-style-position: inside;

}


.post li {
	margin-left: 5ch;
	margin-bottom: 2ch;
}

li p {
	padding: 0;
	display: inline;
	margin: 0;
}

.post img {
	xdisplay: block;
	xmargin: 10px auto;
	xbackground-color: skyblue;
	xpadding:10px;

}

.post img.cover {
	max-width: 100%;
}

figure {
	max-width: 50%;
	display: block;
	margin: 10px auto;
	text-indent: 0;
}

figcaption {
	font-size: 65%;
	max-width: 100%;
	text-align: left;

}

.home img {
	max-width: 40ch;
}

.post, .home {
	width: 60ch;
	max-width: 100%;
}

.home h2 a {
	text-decoration: none;
	color: black;
}

.home .list_page_item_desc a {
	text-decoration: none;
	color: black;
}


.home a:hover {
	text-decoration: underline;
}

p, .post li {
	width: 55ch;

	max-width: 100%;
	padding-right:5vw;
	margin-left: 5ch;
	font-size: 1em;

}

blockquote {
	margin: 10px;
	text-indent: 0;
}

.post blockquote p {
	text-indent: 0;
	padding: 5px;
	max-width: 40ch;
	background-color: lightblue;

}

.post a {

}

.post a:link, .post a:visited {
	background-color:lightblue;
	text-decoration: none;
	color: black;
	padding: 0 2px;
}

.post a:hover {
	text-decoration: underline;
}

.content-cover {
	text-align: center;
}




/* article listing page */

.list_page_item_link, .list_page_item_link h2 {
	margin-bottom: 1ch;
}

html body div.page main.home div.list_item_wrap div.post_date {
	margin-left: 2ch;
	margin-bottom: 1ch;
	display: none;
}

.list_page_item_cover img, .list_page_item_desc {
	margin-left: 2ch;
		max-width: 100%;
	padding-right:5vw;
}



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


.list_page_item_cover img, .list_page_item_desc {
	margin-left: unset;
	width: 100%;
	padding-right: unset;
}

.page {
	all:unset;
	width: 100vw;
}

nav {
position: relative;
	width:100%;
	height: unset;
}


.site_title {
 display: none;
 visibility: hidden;
}

main {
	margin: 0;
	padding: 10px;
}

.post p, .home p {
	width: unset;
	margin: unset;
	text-indent: 2ch;
}

.post li {
	width: unset;
}

img {
	float: none;
}



footer {
 position: relative;
 width: 100%;
 margin: 0;
 margin-top: 125px;
 padding: 0;
 bottom: 0;
 padding-top: 25px;
 height: 100%;

}

footer img {
	margin: 0;
	padding: 0;
	width: 100px;
	float: none;
}

.copyright {
	width:200px;
	text-align: center;
	margin: 0 auto;
}

p, .post li {
	width: unset;
	/* max-width: 100%; */
	padding-right: unset;
	margin-left: unset;
	/* font-size: 1em; */
}

#sidebar_logo a img {
	width: 100%;
	height: unset;
}
}