@font-face {
	font-family: "Menlo";
	src: url("/static/fonts/Menlo-Regular.ttf");
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: "Menlo";
	src: url("/static/fonts/Menlo-Italic.ttf");
	font-weight: 400;
	font-style: italic;
}

@font-face {
	font-family: "Menlo";
	src: url("/static/fonts/Menlo-Bold.ttf");
	font-weight: 700;
	font-style: normal;
}

@font-face {
	font-family: "Menlo";
	src: url("/static/fonts/Menlo-Bold-Italic.ttf");
	font-weight: 700;
	font-style: italic;
}

body {
	margin-block: 0;
	margin-inline: auto;
	max-width: 50rem;
	padding-inline: 1rem;
	padding-block: 2rem;
}

a {
	color: inherit;
}

a:hover {
	text-decoration: none;
}

body, code, kbd, samp {
	font-family: "Menlo";
	font-size: 0.8rem;
}

body > header {
	margin-block-end: 2rem;
}

nav > ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 1rem;
}

section + section {
	margin-block-start: 2rem;
}

/* homepage whoami */

dl {
	margin-block: 0.5rem 0;
	margin-inline-start: 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

dl > div {
	display: flex;
}

dt {
	width: 8rem;
	flex-shrink: 0;
	color: #888;
}

dd {
	margin: 0;
}

section > p {
	margin-block-start: 0.75rem;
	color: #555;
}

/* lists */

section > ul {
	list-style-type: none;
	margin-block-start: 0.5rem;
	margin-inline-start: 1rem;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

section > ul > li > a {
	display: flex;
	gap: 1.5rem;
	text-decoration: none;
}

section > ul > li > a:hover {
	text-decoration: underline;
}

section > ul > li > a > time {
	color: #888;
	flex-shrink: 0;
}

section > ul > li:not(:has(a)) {
	color: #555;
}

/* imgs grid */

section > ul:has(img) {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.5rem;
	margin-inline-start: 0;
}

section > ul:has(img) > li > a {
	display: block;
	text-decoration: none;
}

section > ul:has(img) > li img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* img entry */

article > img {
	display: block;
	width: 100%;
	margin-block-end: 1rem;
}

/* log entry */

article {
	margin-block-start: 0.5rem;
	margin-inline-start: 1rem;
}

article > header {
	margin-block-end: 1rem;
}

article > header > time {
	color: #888;
}

h1 {
	font-size: 0.8rem;
	font-weight: 400;
	margin: 0;
}

article p {
	color: #555;
	margin-block: 0.5rem 0;
}