@import "custom.css";

:root{
	--fg:#E60073;
}

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

body {
	background: black;
	color: var(--fg);
	font-family: monospace;
	font-size: 1.2em;
	margin: 0;
	padding: 0;
}

summary{cursor:pointer;}
summary:hover{
	filter: url(#chroma);
	color: black;
	background-color: var(--fg);
}

summary:hover:active{ filter: url(#chromaClick) }

a{
	color: var(--fg);
	text-decoration: none;
}

a:hover:active{
	filter:url(#chromaClick);
}

a::after{ content: ']'; }

a::before{ content: '['; }

a:hover{
	color: black;
	background-color: var(--fg);
	position: relative;
	filter: url(#chroma);
}

a:hover::selection{
	background-color: black;
	color: var(--fg);
}

.postImage a::before{ content: none; }
.postImage a::after{ content: none; }

code{
	font-size: 0.9em;
}

img{
	max-width: 100%;
	align-self: center;
}

figcaption{
	text-align: center;
}

span{
	text-align: center;
}

main{
	margin: auto;
	max-width: 80ch;
	padding: 1em;
}

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

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

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

footer pre{
	margin: 0;
}

table.posts{ width: 100%; }

.post-content{
	text-align: justify;
}

header a{
	filter: drop-shadow(0 0 5px);
}

@media(min-width: 81ch){
	header{
		display: flex;
		justify-content: space-around;
	}
	menu{
		display: flex;
	}
	menu a{
		padding: 1em;
	}
}
@media(max-width: 80ch){
	header{
		display: block;
	}
	header h1{
		text-align: center;
	}
	menu{
		visibility: collapse;
	}
}