/******** Fonts and text styles ********/

@font-face {
	font-family: Merriweather;
	font-display: swap;
	src: url(fonts/Merriweather-Regular.woff);
}

@font-face {
	font-family: Merriweather;
	font-display: swap;
	src: url(fonts/Merriweather-Italic.woff);
	font-style: italic;
}

@font-face {
	font-family: Merriweather;
	font-display: swap;
	src: url(fonts/Merriweather-Bold.woff);
	font-weight: bold;
}

@font-face {
	font-family: Merriweather;
	font-display: swap;
	src: url(fonts/Merriweather-BoldItalic.woff);
	font-weight: bold;
	font-style: italic;
}

@font-face {
	font-family: Nunito;
	font-display: swap;
	src: url(fonts/Nunito-Bold.woff);
	font-weight: bold;
}

@font-face {
	font-family: Nunito;
	font-display: swap;
	src: url(fonts/Nunito-Light.woff);
}

body, textarea, input {
	font-family: Merriweather, Palatino Linotype, Book Antiqua, Palatino, serif;
	font-size: 12pt;
	line-height: 21pt;
	text-rendering: optimizeLegibility;
	display: flex;
}

body > header, body > footer, button {
	font-family: Nunito, Arial Black, sans-serif;
}

body > header h1 {
	font-size: 18pt;
	text-transform: uppercase;
	letter-spacing: .1em;
	font-weight: bold;
}

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

body > header nav ul, body > header nav h2, body > footer nav ul, button {
	text-transform: uppercase;
	letter-spacing: .1em;
	font-size: 10pt;
	font-weight: normal;
}

body > header nav > ul > li > ul {
	font-size: 10pt;
	text-transform: none;
	letter-spacing: normal;
}

h2 {
	font-family: Nunito, Arial Black, sans-serif;
	font-size: 15pt;
	text-transform: uppercase;
	letter-spacing: .1em;
	font-weight: bold;
}

h3 {
	font-weight: normal;
	font-style: italic;
	font-size: 15pt;
}

a {
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

article header p {
	font-family: Nunito, Arial Black, sans-serif;
	text-transform: uppercase;
	letter-spacing: .1em;
	font-size: 9pt;
}

section.metadata, .comments > ul > li > footer, .comments > footer form ol {
	font-family: Nunito, Arial Black, sans-serif;
	font-size: 10pt;
}

.comments > footer form fieldset legend {
	font-style: italic;
	font-size: 15pt;
}

code {
	font-family: Courier New, Courier, monospace;
	font-size: 92%;
	padding: .1em .4em;
}

/******** Colours ********/

body {
	background: url(ricepaper.jpg);
	color: #606468;
}

a {
	color: #4080a0;
}

textarea {
	color: #606468;
}

button {
	background-color: #4080a0;
	color: #ffffff;
}

body > header {
	color: #ffa0a0;
	background: rgba(210,0,0,0.95);
}

body > header a, body > header h1, body > header nav > ul > li, body > footer nav ul li a {
	color: #ffffff;
}

body > header nav > ul > li > ul, body > footer nav ul li {
	background: rgba(210,0,0,0.95);
}

h2 a, h3, .comments > footer form fieldset legend {
	color: #000000;
}

article header p, section.metadata {
	color: #a0a4a8;
}

section.metadata a {
	color: #4080a0;
}

.comments > ul > li:after {
	background: rgba(210,0,0,0.2);
}

code {
	background: rgba(255,255,255,.6);
}

pre > code {
	display: block;
	overflow: auto;
	line-height: 140%;
	padding: .5em .7em;
	tab-size: 4;
}

table {
	background: rgba(255,255,255,.6);
	border-collapse: collapse;
}

table td, table th {
	padding: .3em .4em;
	border-bottom: 1px solid #ccc;
	border-right: 1px solid #ccc;
	vertical-align: top;
}

table tbody tr:last-child td {
	border-bottom: none;
}

table td:last-child {
	border-right: none;
}

table th {
	border-bottom: 1px solid #888;
	border-right: none;
}

/******** Layout ********/

body {
	padding: 0;
	margin: 0;
}

p, h2 {
	margin: 21pt 0;
	overflow: auto;
}

button {
	margin: 0;
	padding: 5pt 10pt;
	border-radius: 5px;
	border-style: none;
}

.alignright {
	float: right;
	margin: 0 0 0.5em 1em;
}

.alignleft {
	float: left;
	margin: 0 1em 0.5em 0;
}

.aligncenter {
	max-width: 100%;
	margin-left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
}

body > header {
	height: 20pt;
	padding: 3pt 5pt;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 999;
}

body > header h1 {
	margin: 0 .5em 0 0;
	float: left;
}

body > header nav {
	float: left;
	overflow: auto;
}

body > header nav ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
	overflow: auto;
	float: left;
}

