/*
   file:    assets/styles.css/oystagony.css
   brief:   declares the 'signature' design for web development
   author:  (c) 2010-2025 alexander puls <https//vc.0vv1.io/www/>
   license: cc by-sa 4.0 <https://0vv1.io/cc-by-sa>
______________________________________________________________________*/

/* page & colors _____________________________________________________*/
html {
	--fg: #cfbfaf;
	--bg: #2f1700;
	--black: #1f0f00;
	--darkbrown: #3f2717;
	--lightred: #ff7f7f;
	--red: #bf3f1f;
	--lightgreen: #7f9700;
	--green: #5f7f5f;
	--yellow: #af9f37;
	--darkyellow: #8f7767;
	--brown: #6f5f4f;
	--blue: #7787ef;
	--darkblue: #7f779f;
	--lightmagenta: #9f8f9f;
	--magenta: #a76fa7;
	--lightcyan: #bfd7e7;
	--cyan: #2fafcf;
	--fawn: #b3a37f;
	--white: #fff7ef;
	--comp: #c7d5e2;                         /* nippon paint windsurf */
	--ylw: #9f6f00;
	background-color: var(--darkbrown);
	font-family: sans-serif;
	font-size: 61.8%;
	margin: auto;
/*	min-height: 100%;*/
/*	overflow-x: visible;/*
/*	overflow-y: auto;*/
	padding: auto;
	}

/* group elements ____________________________________________________*/
aside.left {
	background-color: var(--darkbrown);
	float: left;
	font-family: 'Mononoki Nerd Font', 'Monaco', 'Consolas', monospace;
	line-height: 1em;
	margin: 0 4px 0 -13px;
	padding: 0 4px 90px 13px;
	width: 20ch;
	}

aside.right {
	border-left: 60px solid rgba(102, 153, 204, 1);
	background-color: var(--darkbrown);
	float: right;
	font-family: 'Mononoki Nerd Font', 'Monaco', 'Consolas', monospace;
	line-height: 1em;
	margin: 0 -13px 0 4px;
	padding: 0 13px 90px 4px;
	width: 26%;
	}  

body {
	color: var(--fg);
	background-color: var(--bg);
/*	cursor: crosshair; */
	font-size: 1.8rem;
	font-weight: 400;                                 /* default: 400 */
	hyphens: auto;
	line-height: 1.618;
	margin: auto;
/*	margin: 0 -13px;*/
	max-width: 61.8rem;
	padding: 13px 13px 0 13px;
/*	counter-reset: footnotes;                            /* footnotes */
/*	[role="doc-noteref"] {
/*	counter-increment: footnotes;}
/*	[role="doc-noteref"]::after {
/*	content: '[' counter(footnotes) ']'; 
/*	vertical-align: super; 
/*	font-size: small;}
/*	[role="doc-noteref"]:focus::after {
/*	outline: thin dotted;
/*	outline-offset: 2px;} */
	}

@media (                               /* (c) oxalorg/sakura-dark.css */
	max-width: 684px;
	) {
	body {
		font-size: 1.53rem;
		}
	}

@media (                               /* (c) oxalorg/sakura-dark.css */
	max-width: 382px;
	) {
	body {
		font-size: 1.35rem;
		}
	}

footer {
/*	bottom: auto;*/
	border-top: 2 solid #9f9fef;
	color: var(--bg);
	background-color: var(--fg);
	font-size: 0.8em;
	font-weight: 400;
	margin: 0 -13px;
	padding: 0 13px;
	}

header {
	color: var(--fg);
	background-color: var(--brown);
/*	display: fixed;*/
	font-family: 'Mononoki Nerd Font', 'Monaco', 'Consolas', monospace;
	font-size: 2.2em;
	margin: -13px -13px -13px -13px;
	padding: auto;
	top: 0;
	}

main {
	background-color: var(--bg);
	margin: auto;
	min-height: calc(100vh - 10rem);
	padding: auto;
	}

nav {
	background-color: var(--darkbrown);
	font-size: 1.2em;
	font-weight: 400;
	margin: 0 -13px 0;
	padding: auto;
	text-decoration: none;
	}

section {
	margin: 0;
	padding: 5px;
	}

article {
	background-color: var(--darkbrown);
	border-radius: 0.4em;
	margin: auto;
	padding: 0.4em 0.4em 0.4em;
	}

	section > article {
		margin: 10px;
		padding: 5px;
		}

/* links: look & behavior ___________________________________________ */
a:focus,
a:hover {
	border-bottom: 2px solid var(--cyan);
	color: var(--cyan);
	font-weight: 600;
	text-decoration: none;
	}
    
	footer a:focus,
	footer a:hover {
		background-color: inherit;
		}

	header a:focus,
	header a:hover {
		border: none;
		color: var(--white);
		font-weight: 600;
		text-decoration: underline;
		}
    
	nav th:focus,
	nav th:hover {
		color: var(--white);
		background-color: var(--brown);
		font-size: 1.1em;
		font-weight: 700;
/*		padding: 8px 13px 5px 0.4em;*/
		text-decoration: none;
		}

