@font-face {
	font-family: "Noto Sans";
	src: url("/assets/NotoSans-Italic-VariableFont_wdth,wght.woff2")
		format("woff2");
	font-weight: 100 900;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "Noto Sans";
	src: url("/assets/NotoSans-VariableFont_wdth,wght.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Liberation Mono";
	src:
		local("Liberation Mono Regular"),
		local("LiberationMono-Regular"),
		url("/assets/LiberationMono-Regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
}

:root {
	--borderColor-default: #3d444d;
	--borderColor-muted: #3d444db3;

	--bgColor-default: #0d1117;
	--bgColor-muted: #151b23;
	--bgColor-neutral-muted: #656c7633;

	--fgColor-default: #f0f6fc;
	--fgColor-muted: #9198a1;
	--fgColor-accent: #4493f8;

	color: var(--fgColor-default);
	background-color: var(--bgColor-default);
	font-family: "Noto Sans", sans-serif;
	font-size: 17px;
}

* {
	box-sizing: border-box;
}

body {
	padding: 1rem;
	width: min(100%, 100ch);
	margin: auto;
}

p {
	line-height: 1.5;
}

strong,
h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: 600;
}

li + li {
	margin-top: 0.7em;
}

pre {
	display: flex;
	line-height: 1.5;
	padding: 0.5rem;
	align-items: flex-start;
	> code {
		flex: 1;
	}
}

code {
	font-family: "Liberation Mono", monospace;
	font-size: 85%;
	padding: 0.2em 0.4em;
	margin: 0;
	white-space: break-spaces;
	border-radius: 6px;
}

p > code,
p > a > code {
	background-color: var(--bgColor-neutral-muted);
}

/* footnote */
sup > a {
	&::before {
		content: "[";
	}
	&::after {
		content: "]";
	}
}

h1,
h2 {
	border-bottom: 1px solid var(--borderColor-default);
	padding-bottom: .3em;
}

section.footnotes {
	color: #59636e;
	border-top: 1px solid var(--borderColor-default);
	font-size: 70%;
	ol {
		padding-left: 1rem;
	}
	h2 {
		display: none;
	}
}

a {
	color: var(--fgColor-accent);
	text-underline-offset: 0.2rem;
	cursor: pointer;
}

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

table {
	width: 100%;
	overflow: auto;
	border-collapse: collapse;
	td,
	th {
		padding: 6px 13px;
		border: 1px solid var(--borderColor-default);
	}
	tr {
		background-color: var(--bgColor-default);
		&:nth-child(2n) {
			background-color: var(--bgColor-muted);
		}
	}
}

hr {
	height: 0.25em;
	background-color: var(--borderColor-default);
	border: 0;
}