@namespace "http://www.w3.org/1999/xhtml";
@namespace svg "http://www.w3.org/2000/svg";
/* CyberDweebs stylesheet for browsers from circa 2011 or later.
(specifically, browsers which support inline SVG.) */
html {
	color-scheme: dark light;
	margin: 8px;
}
body {
	font-family: Helvetica, Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
	background-color: #111;
	color: #fff;
	max-width: 800px;
	margin: 0 auto;
}

h1 {
	font-size: 150%;
}
summary h2 {
	display: inline;
	margin: 0;
}
h2 {
	font-size: 120%;
}

footer {
	text-align: center;
	font-size: smaller;
}

summary {list-style-type: "\229e  ";}
details[open]>summary {list-style-type:"\229f  ";}
summary::marker {color:silver;}

*>svg|svg {overflow:hidden;line-height:normal;fill:#000;} /*IE*/

a:link, a:visited {
	text-decoration: underline;
	text-decoration-thickness: 1px;
}
a:link {color: lime;}
a:visited {color:silver;}
/* Classless link selector background-colors interfered with plugin. */
a.linkhack:hover, a.linkhack:focus, a.linkhack:active {
	background-color: lime;
	color: #111;
}
a.linkhack:visited:hover, a.linkhack:visited:focus, a.linkhack:visited:active {background-color:silver;}
/* Now things get complicated: We want to display visited links with a dashed underline, but the :visited selector can only change colours.
Links with class .linkhack contain an element as their direct child through which shenanigans can be applied. The ::after pseudo-element is used when printing. */
a.linkhack>*, a.linkhack::after {
	text-decoration: underline;
	-moz-text-decoration-style: dashed;
	text-decoration-thickness: 1px;
}
@supports (not (-webkit-text-emphasis: red)) or (text-decoration-thickness: 1px) {
	a.linkhack>*, a.linkhack::after {text-decoration-style: dashed;}
}
a.linkhack:visited>*, a.linkhack:visited:hover, a.linkhack:visited:focus, a.linkhack:visited:active {color:silver;}
a.linkhack:visited, a.linkhack:hover>*, a.linkhack:focus>*, a.linkhack:active>* {color:#111;}

.stripheader {line-height:180%;}
.stripheader h1, .header h1 {float:left;margin: 0;}
.stripheader nav, .header nav {float:right;text-align: right;}
.stripheader::after, .header::after {content:"";display:block;clear: both;}
.header {margin-bottom: 1em 0;}

#comic {
	text-align: center;
	margin: 0 -8px;
	line-height: 0;
	text-wrap: balance;
}
#comic > svg|svg {
	margin: 2px;
}

@font-face {
	font-family: "SS Boba Date";
	font-weight: normal;
	font-style: normal;
	src: local("SSBobaDate-Regular"), local("SS Boba Date Regular"), url("font/BobaDate.woff2") format("woff2"), url("font/BobaDate.woff") format("woff"), url("font/BobaDate.otf") format("opentype");
}
@font-face {
	font-family: "SS Boba Date";
	font-weight: normal;
	font-style: italic;
	src: local("SSBobaDate-Italic"), local("SS Boba Date Italic"), url("font/BobaDate-Italic.woff2") format("woff2"), url("font/BobaDate-Italic.woff") format("woff"), url("font/BobaDate-Italic.otf") format("opentype");
}
@font-face {
	font-family: "SS Boba Date";
	font-weight: bold;
	font-style: normal;
	src: local("SSBobaDate-Bold"), local("SS Boba Date Bold"), url("font/BobaDate-Bold.woff2") format("woff2"), url("font/BobaDate-Bold.woff") format("woff"), url("font/BobaDate-Bold.otf") format("opentype");
}
@font-face {
	font-family: "SS Boba Date";
	font-weight: bold;
	font-style: italic;
	src: local("SSBobaDate-BoldItalic"), local("SS Boba Date Bold Italic"), url("font/BobaDate-BoldItalic.woff2") format("woff2"), url("font/BobaDate-BoldItalic.woff") format("woff"), url("font/BobaDate-BoldItalic.otf") format("opentype");
}
svg|*[font-family="SS Boba Date"] {font-family: "SS Boba Date"} /*Opera 11.6*/

/* Disabling animations.
A bit janky but there was no other supported way to do it.
The !important flag is necessary to override the <set> element. */
@media (prefers-reduced-motion), (update: none), (update: slow), print {
	svg|*.anim0 {display: inline !important;}
	svg|*.anim8 {display: none !important;}
}
@media not (color), (prefers-contrast: more) {
	body {background-color:#000}
	a:link, a:visited {color: #fff;}
	a.linkhack:hover, a.linkhack:focus, a.linkhack:active {color:#000;background-color:#fff}
	a.linkhack:visited>*, a.linkhack:visited:hover, a.linkhack:visited:focus, a.linkhack:visited:active {color:#fff;}
	a.linkhack:visited, a.linkhack:hover>*, a.linkhack:focus>*, a.linkhack:active>* {color:#000;}
	summary::marker {color: #fff}
}
/* SVG monochromization */
@media not (color), (prefers-contrast: more), (-ms-high-contrast: active) {
	svg|*.fillf {fill: #fff;}
	svg|*.fill7 {fill: #777;}
	svg|*.fill0 {fill: #000;}
	svg|*.strokef {stroke: #fff;}
	svg|*.stroke7 {stroke: #777;}
	svg|*.stroke0 {stroke: #000;}
	svg|*.stop-colorf {stop-color: #fff;}
	svg|*.stop-color7 {stop-color: #777;}
	svg|*.stop-color0 {stop-color: #000;}
}

@media print, not (color), (prefers-contrast: more) {
	#comic {margin: 4px -6px}
	#comic > svg|svg {outline: 4px solid}
}
@media print, (prefers-color-scheme: light) {
	body {
		background-color: #d6d6d6;
		color: #000;
	}
	a:link {color: blue;}
	a:visited {color:purple;}
	a.linkhack:hover, a.linkhack:focus, a.linkhack:active {background-color:blue;color:#d6d6d6;}
	a.linkhack:visited:hover, a.linkhack:visited:focus, a.linkhack:visited:active {background-color:purple;}
	a.linkhack:visited>*, a.linkhack:visited::after, a.linkhack:visited:hover, a.linkhack:visited:focus, a.linkhack:visited:active {color:purple;}
	a.linkhack:visited, a.linkhack:hover>*, a.linkhack:focus>*, a.linkhack:active>* {color:#d6d6d6;}
	summary::marker {color: #333;}
	@media not (color), (prefers-contrast: more) {
		body {background-color: #fff}
		a:link, a:visited {color:#000;}
		a:hover, a:focus, a:active {color:#fff;background-color:#000}
		a.linkhack:visited>*, a.linkhack:visited::after, a.linkhack:visited:hover, a.linkhack:visited:focus, a.linkhack:visited:active {color:#000;}
		a.linkhack:visited, a.linkhack:hover>*, a.linkhack:focus>*, a.linkhack:active>* {color:#fff;}
		summary::marker {color:#000}
	}
}
@media print {
	body {background: #fff;color:#000}
	a.linkhack[href*=":"]::after {content: " <" attr(href) ">"}
	a.linkhack[href^="/"]::after {content: " <https://cyberdweebs.comicfurry.com" attr(href) ">"}
	a.linkhack[href^="//"]::after {content: " <https:" attr(href) ">"}
	a.linkhack:visited {color:#fff;} /* only sets text decoration backgroud */
	.stripheader nav, .header nav {display: none;}
}