a:link {
	color: var(--white);
	text-decoration: none;
	}

	footer a:link {
	color: var(--darkbrown);
	color: ;
		}

	header a:link, aside a:link {
		color: var(--fg);
		font-weight: 400;
		}

	nav a:link {
		padding: 0.4em 0.4em 0.2em 0.4em;
		}

a:visited {
	color: var(--white);
	text-decoration: none;
	}

	main a:visited {
		}
	
	nav a:visited {
	}
		
	footer a:visited {
		color: var(--brown);
		}

a:[href]:after {
	}

/* attributes ________________________________________________________*/
blockquote {
	align: left;
	background-color: var(--brown);
	border-left: 0.4em solid var(--cyan);
	border-radius: 0 0.2em 0.6em 0;
	display: block;
	margin: 0 0.8em 0 0;
	max-width: inherit;
	padding: 0.2em 0.4em 0.4em 1.0em;        /* sakura: 0.8 0.8 0.8 1 */
	}
        
code {
	border-radius: 0.2em;
	color: var(--fawn);
	background-color: var(--brown);
	font-family: 'Mononoki Nerd Font', 'Monaco', 'Consolas', monospace;
	font-size: 1em;
	padding: 0 0.2em;
	}

	code.heading {
		background-color: inherit;
		}

	code.truncb {
		border-radius: 1em 1em 0em 0em;
		border-style: inset inset none inset;
		}

	code.truncrb {
		border-radius: 1em 0em 0em 0em;
		border-style: inset none none inset;
		}

	code.trunct {
		border-radius: 0em 0em 1em 1em;
		border-style: none inset inset inset;
		}

	code.trunctb {
		border-radius: 0em 0em 0em 0em;
		border-style: none inset none inset;
		}

	h1 code {
		background-color: inherit;
		text-decoration: none;
		}

	pre code {
		background: #100800;
		border-color: #404040;
		border-radius: 1em;
		border-style: inset;
		display: inline-block;
		margin: 0.2em 0.4em;
		min-width: 61.8%;
		padding: 0.4em 0.5em 0.4em 0.4em;
		}

		blockquote pre code,
		li pre code {
			margin: 0;
			}

details {
	background: auto;
	border: none;
	border-radius: auto;
	font-size: inherit;
	margin: auto;
	padding: auto;
	}

	details summary {
		font-size: inherit;
		margin-bottom: auto;
		margin-left: auto;
		margin-right: auto;
		margin-top: auto;
		padding: auto;
		}

	details[open] summary {
		color: var(--comp);
		}

dd {
	margin-right: 3.8em;
	padding-left: 1em;
	}

	dd:after.beside {
		clear: left;
		content: " ";
		display: block;
		margin-bottom: 0.8em;
		margin-right: 0;
		}

dfn {
	font-size: 1em;
	font-style: normal;
	}

div {
	margin: 0;
	}

dl {
	margin: 0.3em;
	margin-left: 3.8em;
	padding-top: 1em;
	padding-bottom: 1em;
	padding-right: 0em;
	page-break-inside: avoid;
	}    

dt {
	font-size: 1em;
	font-variant: normal;
	padding-left: 0.2em;
	padding-right: 0.2em;
	padding-top: 0.5em;
	}

	dt.beside {
		float: left;
		font-weight: bold;
		margin-right: 0.5em;
		}

	dt:after.beside {
		content: ":";
		}

figure {
	border: none;
	margin: 0 0.2em 0 0;
	max-width: 5em;
	min-width: 3em;
	text-align: center;
	}

	figure figcaption {
		font-size: smaller;
		text-align: center;
		vertical-align: bottom;
		}

h1,
h2,
h3,
h4,
h5,
h6 {
	line-height: 1.2;
	font-weight: 400;
	margin: 3rem 0 1.6rem 0;
	overflow-wrap: break-word;
	word-break: break-word;
		-ms-word-break: break-all;
	word-wrap: break-word;
	}

h1 {
	font-size: 1.8em;
	font-weight: 300;
	}

h2 {
	font-size: 1.6em;
	font-weight: 300;
	}

h3 {
	font-size: 1.4em;
	font-weight: 300;
	}

h4 {
	font-size: 1.2em;
	font-weight: 400;
	}

h5 {
	font-size: 1.1em;
	font-weight: 400;
	}

h6 {
	font-size: 1em;
	font-weight: 400;
	}

hr {
	border-color: var(--brown);
	}

img, video {
	height: auto;
	margin: 0 0 0 0;
	max-width: 100%;
	padding: 0 0 0 0;
	}

kbd {
	border-radius: 0.2em;
	margin-right: 0em;
	padding-top: 0.1em;
	padding-left: 0.1em;
	padding-right: 0.1em;
	padding-bottom: 0;
	}

	code kbd {
		background: #202020;
		padding-bottom: 0em;
		padding-right: 0.1em;
		}

ul {
	margin: 1em 0em 0em 1vw;
	padding: 0 0 0 1.4em;
	page-break-inside: avoid;
	}
    
	details ul {
	    list-style-type: none;
		margin: auto;
		padding: auto;
		min-width: auto;
		}

