@font-face {
	font-family: 'Unscii-16';
	src: url('/static/unscii-16.woff');
	size-adjust: 100%;
}

::root {
	--white: #ccc;
	--black: #222;
	--gray: #555;
}

body {
	font-family: 'Unscii-16', monospace;
	margin: 2em auto;
	max-width: 80ch;
	line-height: 1.4;
	font-size: 16px;
	color: var(--black);
	background-color: var(--white);
	padding: 0 10px;
	hyphens: auto;
}

code {
	font-family: 'Unscii-16', monospace;
	color: var(--gray);
}

h1,h2,h3,h4,h5,h6 {
	font-size: inherit;
}

h1::before {
	content: "# ";
}

h2::before {
	content: "## ";
}

h3::before {
	content: "### ";
}

h4::before {
	content: ".... ";
}

h5::before {
	content: "..... ";
}

h6::before {
	content: "...... ";
}

hr {
	border: none;
	display: block;
	height: 1em;
	overflow: hidden;
	margin: 0 auto;
	color: var(--black);
}

hr::after {
	content: "--------------------------------------------------------------------------------"
}

header .title {
    float: left;
}

header nav {
	text-align: right;
}

.paragraph {
	margin-block: 1em;
}

.paragraph :is(details, summary) {
	display: inline;
}

/* not p because it contains a details */
footer div.paragraph {
	text-align: left;
}

footer :is(pre) {
	border: 1px solid black;
	max-width: 80ch;
	overflow-x: scroll;
}

a, summary {
	color: var(--black);
	font-weight: bold;
	text-decoration: none;
}

a::before, summary::before {
	font-weight: normal;
	content: "[";
}

a::after, summary::after {
	font-weight: normal;
	content: "]";
}

a:hover, summary:hover {
	text-decoration: underline;
}

a:visited::before {
	font-weight: normal;
	content: "{";
}

a:visited::after {
	font-weight: normal;
	content: "}";
}

ul.index-dirs {
	padding-left: 0px;
}
ul.index-posts {
	padding-left: 2ch;
}

li {
	list-style-type: "- ";
}

li[type="project"] a {
	font-weight: bold;
}

li[type="project"]::after {
	content: "[" attr(tags) "]";
}

footer p details {
	display: inline;
}