@import url(http://fonts.googleapis.com/css?family=EB+Garamond);

body {
	background: hsl(328,84%,12%);
	color: hsl(328,100%,89%);
	max-width: 30em;
	text-shadow: 0px 0px 30pt hsl(328,35%,61%);
	margin: auto;
	margin-top: 1em;
	padding: 0 1em;
	font-family: "GaramondNo8",  "Garamond Premier Pro", "EB Garamond", serif;
	font-size: 14pt;
	hanging-punctuation: first last force-end;
}
p, div {
	text-align: justify;
}
:lang(jp) { font-family: "Kochi Mincho", "Hiragino Mincho Pro", "MS Mincho", serif; }
a[href]:focus, a[href]:focus:hover {
	outline: none;
	background: hsl(328,100%,89%);
	color: hsl(328,84%,12%);
	/* the default selection box is hideous and breaks the
	 * look completely, but :focus styling is needed for
	 * a11y reasons so we replace it with reverse video. */
}
a[href] {
	color: hsl(328,100%,89%);
	text-decoration-color: hsl(328,30%,40%);
	text-shadow: 0px 0px 30pt hsl(328,10%,40%);
}
a[href]:hover, a[href]:active {
	color: hsl(328,100%,100%) !important;
	text-decoration-color: hsl(328,30%,60%) !important;
	text-shadow: 0px 0px 30pt hsl(328,35%,70%) !important;
	background: none !important;
	/* the :active !important shit is a horrible hack to
	 * deal with Chrom{e,ium}'s misbehavior; otherwise,
	 * :focus styles are applied to the :active state. */
}
h1, h3 {
	margin-bottom: 0em;
	margin-top: 0em;
}
h1 a[href], h3 a[href] {
	text-decoration: none;
/*	border-bottom: 1px solid #CC77A4; */
	opacity: 0.65;
}
h1 a[href]:hover, h3 a[href]:hover {
	border-bottom: 1px solid #ffc7e5;
	opacity: 0.9;
}
.byline {
	margin-left: 1.5em;
	margin-top: -0.5em;
	padding: 0em;
	font-size: .9em;
	font-style: italic;
	color: #F486C0;
}
hr {
	border: none;
	border-bottom: 1px solid #53263E;
	width: 90%;
}

/* browser specific hacks */
body::-webkit-scrollbar { width: 1.3em; }
body::-webkit-scrollbar-track { background: #2A0117; }
body::-webkit-scrollbar-thumb { background: #6B003A; }
body::-webkit-scrollbar-thumb:hover { background: #92004F; }