:root{
	--bg:#0f0f0f;--lc:#ff7f00;
	--fg:#e5f781;--ac:#ff0070;
}
html,button,[popover]{
	font-family:sans-serif;
	color:var(--fg);background-color:var(--bg);
}

::selection{color:var(--bg);background-color:var(--fg);}
body{
	display: flex;
	min-height: 100vh;
	flex-direction: column;
}
main {flex: 1; margin-top: 1.4em;}
a{
	font-weight: bold;
	color:var(--lc);
	text-decoration:none;
	transition: color 1s ease, text-shadow .6s ease;
	text-shadow: 0 0 0 var(--lc);
}
a[href="#"]{text-decoration-line: underline;}
a:hover{text-shadow:0 -19px 3px transparent;color:var(--ac);}
code:not([data-lang]){
	color:var(--ac);
	font-size: math;
	
}
audio {
	background: var(--fg); height: 1.317em; width: 3em; display:inline;
	margin-bottom: -4px;
}

pre.giallo {
	max-width: 75%;
	margin: auto;
	padding: 4px 10px;
	overflow-x: auto;
	tab-size: 2ch;
	border-radius: 3px;
	border-style: solid;
	border-color: var(--fg);
	background-color: #0d1017;
	border-width: 3px
}
.giallo:not(.no, :has(> code[data-lang=plain])){
	border-top-width: 19px;
}
.giallo code:not([data-lang=plain])::before{
	font-size: 1.2em;
	font-weight: bold;
	transform: translateY(-22.5px);
	color: var(--bg) !important;
	position: absolute;
	content: attr(data-lang);
}
mark {font-weight: bold;}
p{text-align:justify;}
h3,h2,h1{margin-bottom:0px;}
h3{margin-top: 0px;}
@keyframes blink{50%{text-decoration:none;}}
summary{cursor:crosshair;}
summary:not(.o){list-style:none;}

.title {font-weight: bold; summary{font-size: 2.2em;nav{font-size: 1.05em;}
	*{text-decoration-line: spelling-error;animation:blink 2s steps(1) infinite;}
}}
img{image-rendering:pixelated}
img:not(.o){
	clip-path:rect(0 100% 100% 0 round 10px);
	margin:8px 10px;
}
img.left{float:left;}
img.right{float:right;}
footer {
	margin-top: 2em;
	font-size: 0.85em;
	border-width: 3px 0 0 0;
	margin-bottom: 0.3em;
	border-color: var(--fg);
	border-style: solid;
}
footer em {display: block;}

blockquote{
	margin: 0;
	background: color-mix(in srgb, var(--fg) 10%, transparent);
	color: var(--fg);
	p{padding: 0 0 0 .5em;
		border-left: 4px solid var(--lc);
		margin: 0;  white-space: pre-line}
}

aside {
	margin:0 10%;
	filter: hue-rotate(174deg) saturate(200%) brightness(110%);
}
footer aside{float:right;margin:0}
@media(min-width: 850px){
	footer aside{margin-top:-20px}
}



footer em strong {
	overflow-wrap: anywhere;
	user-select: all;
}
mark {
	cursor: help;
	background-color: unset;
	color: yellow;
	text-decoration: darkcyan 2px dashed underline;
}

/*cuz lazy*/
a:not([href^="http://127."],[href^="https://subrelevant.cc/"]):where([href^="https://"],[href^="http://"],)::before{
	content:"> ";
	color: red;
}

small > time {color:cyan}