:root {
	--a: #ffffff;
	--b: #ddd;
	--c: #555;
	--d: #222;
	--s: 2rem;
	--t: 1rem;
	--f: "InterVariable","Inter",-apple-system,BlinkMacSystemFont,"San Francisco",Roboto,"Helvetica Neue",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
	--e: Menlo,Consolas,Monaco,"Liberation Mono","Lucida Console",monospace;

}
::selection { color: var(--d); background: #e9e9e9 }
@media(prefers-color-scheme:dark) {
	:root {
		--a: #000;
		--b: #333;
		--c: #aaa;
		--d: #eee;
	}
	::selection { color: var(--a); background: #e9e9e9f0 }
}

html {
	height: 100%;
	scroll-behavior: smooth;
	box-sizing: border-box;
	-moz-text-size-adjust: none;
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
}
*, *::before, *::after {
	box-sizing: inherit;
}
body {
	word-break: break-word;
	max-width: 640px;
	min-height: 100vh;
	margin: var(--t) auto; padding: 0 var(--s) var(--s);
	font-family: var(--f);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.6;
	background: var(--a);
	color: var(--c);
}

/*text styles*/
h1,h2,h3,h4,h5,h6 {
	font-weight: 500;
	text-wrap: balance;
	line-height: 1.1;
	color: var(--d);
	margin-block-end: 1em;
	margin-bottom: 1em;
}
h1 { font-size: 1.476rem }
h2 { font-size: 1.383rem }
h3 { font-size: 1.296rem }
h4 { font-size: 1.215rem }
h5 { font-size: 1.138rem }
h6 { font-size: 1.067rem }
p { font-size: 1rem }
b, strong { font-weight: 600 }
ul, ol { margin-block-start: var(--t); margin-block-end: var(--t); padding-inline-start: calc(var(--t) + 0.1rem) }
li::marker { color: var(--d) }
blockquote {
	display: block;
	font-family: inherit;
	font-style: italic;
	font-weight: normal;
  padding: var(--t) calc(var(--t)*2);
	margin: 0;

	border-right: none;
	border-left: 2px solid var(--b);
	border-inline-start: 2px solid var(--b);
	border-inline-end: none;

}
blockquote p {
	margin: var(--t) 0;
	font-size: calc(1rem * 1.25);
	color: var(--c);
}
blockquote footer {
	margin-top: calc(1rem * 0.5);
	color: var(--d);
}

/*header + footer + nav*/
body header, body footer { padding: var(--s) 0 }
body header nav p,
body footer p {
	display: flex;
	column-gap: calc(var(--t) * 0.75);
	text-transform: lowercase;
}
body header nav p a,
body p a {
	font-weight: 600;
	color: var(--c);
	text-decoration: none;
}

footer{
	font-size: 0.5rem
	color: var(--c);
	text-decoration: none;
}
body header nav p a:hover {
	color: var(--d);
}

/*code styles*/
code {
	font-family: var(--e);
	font-size: calc(1rem - 2px);
	font-weight: normal;
	padding: 2px 4px;
}
pre code {
	background: transparent;
	display: block;
	padding: var(--t);
	line-height: 1.3;
	overflow-x: auto;
	overflow-y: hidden;
	border: 1px solid var(--b);
	border-radius: 8px;
}

/*misc*/
img,picture,video { max-width: 100%; margin: var(--t) 0; display: block; border-radius: 8px }
hr { box-sizing: content-box; height: 0; border: 0; border-top: 2px solid var(--b) }

/*link styles*/
a {
	color: var(--d);
	text-decoration: underline;
	text-decoration-color: var(--b);
	text-decoration-thickness: 1px;
	text-underline-offset: .15rem;
	text-decoration-style: solid;
}
a:hover, a:active, a:focus {
	color: var(--d);
	text-decoration-color: var(--c);
}


/*tables*/
table {  width: 70%; text-align: center; overflow-x: auto; table-layout: fixed }
td, th { padding: 0.3rem 1ch }
th { border-bottom: 2px solid var(--c); color: var(--d); font-weight: 500; text-align: inherit }
td:first-child, th:first-child { padding-left: 0 }
td:last-child, th:first-child { padding-right: 0 }
 .center {
  margin-left: auto;
  margin-right: auto;
}


/*index table*/
.postdate { white-space: nowrap; width: 10ch; font-family: var(--e) }

.resized-img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 300px;
}