@charset "utf-8";

/*
	Hello! I am delighted you are reading this file.
	It's uncommon for people to go picking through things like this,
	and I appreciate you took the time to show some interest. :)
	There are a lot of silly tricks in it to get certain effects.

	Feel free to ask me about anything!
*/



/* Ugly reset to fix vignette effect */
html, body {
	margin:		0;
	padding:	0;
	width:		100%;
	min-width:	100%;
	min-height:	100%;
	}


/* Ugly reset to fix vignette effect */
#background {
	/*	This provides the "vignette" effect around the page.
		It had to be set in the HTML tag because (in Chrome, at least)
		that tag will encompass the entire page.
		For reasons unknown (probably due to other tomfoolery),
		the body tag doesn't *quite* surround the whole thing.
		*/
	box-shadow:			inset 0px 0px 200px 100px rgba(0, 0, 0, 1);

	/*	Place the background below the content, but above the background
		Allows the underside to show through if desired
		(e.g., a scrolling background, under the vignette)
	*/
	margin:		0;
	padding:	0;
	width:		100%;
	min-width:	100%;
	min-height:	100%;
	box-shadow:			inset 0px 0px 200px 100px rgba(0, 0, 0, 1);
	position:			fixed;
	top:				0;
	left:				0;
	z-index:			0;
	}



body {

	/*	The background and cursor are from (surprise) jul.rustedlogic.net, a forum I run.
		The background itself is from the Xmas theme; the pointer is Ikachan,
		from the Studio Pixel game of the same name. (Though it's a custom sprite, I think.)

		The site is based around dark blue, slightly purple themes, as that's kind of been
		my "thing" for a while.
		*/
	background:			#333333;
	cursor:				url('../img/ikachanpointer.png'), default;
	color:				#ddd;
	font-size:			95%;

	/*	I like a little bit of spacing, but not too much; just enough to give the text
		room to breathe.

		The positioning stuff is so that the footer works correctly, though it probably isn't needed
		so much any more. Before, I had tried to get it to always sit at the bottom of the actual page,
		even if the content itself wasn't long enough; it would go offscreen if there wasn't room.

		However, I couldn't get that effect working, so I made it fixed instead. In retrospect,
		I could probably return it to just being at the bottom; however, if I ever made a different page
		with the same template, I would run into the same problems.
		*/
	letter-spacing:		.5px;

	position:			relative;
	margin:				0;
	padding:			0;
	}


* {
	/*	A lot of people hate on Comic Sans MS.
		I agree that it's not really built for what it gets used at --
		that is, professional design or works.

		However, over the years, my eyesight has waned. Too many sites use
		hyper-thin fonts for that new-age Apple look. Probably looks great!
		... on high-DPI devices, with perfect contrast. On other ones,
		they tend to get "bloomed" by the surrounding (always white) background.

		Comic Sans is surprisingly readable and I keep a bookmarklet on my bar
		to force any website to use it in place of any fonts. http://www.happpy.it/
		*/
	font-family:		"Ubuntu", "Verdana", sans-serif;
	}


tt, pre, code	{
	/*	Ubuntu Mono looks pretty good, and is what I use in most cases
		(when I'm not using a slightly customized Input)
		Consolas is a good second choice, and was a very nice addition to
		Windows 7 (or Vista). Lucidia Console is a very meh fallback.
		"monospace" usually defaults to Courier New, which is ugly beyond measure.

		The background and color change helps differentiate it between surrounding text.
		*/
	font-family:		"Ubuntu Mono", "Menlo", "Consolas", "Lucidia Console", monospace;
	background:			rgba(0, 0, 0, 0.4);
	padding-left:		0.2em;
	padding-right:		0.2em;
	color:				#ccc;
	}


h1	{	text-align:			center;			letter-spacing:		5px;	}
h2	{
	text-align:			left;
	letter-spacing:		2px;
	border-bottom:		1px dotted #777;
	text-transform:		lowercase;
	font-size:			130%;
	margin:				0.25em 0 0.5em 0;
	padding:			0 0 0.5em 0;
	}


h3	{
	text-align:			left;
	letter-spacing:		2px;
	background:			rgba(0, 0, 0, .5);
	border-top:			1px dotted #555;
	border-bottom:		1px dotted #555;
	text-transform:		lowercase;
	font-size:			110%;
	margin:				1em 0 0 0;
	padding:			0.25em;
	}

blockquote	{
	margin-left:		1.5em;
	padding-left:		1em;
	border-left:		5px solid #333;
	color:				#aaa;
	background:			rgba(0, 0, 0, .5);
	}

.posttime	{
	/*	This is the small timestamp on "posts".
		It's made to be visible, but not really stand out.
		*/
	float:				right;
	margin-top:			1em;
	font-size:			80%;
	color:				#9f9f9f;
	}


#container	{
	/*	The main container for the page, beyond <body>.
		Surprisingly, I don't think I can add a minimum margin
		without using yet another container. Welp.

		The margins at the top and bottom provide some
		breathing room against the chrome/footer.
		*/
	max-width:			700px;
	margin:				5em auto 10em auto;
	z-index:			1;
	position:			relative;
	}


#container > div {
	border:				1px solid #777;
	margin-bottom:		2em;
	padding:			0.25em 1em;
	background:			rgba( 20, 20, 20, .8);
	box-shadow:			20px 20px 0 0 rgba(0, 0, 0, .6);
	line-height:		150%;
	}

