:root {
	--display-no-custom-properties: none;

	--background-color: none;

	--border-color: dimgrey;
	--border-thickness: 0px;

	--block-color: none;
	--block-spacing: 2rem;
	--block-padding: 2rem;
	
	--label-color: ivory;
	--label-spacing: 0.5rem;
	--label-indent: 0.5rem;
	--label-padding: 0.5rem;
	
	--tag-padding: 0.25rem;
	
	--button-width: 5rem;

	--sidebar-spacing: 1rem;
}

img {
	max-width: 100%;
	max-height: 80vh;
}

code {
	white-space: pre-wrap;
	font-family: monospace;
	background-color: #FdFFFd;
	padding: 1em;
	border: 1px solid darkgrey;
	display: inline-block;
	width: 100%;
	box-sizing: border-box;
	font-size: 120%;
}

aside.no-custom-properties {
	display: var(--display-no-custom-properties);
}
aside.debug {
	background-color: magenta;
	font-family: monospace;
	white-space: pre-wrap;
}
aside.error {
	background-color: lightyellow;
}

html, body {
	padding: 0;
	margin: 0;
	min-height: 100vh;
}
body {
	background-color: var(--background-color);
	display: grid;
	grid-template-rows: auto auto auto 1fr auto;
	grid-template-columns: 1fr minmax(auto,65em) 15rem 1fr;
	grid-template-areas:
		"header header header header"
		"lm subheader empty-1 rm"
		"lm main sidebar rm"
		"lm main empty-2 rm"
		"footer footer footer footer";
	box-sizing: border-box;
	grid-row-gap: var(--block-spacing);
	grid-column-gap: var(--block-spacing);
}

body > header:last-child-of-type, body > aside, body > main {
	font-size: 16px;
}

body > aside, main.tagpage > article, main.frontpage > article, main.articlepage > article > section.article-body, main.articlepage > article > footer > nav.tags {
	background-color: var(--block-color);
	margin-bottom: var(--block-spacing);
}
body > aside, body > header:last-of-type > aside , main.tagpage > article, main.frontpage > article,  main.articlepage > article > section.article-body, main.articlepage > article > footer > nav.tags {
	border-radius: 0.3rem;
	border: var(--border-thickness) var(--border-color) solid;
	box-sizing: border-box;
	padding: var(--block-padding);
}
main > article > footer {
	margin-top: var(--label-spacing);
}
main > article > footer > nav.tags > a {
	border-radius: 0.3rem;
	border: var(--border-thickness) var(--border-color) solid;
	padding: var(--tag-padding) calc( 3 * var(--tag-padding) );
	/*background-color: var(--label-color);*/
}

main.articlepage > article > section.article-body {
	margin-bottom: 0;
	border-bottom: none;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}
main.articlepage > article > footer > nav.tags {
	margin-top: 0;
	border-top: none;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

nav.prev-and-next {
	display: grid;
	grid-template-rows: auto;
	grid-template-columns: auto 1fr auto;
	grid-template-areas: "left middle right";
	/* TOOO try to change negative margin to a combination of first-child, last-child and sibling selectors*/
	margin-top: calc(var(--label-spacing) - var(--block-spacing));
	padding: 0;
	padding-left: var(--label-indent) ;
	padding-right: var(--label-indent) ;

}
nav.prev-and-next > * {
	display:inline-block;
	border-radius: 0.3rem;
	border: var(--border-thickness) var(--border-color) solid;
	box-sizing: border-box;
	padding: var(--label-padding);
	margin-bottom: var(--label-spacing);
	background-color: var(--label-color);
	min-width: var(--button-width);
	text-align: center;
	

}
nav.prev-and-next > a.prev {
	grid-area: left;
}
nav.prev-and-next > a.next {
	grid-area: right;
}

a[type="application/rss+xml"] {
	display:inline-block;
	vertical-align: middle;
	width: 1rem;
	height: 1rem;
	font-size: 0;
	background-image: url("feed.svg");
	background-size:     cover;
	background-repeat:   no-repeat;
	background-position: center center; 
}

body > aside {
	font-size: 11pt;
}
body > aside > section > nav > * {
	display: block;
}
body > aside > header > img {
	box-sizing: border-box;
	padding: 0.0rem;
}
body > aside p {
	margin-top: 0.2rem;
	margin-bottom: 0.2rem;
}

body > header:first-of-type {
	width: 100%;
	grid-area: header;
	background-color: var(--block-color);
	border-bottom: var(--border-thickness) var(--border-color) solid;
	text-align: center;
	box-sizing: border-box;
	padding: var(--block-spacing);
}
body > header:last-of-type {
	grid-area: subheader;
}
body > aside {
	background-color: var(--block-color);
	width: 100%;
	grid-area: sidebar;
}

body > aside > section, body > aside > footer {
	margin-top: var(--sidebar-spacing);
	padding-top: var(--sidebar-spacing);
	border-top: var(--border-thickness) var(--border-color) solid;
}
body > aside > section > h1 {
	font-size: 110%;
}
body > aside > section > h1 > a {
	color: inherit;
	text-decoration: none;
}

article > section.article-comments {
	display:block;
	margin-top: 1rem;
	padding: 1rem;
	/*background-color: lightgrey;*/
}

.comments-link a {
	display:inline-block;
	margin-top: 1em;
	font-size: 130%;
}

main {
	background-color: initial;
	border: none;
	padding: 0;
	width: 100%;
	grid-area: main;
}

body > footer {
	width: 100%;
	grid-area: footer;
	text-align: center;
	box-sizing: border-box;
	padding: var(--block-spacing);
}