body > header nav li {
	float: left;
	margin-left: 2em;
}

body > header nav h2 {
	float: left;
	margin: 0 0 0 2em;
}

body > header nav > ul > li {
	cursor: pointer;
	overflow: visible;
}

body > header nav > ul > li > ul {
	overflow: hidden;
	height: 0;
	float:none;
	width: 15em;
	padding: 0 1em 0 0;
	border-bottom-left-radius: 7px;
	border-bottom-right-radius: 7px;
	opacity: 0;
	z-index: 1;
	transition: all .5s;
}

body > header nav > ul.posts > li:not(:first-child) {
	margin-left: -8em;
}

main {
	width: 40em;
	max-width: 90vw;
	margin: 80px auto 0 auto;
	clear: both;
}

main article {
	margin: 42pt 0 42pt 0;
}

main article > header > p {
	margin: -21pt 0 21pt;
}

main article img {
	max-width: 100%;
}

.metadata {
	margin: 21pt 0;
}

.metadata ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
	overflow: auto;
}

.metadata ul li {
	float:left;
	margin-right: 3em;
}

body > footer {
	width: 40em;
	margin: 0 auto;
}

body > footer nav ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
	overflow: auto;
}

body > footer nav ul li {
	float: left;
	border-top-left-radius: 7px;
	border-top-right-radius: 7px;
	padding: 3pt 5pt;
	margin-right: 4em;
}

body > footer nav ul li:empty {
	display: none;
}

.comments > ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

.comments > ul > li:after {
	content: "-";
	width: 20em;
	height: 1px;
	display: block;
	overflow: hidden;
}

.comments > ul > li:last-child:after {
	display: none;
}

.comments > ul > li > footer {
	margin: -21pt 0 21pt 0;
}

.comments > footer form fieldset {
	border: none;
	padding: 0;
	margin: 0;
}

.comments > footer form fieldset ol {
	margin: 21pt 0;
	padding: 0;
	list-style-type: none;
}

.comments > footer form fieldset ol li:last-child {
	margin-top: 21pt;
}

.comments > footer form fieldset textarea {
	width: 40em;
	height: 10em;
	padding: 3pt 5pt;
	margin: .5em 0;
}

.comments > footer form fieldset input {
	width: 20em;
	padding: 3pt 5pt;
	margin: .5em 1em .5em 0;
}

/******** Smaller Screens ********/

@media (min-width: 760px) and (max-width: 970px) {
	body > header { height: 40pt; }
	body > header nav > ul:first-child > li:first-child { margin-left: 0; }
}

@media (max-width: 759px) {
	body > header { height: auto; }
	body > header h1 { float: none; }
	body > header h2 { display: none; }
	.pages, .pages li { display: inline; clear: both;}
	.pages li { margin: 0 2em 0 0; }
	.posts { display:none; }
	main { width: auto; max-width: calc(100vw - 2em); margin: 120px 1em 0 1em; }
	.comments > ul > li:after, .comments > footer form fieldset input, .comments > footer form fieldset textarea { width: 90%; }
}

/******** autumn.css ********/

