@font-face {
	font-family: "Bytesized";
	src: url("Bytesized-Regular.ttf") format("truetype");
	font-display: swap;
}

@font-face {
	font-family: "VT323";
	src: url("VT323-Regular.ttf") format("truetype");
	font-display: swap;
}

:root {
	--bg: #000;
	--fg: #c8c8c8;
	--dim: #6c6c6c;
	--hi: #fff;
	--link: #7fb4ca;
}

* { box-sizing: border-box; }

html {
	background: var(--bg);
	color: var(--fg);
	font: 22px/1.45 "VT323", monospace;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	padding: 0 1rem;
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
}

/* title bar */
header {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding: .6rem 0;
	margin-bottom: 1rem;
	border-bottom: 1px solid var(--dim);
}

header a {
	font-family: "Bytesized", monospace;
	font-size: 2rem;
	line-height: 1;
	color: var(--hi);
	text-decoration: none;
}

header nav a {
	font-family: inherit;
	font-size: 1rem;
	color: var(--dim);
	margin-left: 1rem;
}

header nav a:hover { color: var(--hi); }

/* content column */
main {
	flex: 1;
	max-width: 68ch;
}

/* post list on the index */
.posts {
	list-style: none;
	padding: 0;
}

.posts time {
	display: inline;
	margin-right: 1ch;
}

article > h1 {
	font-size: 1.6rem;
	font-weight: normal;
	line-height: 1.15;
	color: var(--hi);
	margin: 0;
}

time {
	display: block;
	color: var(--dim);
	margin-bottom: 1rem;
}

h3 {
	font-size: 1.25rem;
	font-weight: normal;
	color: var(--hi);
	margin: 2rem 0 .5rem;
}

p, ul, ol, pre, blockquote { margin: 0 0 1rem; }

a { color: var(--link); }
a:visited { color: #a38dc2; }

strong { color: var(--hi); font-weight: normal; }
em { font-style: normal; text-decoration: underline; }

code {
	font-family: inherit;
	color: var(--hi);
}

pre {
	overflow-x: auto;
	padding: .5rem 1ch;
	border-left: 2px solid var(--dim);
	line-height: 1.2;
}

blockquote {
	padding-left: 1ch;
	border-left: 2px solid var(--dim);
	color: var(--dim);
}

hr {
	border: 0;
	border-top: 1px dashed var(--dim);
	margin: 2rem 0;
}

img { max-width: 100%; }

::selection { background: var(--fg); color: var(--bg); }

footer {
	color: var(--dim);
	font-size: .9rem;
	line-height: 1;
}

@media (max-width: 480px) {
	html { font-size: 20px; }
	header a { font-size: 1.6rem; }
}