@charset "utf-8";

/*****
 * Rubenerd Paper Theme 2.0
 * Merger of my 2005, 2015, and 2025 themes. I'm sensing a *theme*, AHONHON.
 * December 2025
 */



:root {
	color-scheme:light dark;

	--light-bg-primary:white;
	--light-bg-secondary:#f1f3f2;
	--light-primary:black;
	--light-secondary:#556666;
	--light-tertiary:#aabbbb;
	--light-highlight:#009090;
	--light-shadow:2px 2px 5px #00061222;

	--dark-bg-primary:black;
	--dark-bg-secondary:#010302;
	--dark-primary:#999999;
	--dark-secondary:white;
	--dark-tertiary:#212322;
	--dark-highlight:#00d0d0;
	--dark-shadow:2px 2px 5px #000612dd;
}



/** ACCESSIBILITY ILITY ILITY ILITY ~ FATBOY SLIM BIG BEAT DROP ~ **/

#skip, #skip:hover, #skip:visited, legend {
	/* Show skip links in text-assisted browsers */
	height:1px;
	left:0;
	overflow:hidden;
	position:absolute;
	top:-1000px;
	width:1px;
}
hr {
	/* Use these to divide sections in text browsers */
	display:none;
	visibility:hidden;
}
summary {
	/* Indicate summaries can be clicked on */
	cursor:pointer;
	font-weight:bold;
}



/** EVERYBODY NEEDS A BODY **/

* {
	scrollbar-color:var(--light-highlight) var(--light-bg-primary);
}
html {
	padding-bottom:240px;
}
body {
	background:var(--light-bg-secondary) url("houndstooth.png") fixed;
	background-size:32px;
	color:var(--light-primary);
	font-family:"Liberation Sans","Helvetica Neue","Noto Sans","Open Sans",sans-serif;
	height:100%;
	margin:0;
	overflow-y:scroll;
	width:100%;
}
a {
	color:var(--light-highlight);
}
h1 a, h2 a, a:hover {
	text-decoration:none;
}
h2 a:hover {
	color:var(--light-primary);
}
img {
	box-shadow:var(--light-shadow);
	border-radius:2px;
}
.transparent {
	box-shadow:none;
}
q {
	font-style:italic;
}



/** HEADER IS BETTER **/

header {
	background:var(--light-highlight) url("https://rubenerd.com/files/headers/2026-02.png");
	background-size:cover;
	box-shadow:0px 2px 6px #00000044;
	color:white;
	image-rendering:pixelated;
	padding:60px 0;
	text-align:center;
	text-shadow:1px 1px 2px #000000;
}
header h1 {
	letter-spacing:-2px;
	font-size:3em;
	margin:0;
}
header h1 a {
	color:white;
}
header img {
	box-shadow:none !important;
	height:36px !important;
	image-rendering:auto !important;
}



/** NETSCAPE NAVIGATION **/

nav ul {
	margin:0;
	padding:20px 0 6px 0;
	text-align:center;
}
nav ul li {
	display:inline-block;
	margin:0 8px 8px 0;
}
#pagination {
	width:580px;
	text-align:center;
	font-weight:bold;
}
#pagination a {
	font-weight:normal;
}



/** YES I'D LIKE A SIDE OF BAR PLEASE **/

#sidebar {
	float:right;
	padding-bottom:240px;
	width:140px;
}
#sidebar h2 {
	color:var(--light-secondary);
	font-size:0.9em;
	padding-top:40px;
	text-transform:uppercase;
}
#sidebar ul, #sidebar p {
	line-height:1.4em;
}
#sidebar ul {
	margin:0;
	padding:0;
}
#sidebar ul li {
	list-style-type:none;
}



/** SCENTED, WAIT CENTRED COLUMN **/

#column {
	margin:40px auto;
	width:780px;
}



/** FRANKFURT AM MAIN (*/

#index main {
	float:left;
  width:580px;
}



/* BLOG POST FOR YOUR BLOG FENCE */