code .hll { background-color: #ffffcc }
code .c { color: #aaaaaa; font-style: italic } /* Comment */
code .err { color: #FF0000; background-color: #FFAAAA } /* Error */
code .k { color: #0000aa } /* Keyword */
code .ch { color: #aaaaaa; font-style: italic } /* Comment.Hashbang */
code .cm { color: #aaaaaa; font-style: italic } /* Comment.Multiline */
code .cp { color: #4c8317 } /* Comment.Preproc */
code .cpf { color: #aaaaaa; font-style: italic } /* Comment.PreprocFile */
code .c1 { color: #aaaaaa; font-style: italic } /* Comment.Single */
code .cs { color: #0000aa; font-style: italic } /* Comment.Special */
code .gd { color: #aa0000 } /* Generic.Deleted */
code .ge { font-style: italic } /* Generic.Emph */
code .gr { color: #aa0000 } /* Generic.Error */
code .gh { color: #000080; font-weight: bold } /* Generic.Heading */
code .gi { color: #00aa00 } /* Generic.Inserted */
code .go { color: #888888 } /* Generic.Output */
code .gp { color: #555555 } /* Generic.Prompt */
code .gs { font-weight: bold } /* Generic.Strong */
code .gu { color: #800080; font-weight: bold } /* Generic.Subheading */
code .gt { color: #aa0000 } /* Generic.Traceback */
code .kc { color: #0000aa } /* Keyword.Constant */
code .kd { color: #0000aa } /* Keyword.Declaration */
code .kn { color: #0000aa } /* Keyword.Namespace */
code .kp { color: #0000aa } /* Keyword.Pseudo */
code .kr { color: #0000aa } /* Keyword.Reserved */
code .kt { color: #00aaaa } /* Keyword.Type */
code .m { color: #009999 } /* Literal.Number */
code .s { color: #aa5500 } /* Literal.String */
code .na { color: #1e90ff } /* Name.Attribute */
code .nb { color: #00aaaa } /* Name.Builtin */
code .nc { color: #00aa00; text-decoration: underline } /* Name.Class */
code .no { color: #aa0000 } /* Name.Constant */
code .nd { color: #888888 } /* Name.Decorator */
code .ni { color: #880000; font-weight: bold } /* Name.Entity */
code .nf { color: #00aa00 } /* Name.Function */
code .nn { color: #00aaaa; text-decoration: underline } /* Name.Namespace */
code .nt { color: #1e90ff; font-weight: bold } /* Name.Tag */
code .nv { color: #aa0000 } /* Name.Variable */
code .ow { color: #0000aa } /* Operator.Word */
code .w { color: #bbbbbb } /* Text.Whitespace */
code .mb { color: #009999 } /* Literal.Number.Bin */
code .mf { color: #009999 } /* Literal.Number.Float */
code .mh { color: #009999 } /* Literal.Number.Hex */
code .mi { color: #009999 } /* Literal.Number.Integer */
code .mo { color: #009999 } /* Literal.Number.Oct */
code .sa { color: #aa5500 } /* Literal.String.Affix */
code .sb { color: #aa5500 } /* Literal.String.Backtick */
code .sc { color: #aa5500 } /* Literal.String.Char */
code .dl { color: #aa5500 } /* Literal.String.Delimiter */
code .sd { color: #aa5500 } /* Literal.String.Doc */
code .s2 { color: #aa5500 } /* Literal.String.Double */
code .se { color: #aa5500 } /* Literal.String.Escape */
code .sh { color: #aa5500 } /* Literal.String.Heredoc */
code .si { color: #aa5500 } /* Literal.String.Interpol */
code .sx { color: #aa5500 } /* Literal.String.Other */
code .sr { color: #009999 } /* Literal.String.Regex */
code .s1 { color: #aa5500 } /* Literal.String.Single */
code .ss { color: #0000aa } /* Literal.String.Symbol */
code .bp { color: #00aaaa } /* Name.Builtin.Pseudo */
code .fm { color: #00aa00 } /* Name.Function.Magic */
code .vc { color: #aa0000 } /* Name.Variable.Class */
code .vg { color: #aa0000 } /* Name.Variable.Global */
code .vi { color: #aa0000 } /* Name.Variable.Instance */
code .vm { color: #aa0000 } /* Name.Variable.Magic */
code .il { color: #009999 } /* Literal.Number.Integer.Long */