@charset "utf-8";

/* RUBENERD PAPER THEME: A revised version of my 2015 theme, lah */


/***** RESET です*************************************************************/

html, body, h1, h2, h3, form, fieldset, figure, 
	nav ul, nav li, #archive ol, #archive ul, #archive li {
	border:0;
	list-style-type:none;
	margin:0;
	padding:0;
	vertical-align:baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu,
	nav, section { display:block }
table { border-collapse:collapse }


/***** COLOURS です***********************************************************/

body {
	background:#f0f0f4;
	color:black;
}
pre {
	border:1px dotted lightgrey;
	color:#0074e8 !important;
}
article, #bio, #archive {
	background:white;
	box-shadow:0px 0px 8px rgba(0,0,0,0.1);
}
blockquote {
	border-left:4px solid lightgrey;
	color:#606266;
}
h1, h2, a  { color:#0074e8 }
code, time, #site-navigation a, .category { color:#058b00 }
#bio h2 { color: black }
footer #rumination { color:grey }
pre, code { font-size:12px; }


/***** TOP です***************************************************************/

html {
	font:15px "Helvetica Neue", "Liberation Sans", "NimbusSanL",
		"Nimbus Sans", Arial, Helvetica, sans-serif;
	text-align:center;
}
body {
	height:100%;
	margin:0 auto;
	padding:30px 0 220px 0;
	text-align:left;
	width:760px;
}
h2 {
	font-size:1.45em;
	line-height:1.2em;
}
h3 {
	font-size:1.2em;
	margin-top:2em;
}
blockquote {
	font-style:italic;
	margin-left:1px;
	margin-right:0;
	padding-left:20px;
	padding-right:0;
}
pre {
	font-size:0.8em;
	line-height:1.2em;
	margin:1.6em 0;
	overflow-x:auto;
	padding:1em;
}

h1, h2, h3 { letter-spacing:-1px }
h2 a, a:hover { text-decoration:none }
dt { font-weight:bold }
img { margin-top:0.6em }
time { font-size:14px }
time:after { content:" ·" }


/***** ACCESSIBILITY です ****************************************************/

/* These are great for text browsers! */
hr {
	display:none;
	visibility:hidden;
}

/* Keep text visible for screen readers */
#skip, #skip:hover, #skip:visited, legend {
	height:1px;
	left:0px;
	overflow:hidden;
	position:absolute;
	top:-1000px;
	width:1px;
}


/***** HEADER です************************************************************/

#site-header { padding-bottom:30px }
#site-header h1 a { text-decoration:none }
#site-header img { height:0.8em }


/***** NAVIGATION です********************************************************/

#site-navigation {
	float:left;
	line-height:1.6em;
	width:140px;
}

#site-navigation h2 {
	letter-spacing:normal;
	font-size:13px;
	font-weight:bold;
	text-transform:uppercase;
	padding-top:0px;
}

#site-navigation a { display:block }
#site-navigation ul { padding-bottom:30px }


/**** MAIN です***************************************************************/

main { margin-left:140px }


/***** CONTENT です***********************************************************/

article, #bio, #archive {
	border-radius:3px;
	line-height:24px;
	margin-bottom:40px;
	padding:35px 40px 25px 40px;
	width:500px;
}
article img { max-width:100% }
article .category { font-size:14px; }
article header h2 { margin-bottom:2px }
#bio img { border-radius:10em; }


/**** PAGINATION です*********************************************************/

#pagination {
	font-weight:bold;
	line-height:1.6em;
	padding-left:180px;
}

#pagination a { font-weight:normal }


/**** ARCHIVES です***********************************************************/

#archive ul li {
	display:inline;
	white-space:nowrap;
}
#archive { padding-bottom:30px }


/**** FOOTER です*************************************************************/

footer #rumination {
	line-height:1.6em;
	padding:15px 0 0 180px;
	font-style:italic;
}


/**** REGULAR SCREENS です****************************************************/

@media screen and (max-width:960px) {
	body { width:720px; }
	article, #bio, #archive { width:500px; }
}

/**** SMALLER SCREENS です****************************************************/

@media screen and (max-width:760px) { 
	body {
		margin:0 auto;
		text-align:center;
		width:580px;
	}
	main {
		margin-left:0;
		text-align:left;
	}
	#site-navigation {
		float:none;
		margin:0 auto;
		width:94%;
	}
	#pagination { padding-left:0 }
	#site-header { padding-bottom:20px }
	#site-navigation li, #site-navigation li a { display:inline }
	#site-navigation li { margin:0 3px }
	#widgets { display:none }
}

/**** CLARA-SIZED SCREENS です************************************************/

@media screen and (max-width:600px) { 
	body, main, article, #bio {
		padding:0;
		width:100%;
	}
	article img { 
		height:auto !important;
		max-width:100% !important;
		width:auto !important;
	}
	body { padding:20px 0 120px 0; }
	table, iframe, pre { overflow-x:auto }
	article header { padding:20px 20px 0 20px }
	#bio h2 { padding:20px 20px 0 20px; }
	.post-content { padding:0 20px 20px 20px }

}

/***** DARK THEME です *******************************************************/

@media (prefers-color-scheme: dark) {
	body {
		background:black;
		color:lightgrey;
	}
	article,#bio,#archive { background:#1e1e1e }
	h2,h3,dt,strong,#bio h2 { color: white }
	a,summary { color:skyblue }
	summary:hover { background:darkblue }
	blockquote {
		border-color:grey;
		color:grey;
	}
	pre,code {
		background:black;
		border-color:#606060;
		color:lightgreen;
	}
	#site-navigation a, .category, time { color:lightgreen }
}

/*** EOF ***/