html {
	margin: 0;
	padding: 0;
	height: 100%;
	font-family: "Open Sans", sans-serif;
	font-size: 16pt;
}
	body {
		margin: 0 8em;
		padding: 1em 0;
		min-height: 100%;
	}

a:link, a:visited { text-decoration: none; font-weight: bold; }
a:hover { text-decoration: underline; }

hr { border: none; border-bottom: 1px solid transparent; margin: 1.14em 5em; }

@font-face {
	font-family: 'Press Start 2P';
	font-style: normal;
	font-weight: 400;
	src: local('Press Start 2P'), local('PressStart2P-Regular'), url(/static/font/Press-Start-2P.woff) format('woff');
}

h1, h2, h3, header { font-family: "Press Start 2P", monospace; font-weight: normal; }

h1 { margin: 0 -2em; font-size: 80px; text-align: center; height: auto; line-height: 1.6em; }
h1#main { height: 3em; line-height: 3em; }
h1#main a { font-weight: normal; }
	h1#main span {
		display: inline-block;
		width: 50%;
		height: 100%;
		box-sizing: border-box;
	}
	#hell { text-align: right; padding-right: .4em; border-top-left-radius: 0.33em; border-bottom-left-radius: 0.33em; }
	#game { text-align: left; padding-left: .4em; border-top-right-radius: 0.33em; border-bottom-right-radius: 0.33em; }

h2, header {
	margin: 0 0 -.5em 0;
	padding-bottom: 0;
	font-size: 24px;
	border-bottom: 1px dashed transparent;
}
h3 {
	margin: 0.25em 0;
	font-size: 12px;
}

nav { padding: .5em .5em; margin: 0 1em 1em; }
	nav ul, nav ul li { margin: 0; padding: 0; }
		nav ul li { display: inline; padding: 0 .5em; }
		nav ul li#play a:link, nav ul li#play a:visited {
			display: inline-block;
			padding: 4px 8px;
			border-radius: 12px;
		}
		nav ul li.patreon { float:right; }

