*{box-sizing:border-box; font-size:100%; margin:0; padding:0;}
.x{position:absolute; left:-999px; width:1px; height:1px; top:auto; overflow:hidden;}
header,main,nav,section,article,footer{display:block;}
img{max-width:100%; height:auto;}
a:focus,summary:focus{outline:/*DEFINE*/;}
.debug{background:yellow; color:#000;}

.cnt{text-align:center;}
.noa{color:inherit; text-decoration:none;}
.nolist{list-style-type:none;}
.flex li,.flex li a{display:inline-block;} .flex li a{padding:.5em 1em; width:100%;}
.bd-rd{border-radius:.25rem;}

.ar{background:#808080;} /*keep this a class? slap it on the body for the full archive site. consistency thign*/
#a-hd{border-bottom:2px solid;} #a-ft{border-top:2px solid;}

#chattr{font-family:helvetica,arial,sans-serif; background:#efefef;}
#chattr a{text-decoration:none;}
#cht{display:block; text-align:center; padding:.125em 1rem; font-size:2em; border-bottom:1px solid;}
#cht,#ch-wrap{background:#fff;}
#ch-wrap{max-width:40em; margin:0 auto;}
.ch-sec{color:#808080;} /*chattr secondary color; simple hierarchy for now*/
.usertxt{line-height:1.375;}
.error{font-size:.875em;}

#avi{margin-top:-3rem; border:.5rem solid #fff;}
h1{font-size:1.25em;}
#desc{margin:1em 1rem;}
#stats li{width:50%;}
#stats li a{padding:1em;}

#nav{border-top:1px solid; border-bottom:1px solid;}
#nav li{width:33%;}
h2{border-top:3px solid; margin-top:-.25em; padding-top:.25em;}

article{border-bottom:1px solid #808080;}
article+article{margin-top:.5em;}
.who{font-weight:bold; padding:.5em .5rem;}
article header{padding:.25em .5rem;}
.avi{border-radius:100%; vertical-align:middle;}
h3,h4{display:inline; font-weight:normal;} /*TRUNCATE IN CSS IF TINY SCREEN*/

article main{padding:.25em .5rem;}
.media{border:1px solid; margin:1rem 0 .25rem; overflow:hidden;}
.media img{display:block;}
.media .error{display:block; text-align:center; padding:1em;}
blockquote{border:1px solid; padding-bottom:.25rem;}
blockquote .media{margin:1rem 0 0;}

.re{padding:0 .5rem; font-size:.875em;}
.re li{margin-right:1em;} .re li a{color:inherit; font-weight:bold; padding:.75em 0;}

section footer{padding:1em .5rem 5em; text-align:center;}

@media (prefers-color-scheme:dark){
	body,#cht,#ch-wrap{background:#202020; color:#efefef;}
	a{color:/*DEFINE*/;}
	#chattr{background:#000;}
	#avi{border-color:#202020;}
}
@media only screen and (min-width:40em){
	#ch-wrap{max-width:1280px; overflow:auto;}
	#side{width:30%;}
	#feed{width:70%;}
	#side,#feed{float:left; position:relative;}
	
	#side{text-align:left; padding:0 2rem;}
	#avi{margin:-10.5rem -.5rem 0 /*the .5s are from the border; outline has no radius so this keeps it visually aligned with the text*/;}
	#desc{margin:2em 0;}
	#stats li{width:100%;} #stats li a{padding:0.25em 0;}
	
	section{padding-right:1rem; max-width:calc(720px + 2rem);}
	article main,article ul{margin-left:32px; margin-left:calc(32px + .75ex);} /*this is not Perfect but it's faster than making the whole thing float. does not scale gracefully on multi-line names tho. duct tape solution for now*/
}

@media only screen and (min-width:75em){
	header,.usertxt{font-size:1.25em;}
	article main,article ul{margin-left:64px; margin-left:calc(64px + .75ex);}
}