/*
   file:    assets/styles.css/oystagony.css
   brief:   declares a '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;                /* termcol:    foreground */
	--bg:           #2f1700;                /* termcol:    background */
	--black:        #1f0f00;                /* termcol  0:   black */
	--brblack:      #3f2717;                /* termcol  8: brblack */
	--darkbrown:    #3f2717;
	--red:          #bf3f1f;                /* termcol  1:   red */
	--brred:        #ff7f7f;                /* termcol  9: brred */
	--lightred:     #ff7f7f;
	--green:        #5f7f5f;                /* termcol  2:   green */
	--brgreen:      #7f9700;                /* termcol 10: brgreen */
	--lightgreen:   #7f9700;
	--yellow:       #af9f37;                /* termcol  3:   yellow */
	--bryellow:     #af9f37;                /* termcol 11: bryellow */
	--darkyellow:   #8f7767;
	--brown:        #6f5f4f;
	--blue:         #7787ef;                /* termcol  4:   blue */
	--brblue:       #7787ef;                /* termcol 12: brblue */
	--darkblue:     #7f779f;
	--magenta:      #4b4243;                /* termcol  5:   magenta */
	--brmagenta:    #c2b8af;                /* termcol 13: brmagenta */
	--lightmagenta: #c9c0bb;
	--cyan:         #2fafcf;                /* termcol  6:   cyan */
	--brcyan:       #bfd7e7;                /* termcol 14: brcyan */
	--lightcyan:    #bfd7e7;
	--fawn:         #b3a37f;
	--white:        #fff7ef;                /* termcol  7:   white */
	--brwhite:      #fff7ef;                /* termcol 15: brwhite */
	--comp:         #c7d5e2;                /* nippon paint windsurf */
	--ylw:          #9f6f00;
	background-color: var(--magenta);         
	font-family: sans-serif;                    
	font-size: 61.8%;                           
	margin: auto;                               
/*	min-height: 100%;*/
/*	overflow-x: visible;*/
/*	overflow-y: auto;*/
	padding: auto;                              
	scroll-padding-top: 4rem;              /* height of sticky header */
	}                                           
                                                
/* 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(--magenta);
/*	cursor: crosshair; */
	font-size: 1.8rem;
	font-weight: 400;                                 /* default: 400 */
	hyphens: auto;
	line-height: 1.618;
	margin: auto;
/*	margin: 0 -13px;*/
	max-width: 74ch;
	padding: 13px 13px 0;
/*	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: 2em;
		border-top: 0.2em solid #9f9fef;
		color: var(--brblack);
		background-color: var(--brmagenta);
		font-size: 0.8em;
		font-weight: 400;
		margin: 0 -13px;
		padding: 0 13px;
	}

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

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

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

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

section {
	background-color: var(--black);
	margin: 0.4em -0.2em 0 -0.2em;
	padding: 0.2em;
	}

article {
	background-color: var(--brblack);
	border-radius: 0.4em;
	margin: 1em 0.2em 0.2em;
	padding: 0.6em 0.4em 0.4em;
	}

/* links: look & behavior ___________________________________________ */
a:link {
	color: var(--white);
	text-decoration: none;
	}

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

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

a:active {
	border-bottom: 0.12em solid var(--brblue);
	color: var(--white);
	font-size: 0.9em;
	font-weight: 600;
	}
	
a:focus,
a:hover {
	border-bottom: 0.12em solid var(--brblue);
	font-weight: 600;
	text-decoration: none;
	}
    
	header a:focus,
	header a:hover {
		color: var(--white);
		background-color: var(--brmagenta);
		font-size: 0.98em;
		font-weight: 600;
		}
    
	nav td:focus,
	nav td:hover {
		background-color: var(--brmagenta);
		color: var(--magenta);
		font-size: 0.98em;
		}
    
a:visited {
	color: inherit;
	text-decoration: none;
	}

	main a:visited {
		color: var(--white);
		}
	
		main footer a:visited {
			color: blue;
			}

a:[href]:after {
	}

/* attributes ________________________________________________________*/
abbr {
	color: var(--white);
	text-decoration: none;
	}

	footer abbr {
		color: var(--black);
		}

blockquote {
	align: left;
	background-color: var(--magenta);
	border-left: 0.4em solid var(--cyan);
	border-radius: 0 0.2em 0.6em 0;
	display: block;
	margin: 0 0.4em 0.2em 0.2em;
	max-width: inherit;
	padding: 0.4em 0.4em 0.4em 0.8em;        /* sakura: 0.8 0.8 0.8 1 */
	}
        
code {
	border-radius: 0.2em;
	color: var(--brmagenta);
	background-color: var(--magenta);
	font-family: 'Mononoki Nerd Font', 'Monaco', 'Consolas', monospace;
	font-size: 0.9em;
	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 {
		}

		figure details > summary {
			list-style: none;
			}

		figure details > summary::-webkit-details-marker {
			display: none;
			}

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;
	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: 1em 0 1.6em 0;
	padding: 0 0 0 0.2em;
	overflow-wrap: break-word;
	word-break: break-word;
		-ms-word-break: break-all;
	word-wrap: break-word;
	}

	section > article > h1,
	section > article > h2,
	section > article > h3,
	section > article > h4,
	section > article > h5,
	section > article > h6 {
		margin: 1rem 0 1rem 0;
		padding: auto;
		}

h1 {
	font-size: 2em;
	}

	header h1 {
		line-height: 1;
		margin: 0 0 1.2em 0;
		padding: auto;
		}

h2 {
	font-size: 1.6em;
	}

h3 {
	font-size: 1.4em;
	}

h4 {
	font-size: 1.2em;
	}

h5 {
	font-size: 1.1em;
	}

h6 {
	font-size: 1em;
	}

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

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;
	background-color: var(--brmagenta);
	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: auto;
	padding: auto;
	}

	span.anot {
		float: right;
		}

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

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;
		}

	nav table td {
		border-bottom: hidden;
		border-bottom-width: 0.2em;
		align: center;
		font-size: 1em;
		font-weight: 400;
		opacity: 1;
		padding: 0 0.2em 0;
		vertical-align: bottom;
		}

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

var {
	font-family: monospace;
	}

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-top {
	position: -webkit-sticky;                         /* safari & co. */
    position: -moz-sticky;
    position: -ms-sticky;
    position: -o-sticky;
	position: sticky;
	top: 0;
	}

.sticky-bottom {
	background-color: var(--brmagenta);
	bottom: 0;
	position: -webkit-sticky;
    position: -moz-sticky;
    position: -ms-sticky;
    position: -o-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 _________________________________________________*/