article, .secondary {
	background:var(--light-bg-primary);
	box-shadow:var(--light-shadow);
	line-height:1.5em;
	border-radius:2px;
	margin-bottom:60px;
	padding:40px 40px 20px 40px;
}
article h2, .secondary h2 {
	font-size:1.4em;
	letter-spacing:-1px;
	margin:0;
	text-align:center;
}
article h3 {
	font-size:1.2em;
	margin-top:50px;
	letter-spacing:-1px;
}
article blockquote {
	margin-right:0;
	padding-left:20px;
	margin-left:0;
	border-left:1px solid var(--light-highlight);
}
article dt {
	font-weight:bold;
}
article dd {
	margin-left:30px;
}
article img {
	color:var(--light-secondary);
	text-align:center;
	max-width:500px;
}
article pre {
	background:var(--light-bg-secondary);
	margin:30px 0;
	line-height:1.3em;
	padding:1.8em 2em;
	overflow-x:scroll;
}
article code {
	background:var(--light-bg-secondary);
	padding:3px 8px;
}
article pre code {
	padding:0;
}
article figure {
	margin:0;
	padding:3px 0 0.1px 0;
	text-align:center;
	width:500px;
}
article time {
	color:var(--light-secondary);
	display:block;
	font-size:0.9em;
	padding:2px 0 10px 0;
	text-align:center;
}
article .tags {
	color:var(--light-secondary);
	font-size:0.9em;
	padding-top:10px;
	text-align:center;
}
article .tags a {
	font-weight:normal;
	margin-left:2px;
	white-space:nowrap;
}



/** MEMORY PAGES **/

#page main, #taxonomy main {
	margin:0 auto;
	padding-top:40px;
	width:580px;
}
#page #pagination {
	line-height:1.5em;
	margin:0 auto;
	width:580px;
}



/** ARCHIVE, WHY YOU PROUNCED AS AR-KYVE? **/

#archive ol {
	padding:0;
}

#archive ol li {
	list-style-type:none;
	padding:0;
}



/** PEOPLE WITH DECENT 2xHiDPI MONITORS IN 2025 **/

@media screen and (resolution >= 2dppx) { 
	.pixelart img {
		image-rendering: pixelated;
	}
}



/** THIS RESOLUTION IS SMALLER **/

@media screen and (max-width: 800px) {
	#column {
		width:580px;
	}
	#index main {
		float:none;
	}
	article, #secondary {
		margin-right:0;
	}
	#sidebar {
		float:none;
		padding:60px 20px 0 20px;
		width:auto;
	}
	#sidebar li, #sidebar img {
		display:inline;
		margin-right:2px;
	}
}



/** CLARA-SIZED RESOLUTIONS **/

@media screen and (max-width: 600px) {
	main, #column, #pagination {
		max-width:100%;
	}
	#column {
		margin-top:4px;
	}
	article, .secondary {
		border-radius:0;
		margin-bottom:40px;
		padding:30px 20px;
	}
	article figure, article img {
		max-width:100%;
		height:auto !important;
	}
	pre {
		padding-right: 5%;
		padding-left: 5%;
	}
}



/** DARK MODE, FOR THOSE WHO LIKE WHITE TEXT BURNING INTO THEIR EYES **/

@media (prefers-color-scheme: dark) {
	* {
		scrollbar-color:var(--dark-highlight) var(--dark-bg-primary);
	}
	body {
		background-color:var(--dark-bg-secondary);
		background-image:url("houndstooth_dark.png");
	}
	body, #sidebar h2 {
		color:var(--dark-primary);
	}
	img {
		filter: brightness(0.8) contrast(1.2);
	}
	a {
		color:var(--dark-highlight);
	}
	header, article, img {
		box-shadow:var(--dark-shadow);
	}
	article, .secondary {
		background-color:var(--dark-bg-primary);
	}
	h2, h2 a:hover, article h3, article dt, article time, article strong, nav, article .tags {
		color:var(--dark-secondary);
	}
	article pre, article code {
		background:var(--dark-tertiary);
		color:var(--dark-secondary);
	}
}