@charset "UTF-8";

@keyframes blink{ to{ visibility:hidden;} }

:root{
	--background: #222;
	--foreground: #eee;
	--foreground2: white;
	--med: #444;
	--med2: #555;
	scrollbar-color: #aaa transparent;
}

@media (prefers-color-scheme:light){
	:root{
		--background: white;
		--foreground: #222;
		--foreground2: #444;
		--med: #ddd;
		--med2: #bbb;
	}
}

h1:target::before,h2:target::before,h3:target::before,h4:target::before,h5:target::before,h6:target::before{content:"> ";}
h1:target,h2:target,h3:target,h4:target,h5:target,h6:target{
	border-bottom: 2pt solid;
}
:target{
	background-color: var(--med);
}
html{
	color:var(--foreground);
	background:var(--background);
}
body{
	margin:0;
	padding:0;
	text-align: justify;
}
main{
	margin:auto;
	padding:1em;
}

header{
	color:var(--background);
	background:var(--foreground);
}
header h1:before{ content:"> ";}
header h1:after{ content:"_"; animation: blink 1s steps(2,start) infinite;}
header h1 a{ color:inherit; }

menu a{
	color: var(--background);
}

menu a:hover{
	color: var(--foreground);
	background-color: var(--background);
}

@media (min-width: 170ch) {
	main{
		max-width: 163ch;
	}

	.post-content{
		column-count: 2;
		column-rule: solid 1pt var(--foreground);
		column-gap: 3ch;
	}

	header{
		display: flex;
		justify-content:space-around;
	}

	menu{
		display:flex;
		justify-content: center;
	}
	menu a{
		padding:1em;
	}
}
@media (max-width: 170ch) {
	main{
		max-width: 80ch;
	}

	header{
		display: flex;
		justify-content:space-around;
	}

	menu{
		display:flex;
		justify-content: center;
	}
	menu a{
		padding:1em;
	}
}

@media (max-width: 80ch) {
	header{
		display: grid;
	}
	header h1{
		text-align: center;
	}
	menu{
		visibility: hidden;
		height:0;
		width: 0;
	}
}


a{
	color:var(--foreground);
}
.footnote-ref{text-decoration: none;}
.footnote-ref::before{content:"["}
.footnote-ref::after{content:"]"}

a:hover{
	color:var(--background);
	background:var(--foreground);
	text-decoration: none;
}
a.anchor{visibility:hidden; text-decoration: none;}
h1:hover>a,h2:hover>a,h3:hover>a,h4:hover>a,h5:hover>a,h6:hover>a,h1:hover>a{visibility:visible;}

pre{
	padding:.5em;
	overflow-x: auto;
}

footer{
	border-top:1pt solid;
	margin-top:1em;
	margin-bottom:.5em;
	padding-top:.5em;
	text-align:center;
}

footer pre{
	margin: 0;
}

.article-head{
	text-align: center;
}

.posts table{
	width: 80%;
	margin:auto;
}

blockquote{
	font-style: italic;
}