li {
	list-style-position: outside;                          /* default */
	margin: 0.4em 0em 0 1vw;
	padding: 0.4em 0 0.4em 0;
	}

	aside li {
		color: var(--bg);
		background-color: var(--fg);
		border-radius: 0.4em;
		padding: 0.2em 0.75em 0.2em;
		position: relative;
		}

	details li {
		border-top-color: var(--bg);
		border-top-style: solid;
		border-top-width: 0.1em;
		margin: auto;
		}

mark {
	background: auto;
	border-radius: 0.1em;
	color: auto;
	padding: 0em 0em 0em 0em;
	}

p {
	margin: 0 0.2em 2.5rem;
	}

pre {
	}

	blockquote pre {
		margin: 0.7em 0em;
		min-width: 100%;
		padding-right: 0.5em;
		}

samp {
	padding-right: 0.5em;
	}

small {
	font-size: 0.7em;
	}

span {
	display: inline-block;
	margin: 0em;
	}

	span.anot {
		float: right;
		}

/*strong, {
	color: #DFC7AF}

	sup strong {
		color: #CCAA77;
		}*/

sub,
sup {
	font-size: 0.8em;
	}

	main sup {
		color: var(--white);
	}

	main blockquote sub,
	main blockquote sup {
		color: var(--white);
		}

	main footer sup {
		color: var(--darkbrown);
		}

	dd sup,
	li sup {
		color: #CCAA77;
		}

table {
	text-align: center;
	border-collapse: collapse;
	border-color: var(--fg);
	border-style: none;
	border-width: 0;
	font-weight: 400;
	width: 100%;
	}

	table td {
		border-collapse: seperate;
		border-spacing: 0em 0em;
		padding-left: 0;
		padding-right: 0;
		vertical-align: top;
		}

	table th {
		border-bottom: hidden;
		border-bottom-color: var(--white);
		border-bottom-width: 0.2em;
		align: center;
		font-size: 1.1em;
		font-weight: 400;
		opacity: 1;
		padding: 0 0 0 0;
		vertical-align: bottom;
		}

	table tr {
		border: none;
		margin: 0;
		padding: 0;
		}

var {
	background-color: var(--darkbrown);
	font-family: monospace;
	font-weight: 600;
	}

video {                                                  /* see 'img' */
	}

/* classes __________________________________________________________ */
.beside {
	display: inline-block;
	margin: 0 0 0.5em;
	vertical-align: top;
	}

.fn-web {
	font-size: x-small;
	}

.frame {
	border-color: #804000;
	border-style: dotted;
	border-width: 0.1em;
	}

.hl,
.hljs {
	background: #002B36;
	color: #839496;
	display: inline;
	overflow-x: auto;
	padding: 0.5em;
	}

.hl-cmt,
.hljs-comment,
.hljs-quote {
	color: #808080;
	}

.hl-em,
.hljs-emphasis {
	font-style: italic;
	}

.hl-mark,
.hljs-formula {
	background: #073642;
	}

.hl-orange,
.hl-netbsd {
	color: #F26711;
	}

.hl-red,
.hl-freebsd {
	color: #AB2B28;
	}

.hl-strong,
.hljs-strong {
	font-weight: bold;
	}

.hl-yellow,
.hl-openbsd {
	color: #F2CA30;
	}

.small {
	font-size: smaller;
	}

.sticky {
	position: -webkit-sticky;                         /* safari & co. */
	position: sticky;
	top: 0;
	}

.sticky-bottom {
	position: -webkit-sticky;
	position: sticky;
	}

.subheadline {
	fontsize: 0.8em;
	font-weight: lighter;
	margin: 0em 1em 5em;
	}

/* (original) author:
	(c) 2011 Ethan Schoonover <https://ethanschoonover.com/solarized/>
		<https://github.com/altercation/solarized/blob/master/LICENSE>*/

/* Blue */
.hl-name,
.hljs-name,
.hljs-section,
.hljs-selector-class,
.hljs-selector-id,
.hljs-title {
	color: #268BD2;
	}

/* Cyan */
.hl-val,
.hljs-doctag,
.hljs-literal,
.hljs-meta .hljs-meta-string,
.hljs-number,
.hljs-string,
.hljs-regexp {
	color: #2AA198;
	}

/* Green */
.hl-key,
.hljs-addition,
.hljs-keyword,
.hljs-selector-tag {
	color: #859900;
	}

/* Orange */
.hl-op,
.hljs-bullet,
.hljs-link,
.hljs-keyword,
.hljs-meta,
.hljs-meta,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-subst,
.hljs-symbol {
	color: #CB4B16;
	}

/* Red */
.hl-mod,
.hljs-built_in,
.hljs-deletion {
	color: #DC322F;
	}

/* Yellow */
.hl-var,
.hljs-attr,
.hljs-attribute,
.hljs-class,
.hljs-template-variable,
.hljs-title,
.hljs-type,
.hljs-variable {
	color: #B58900;
	}

/* eof oystagony.css _________________________________________________*/