pre, code { background: #111111; border: 1px solid #f09; border-radius: 6px; white-space: pre-wrap; overflow: auto;}
	code { padding: 0 0.25em; box-shadow: 0 0 9px 0 #333333; }
	pre { margin: 1em 1.75em; padding: 0.25em 0.25em 0.25em 0.25em; box-shadow: 0 0 18px 0 #333333; }
	pre code { background: transparent; border: none; border-radius: 0; box-shadow: none; padding: 0;}

div#main, #main {padding: 0 1em; }

ul#news { margin: 0; padding: 0; }
	ul#news > li { margin: 0; padding: 0; display: block; }
	.content { margin-left: 1.5em; }

	.content ul {
		margin-top: 0;
		margin-bottom: 1em;
	}

ul#nav { overflow: auto; margin-bottom: 1em; }
ul#nav li { margin: 0; padding: 0; width: 50%; float: left; list-style-type: none; }
ul#nav li:first-child { text-align: right; }
ul#nav li a { display: inline-block; margin: 0 .66em; }

ol#comments { padding-left: 0; margin-left: 0; }
ol#comments li.comment { list-style-position: inside; padding-left: 0; margin: 1em 0; }
.commentbar, .commentanchor {padding: 4px 8px 4px 8px;}
.commentanchor { margin-bottom: 1em; }
.commentanchor a { display: inline-block; margin-right: 1.5em; }
.commentbar { display: block; padding-left: 1.6em; margin-top: -1.4em; }
	.commentbar .name { }
	.commentbar .date { float: right; }
.commentbody { padding: 4px 8px; }
	.commentbody p:first-child { margin-top: 0; }
label {padding-right: 0.5em;}

#comment { margin-top: 2em; }
textarea { margin: 0.5em 1em; height: 8em; }
input[type="text"], input[type="submit"], textarea { border: 1px solid transparent; border-radius: 8px; }


input[type="text"], textarea { background: #201018; color: #fff; border-color: #f09; }
input[type="submit"] { color: 000; background: #f09; }

.commentanchor { background: #100008; }
li.comment { background: #100008;}
li.comment .commentbar { background: #300018; }
li.comment.admin { background: #000; color: #f09; }
li.comment.admin .commentbar { background: #100008; }
li.comment.admin .commentbody { color: #ffdfef; }

li.comment.admin .name {font-weight: bold; }

.notice { font-weight: bold; }
.error { font-weight: bold; color: #f09; }

#wide { overflow: auto; margin: -1em -5em 0; padding: 1em; }

section {
	border-radius: 8px;
	padding: 0 0 0.5em 0;
	margin: 1em 2em;
	/* so the box-shadow doesn't clip on the #wide bg */
	position: relative;
	z-index: 1;
}
section header {
	font-size: 24px;
	margin: 0.33em 0;
	line-height: 1em;
	padding: 0.1em 0.5em 0.1em;
	border-bottom: 1px dashed transparent; 
}
	section header:first-child {
		border-top-left-radius: 8px;
		border-top-right-radius: 8px;
		margin-top: 0;
	}
section ul {
	margin: 0;
}

/* so the box-shadow for the pronoun-labels _does_ clip, since the top would otherwise overlap the header weirdly */
header { position: relative; z-index: 2; }

/*
TYRIAN + EGGSHELL:
	#fbf8ca -- white
	#a13f80 -- light purple
	#5e1043 -- mid purple
	#360827 -- dark purple

/* page bg */
html { background: #a13f80; }
/* content bg + color */
#wide, body { background: #360827; color: #fff; }
/* normal link color */
a:link, a:visited { color: #a13f80; }

/* play link button */
nav ul li#play a:link, nav ul li#play a:visited { background: #fbf8ca; color: #a13f80; }
nav ul li#play a:hover { background: #fbf8ca; color: #5e1043; }

h1 { color: #fbf8ca; }
h2, header, hr { border-color: #fbf8ca; color: #a13f80; }
#hell { background: #5e1043; color: #360827; }
#game { background: #360827; color: #5e1043; }

section { box-shadow: 0 0 12px 0px #1a0414; }
section { background: #5e1043; }
section header { border-color: #fbf8ca; color: #360827; background: #a13f80; }

em { color: #fbf8ca; }
strong { color: #fbf8ca; }
del { color: #360827; }

/*
EARTH TONES:
	#241a11 -- (richer darker brown)
	#35291f -- rich dark brown
	#482714 -- .
	#6c3108 -- .

	#b69a71 -- pale brown
	#eedb74 -- pale yellow

	#6c4b1a -- dull orange
	#c57200 -- bright orange

	#333c1a -- dark green
	#afca90 -- pale green

	#45525d -- dark blue
	#adb6bb -- pale blue
*/

/* page bg */
html { background: #241a11; }
/* content bg + color */
#wide, body { background: #482714; color: #988f76; }
/* normal link color */
a:link, a:visited { color: #eedb74; }

/* play link button */
nav ul li#play a:link, nav ul li#play a:visited { background: #eedb74; color: #6c4b1a; }
nav ul li#play a:hover { background: #eedb74; color: #6c4b1a; }

h1 { color: #c57200; }
h2, header, hr { border-color: #6c3108; color: #c57200; }
#hell { background: #35291f; color: #6c4b1a; }
#game { background: #6c3108; color: #c57200; }

section { box-shadow: 0 0 12px 0px #35291f; }
section { background: #5e331a; }
section header { border-color: #482714; background: #6c3108; color: #c57200; }

em { color: #adb6bb; }
strong { color: #afca90; }
del { color: #360827; }


/* acid */
#wide, body {border-left: 1px solid transparent; border-right: 1px solid transparent;}
#wide { position: relative; overflow: hidden; }
	#wide::before, #wide::after {
		display: block;
		height: 100%;
		width: 6em;
		content: ' ';
		position: absolute; top: 0;
		border-top: 1px solid transparent;
		border-bottom: 1px solid transparent;
		box-sizing: border-box;
	}
	#wide::before { left: 0; }
	#wide::after { right: 0; }


h2, header {border-bottom-style: solid;}
/* page bg */
html { background: #000; }
/* content bg + color */
#wide, body { background: #000; color: #eee; border-color: #f09;}
#wide::before, #wide::after { border-color: #f09; }
/* normal link color */
a:link, a:visited { color: #9f0; }

/* play link button */
nav ul li#play a:link, nav ul li#play a:visited { background: #9f0; color: #000; }
nav ul li#play a:hover { background: #9f0; color: #000; }

h1 { color: #f09; }
h2, header { border-color: #f09; color: #f6a; }
hr { border-color: #502; }
#hell { background: #201018; color: #f09; }
#game { background: #302028; color: #f09; }

section { box-shadow: 0 0 12px 0px #301; }
section { background: #000; }
section header { border-color: transparent; background: #100008; color: #f6a; }

em { color: #f6a; }
strong { color: #f6a; }
/*del { color: #312; }*/
del { color: #888; }