footer	{
	/*	As mentioned earlier, this was originally not fixed.
		But, I could not get it to comfortably rest against the bottom of the page,
		without introducing other unwanted issues (such as horizontal scrolling!!)
		So, fixed it goes.
		*/
	position:			fixed;
	bottom:				0px;
	left:				0px;
	width:				100%;
	border-top:			1px solid #444;
	padding:			0.5em 0;
	text-align:			center;
	background:			rgba(0, 0, 0, .9);
	z-index:			3;
	}

span.sp	{
	/*	Used for pseudo-Word-like autocorrections. Often occompanied by a title=""
		with a pithy quote.

		Fun fact: Firefox supports parameters for the "text-decoration" style
		to change its color and ... style (e.g. dotted, wavy, etc)
		At the time of writing, no other browser supports this.
		*/
	border-bottom:		1px dotted red;
	}

a	{
	color:				#88f;
	cursor:				url('/~xkeeper/img/ikachanpointer2.png'), pointer;
	text-decoration:	none;
	/*background:			rgba(180, 255, 180, .1);*/
	border-bottom:		1px dotted rgba(100, 100, 200, .6);
	}

a:visited	{	color:				#77c;	}
a:hover		{	color:				#fff;	background:	rgba(70, 70, 200, .4);	}
.c			{	text-align:			center;	}
hr			{	border:				none;
				border-top:			1px dotted #777;	}

.addendum	{
	color:		#aaa;
	font-style:	italic;
	font-size:	80%;
	}
del	{
	color:		#888;
	}


h2:before		{	content:	"📓 ";	}

#links h2:before		{	content:	"🔗 ";	}
#contact h2:before		{	content:	"💌 ";	}
#another h2:before		{	content:	"📔 ";	}

.posttime:before		{	content:	"📆 ";	}
a > .posttime:after	{	content:	" (🔗)";	}
a > .posttime:hover	{	color:		#fff;	}


#container > div#another {
	border:				1px solid #966;
	margin-bottom:		2em;
	padding:			0.25em 1em;
	background:			rgba(60, 20, 20, .7);
	box-shadow:			20px 20px 20px 0 rgba(0, 0, 0, .5);
	color:				#dac;
	text-transform:		lowercase;
	font-family:		"Ubuntu Mono", "Consolas", "Lucidia Console", monospace !important;
	}

#container > div#another > *, #container > div#another > p > a {
	font-family:		"Ubuntu Mono", "Consolas", "Lucidia Console", monospace !important;
}

#container > div#another > p > a {
	color:		white;
	border:		none;
}


.content-warning + label {
	/*	This is the (clickable) label for a "content warning" section.
		It's meant to stand out and say, "hey, something's here".
		The actual checkbox is hidden (below) to make it appear seamless.

		A later declaration provides a preceding warning mark,
		and a suffixed "Click to show/hide" message.

		The multiple text shadows is to give the text a slightly
		stronger "glow" effect than is possible with just one.
		*/
	background:			rgba(220, 200, 10, .5);
	color:				white;
	display:			block;
	border:				1px dotted yellow;
	border-left:		none;
	border-right:		none;
	padding:			0.25em 1em;
	text-shadow:		0px 0px 3px black,
						0px 0px 4px black,
						0px 0px 6px black;
	}

.content-warning:checked + label {
	background:			rgba(140, 130, 10, .5);
	color:				#eee;
	display:			block;
	border-color:		rgba(255, 255, 0, .5);
	}
.content-warning + label:before			{	content:	"⚠ ";	font-weight:	bold;	}
.content-warning + label:after 			{	content:	" Click to show.";	}
.content-warning:checked + label:after	{	content:	" Click to hide.";	}

.content-warning	{
	display:			none;
}

.content-warning-content	{
	/*	Actual content of a content-warning section. Made to stand out,
		to clarify exactly what will and what will not be hidden.
		*/
	display:			none;
	color:				#dbf;
	background:			rgba(120, 80, 130, .2);
	border-bottom:		1px dotted #b9c;
	margin-top:			0em;
	padding:			0.25em 1em;
	}

.content-warning:checked ~ .content-warning-content	{	display:	block;	}


.f-left		{	float:	left;	}
.f-right	{	float:	right;	}
.f-clear	{	clear:	both;	}
img.fancy	{
	margin:		0.2em 0.5em;
	padding:	0.3em 0.3em;
	border:		1px solid rgba(255, 255, 255, 0.3);
	background:	rgba(0, 0, 0, .2);
	}



@media only screen and (max-device-width: 600px) {
	body {
		font-size:			100%;
		line-height:		150%;
		}

	h1	{
		line-height:		100%;
		}

	#container	{
		width:				auto;
		max-width:			100%;
		margin:				5%;
		}

	#container > div {
		margin-top:			3em;
		margin-bottom:		3em;
		line-height:		130%;
		padding:			0.5em;
		background:			rgba(  15,  15,  15, .6);
		}

	h1	{
		font-size:			130%;
		}

	h2	{
		font-size:			130%;
		margin:				0.25em 0 0.5em 0;
		padding:			0 0 0.5em 0;
		}

	footer	{
		padding:			0.1em 0;
		font-size:			75%;
		}

	.posttime	{
		margin-top:			0.5em;
		}
}