* {
	/*padding: 0;
	border: 0;
	margin: 0;*/
}

:root {
	/* colours */
	--invisible: rgba(0, 0, 0, 0.0);
	--html-bg: #181a1b;
	--bg: #111;
	--fg: #aaa;
	--nav-bg: #08aa41;
	--nav-fg: #555;
	--nav-hover-fg: #eee;
	--box-bg: #1e1e27;
	--box-fg: var(--fg);
	--a-fg: #55e;
	--a-nav-hover-fg: #c00;
	--blog-post-bg: #202038;

	/* slim screen behaviour */
	--nav-float: left;
	--nav-padding: 15px;
	--nav-position: fixed;
	--nav-max-width: 22%;
	--nav-dd-display-default: none;
	--article-padding: 5px 25%;
	--h1-fs: 7.0rem;
	--h2-fs: 2.1rem;
}

@media (max-width:1200px) {
	:root {
		--nav-bg: var(--invisible);
		--nav-float: none;
		--nav-padding: 5px;
		--nav-position: relative;
		--nav-max-width: 100%;
		--nav-dd-display-default: block;
		--article-padding: 5px;
		--h1-fs: 3.5rem;
		--h2-fs: 1.4rem;
	}
}

body {
	color: var(--fg);
	font-family: sans-serif;
	font-size: 1.5rem;
	background-position: absolute;
	background-color: var(--bg);
	left: 10px;
	right: 10px;
	hyphens: auto;
}

article {
	display: block;
	margin: 0;
	text-align: justify;
	text-indent: 15px;
	padding: var(--article-padding);
}

nav {
	background-color: var(--invisible);
	background-repeat: no-repeat;
	background-attachment: fixed;
	position: var(--nav-position);
	max-width: var(--nav-max-width);
	max-height: 90%;
	z-index: 10;
	float: var(--nav-float);
	margin: 0 0 15px 0;
	padding: var(--nav-padding);
	color: var(--nav-fg);
	text-align: left;
	transition: all 0s;
	padding-right: 0;
	overflow: auto;
}

nav:hover{
	background-color: var(--nav-bg);
	color: var(--nav-hover-fg);
	transition: all 0.35s;
}

h1, h2, h3, h4, h5, h6, code, pre, blockquote {
	text-indent: 0;
}

h1 {
	font-size: var(--h1-fs);
	text-align: center;
	font-family: sans-serif/*cursive*/;
}

h2 {
	font-size: var(--h2-fs);
}

time {
	float: right;
	text-align: right;
}

a {
	color: var(--a-fg);
	text-decoration: none;
}

img {
	max-width: 95%;
	height: auto;
}

a:hover {
	text-decoration: underline;
}

nav h3 a{
	margin-right: 10px;
	float: left;
}

nav a {
	color: var(--nav-hover-fg);
	display: block;
}

nav div.dd {
	display: var(--nav-dd-display-default);
}

nav:hover div.dd {
	display: block;
}

div.dd li:hover {
	background-color: var(--a-nav-hover-fg);
}

div.blog-post {
	background-color: var(--blog-post-bg);
	margin: 15px 0;
	padding: 3px;
}

.i {
	margin: 0 30px 0 30px;
}

div#box {
	background-color: var(--box-bg);
	padding: 10px;
	width: inherit;
	min-height: 95vh;
}


@media(prefers-color-scheme: bright) {
	:root {
		--bg: inherit;
		--box-bg: #e1e1d8;
		--a-fg: #55a;
	}
}