/*
	Lotus Minima Theme (c) 2017-2026 by Pedro
	https://pedrosworks.com/
*/


feather {
	padding: var(--s8)
}

html{
  		
	--durationOff:1s;
	--durationOn:0.33s;
	--durationFade:1s;

	--scaling:2;
	--basis-width:calc(1vw);
	--basis-height:calc(1vh);

		
	--w1 :var(--basis-width);
	--w2 :calc(var(--w1)	* var(--scaling));
	--w4 :calc(var(--w2)	* var(--scaling));
	--w8 :calc(var(--w4)	* var(--scaling));
	--w16:calc(var(--w8)	* var(--scaling));
	--w32:calc(var(--w16)	* var(--scaling));
	--w64:calc(var(--w32)	* var(--scaling));
	--w-2:calc(var(--w1)	/ var(--scaling));
	--w-4:calc(var(--w-2)	/ var(--scaling));
	--w-8:calc(var(--w-4)	/ var(--scaling));

	--h1:var(--basis-height);
	--h2 :calc(var(--h1)	* var(--scaling));
	--h4 :calc(var(--h2)	* var(--scaling));
	--h8 :calc(var(--h4)	* var(--scaling));
	--h16:calc(var(--h8)	* var(--scaling));
	--h32:calc(var(--h16)	* var(--scaling));
	--h64:calc(var(--h32)	* var(--scaling));
	--h-2:calc(var(--h1)	/ var(--scaling));
	--h-4:calc(var(--h-2)	/ var(--scaling));
	--h-8:calc(var(--h-4)	/ var(--scaling));
 
	--s-32:calc((var(--h-32) + var(--w-32)) * 0.5);
	--s-16:calc((var(--h-16) + var(--w-16)) * 0.5);
	--s-8:calc((var(--h-8) + var(--w-8)) * 0.5);
	--s-4:calc((var(--h-4) + var(--w-4)) * 0.5);
	--s-2:calc((var(--h-2) + var(--w-2)) * 0.5);
	--s1:calc((var(--h1) + var(--w1)) * 0.5);
	--s2:calc((var(--h2) + var(--w2)) * 0.5);
	--s4:calc((var(--h4) + var(--w4)) * 0.5);
	--s8:calc((var(--h8) + var(--w8)) * 0.5);
	--s16:calc((var(--h16) + var(--w16)) * 0.5);
	--s32:calc((var(--h32) + var(--w32)) * 0.5);
	
	--fontheight:calc(12px + var(--s-2));
	--lineheight:var(--fontheight);
	--sh:1px;
		
	--colour:currentcolor;
	--uncolour:var(--neutraldarkest);
	
}

html {
	--neutrallightest:rgb(251, 248, 230);
	--neutrallight:rgb(245, 239, 214);
	--neutralchiaroscuro:rgb(206, 197, 147);
	--neutraldark:rgb(120, 115, 85);
	--neutraldarkest:rgb(61, 57, 33);

	--terciarylightest:rgb(233, 246, 251);
	--terciarylight:rgb(194, 232, 247);
	--terciarychiaroscuro:rgb(0,125,175);
	--terciarydark:rgb(0,75,125);
	--terciarydarkest:rgb(0,75,50);

	--primarybackdrop:rgba(0, 72, 46,0.5);
	
	--primarylightest:rgb(215,250,175);
	--primarylight:rgb(175,225,150);
	--primarychiaroscuro:rgb(0,200,125);
	--primarydark:rgb(0, 100, 63);
	--primarydarkest:rgb(0, 72, 46);
	
	--secondarylightest:rgb(252,238,206);
	--secondarylight:rgb(250,220,150);
	--secondarychiaroscuro:rgb(220,200,100);
	--secondarydark:rgb(160,134,0);
	--secondarydarkest:rgb(105,88,1);
	
	--translucent:rgba(255,255,255,0.2);
	--transparent:rgba(255,255,255,0);

	--uncolour:var(--neutraldark);
	--recolour:var(--neutrallightest);
	--text:var(--primarydarkest);
	--border:var(--neutraldarkest);
}


html{
	scrollbar-width: thin;
	scrollbar-color: var(--neutraldarkest) var(--neutrallightest);
	scroll-behavior: smooth;
	filter: unset;
	overscroll-behavior: none;
}

*{
	box-sizing: border-box
}

body{
	min-height: 100vh;
	color:var(--text); 
	caret-color:currentColor;
	border-color:currentColor;
	padding:0;
	margin:0;
	font-family:Arial, sans-serif;
	font-size:var(--fontheight);	
	line-height:var(--lineheight);	
	word-wrap:break-word;
	text-align:center;
	display:flex;/*Fix for overlapping layout issues*/
	flex-direction:column;/*Fix for overlapping layout issues*/
	justify-content:space-between;
	overflow-x: hidden;
	overscroll-behavior: none;
}

html pre {
	text-align: start;
	padding:var(--s1);
	tab-size: 4;
	white-space:pre!important
}

::selection{ 
	background:var(--primarychiaroscuro);
	color:var(--neutrallightest);
	text-decoration-color:var(--neutrallightest);
}

/* Scrollbars */
::-webkit-scrollbar {
  width: var(--w1);
}
::-webkit-scrollbar-track {
  background: var(--neutrallightest);
}
::-webkit-scrollbar-thumb {
  background: var(--neutraldarkest);
}



	/* Indices and Headings */

h1,.h1{
	--size: calc(var(--fontheight) * 3);
	--uncolour:var(--secondarydarkest);
	--recolour:var(--neutrallightest);
}
h2,.h2{
	--size: calc(var(--fontheight) * 2.5);
	--uncolour:var(--secondarydark);
	--recolour:var(--neutrallightest);
}
h3,.h3{
	--size:calc(var(--fontheight) * 2);
	--uncolour:var(--secondarychiaroscuro);
	--recolour:var(--neutraldarkest);
}
h4,.h4{
	--size: calc(var(--fontheight) * 1.5);
	--uncolour:var(--secondarylight);
	--recolour:var(--neutraldarkest);
}
h5,.h5{
	--size: calc(var(--fontheight) * 1.4);
	--uncolour:var(--primarylight);
	--recolour:var(--neutraldarkest);
}
h6,.h6{
	--size: calc(var(--fontheight) * 1.1);
	--uncolour:var(--primarylightest);
	--recolour:var(--neutraldarkest);
}


h1,h2,h3,h4,h5,h6,
.h1,.h2,.h3,.h4,.h5,.h6{
	font-variant-caps:small-caps;
  font-feature-settings:normal;	
	text-decoration:unset !important;	
}



column, .column{
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 100%;
}
row, .row{
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: center;
	max-width: 100%;
}


.inline{
	display: inline;
	width: unset;
	margin: unset;
	padding-left: unset;
	padding-right: unset;
}

.hidden{
	display:none !important;
}

.small{
	max-width: calc(var(--fontheight) * 6) !important;
}

.medium{
	max-width: calc(var(--fontheight) * 12) !important;
}



.concise,.concise *{
	text-overflow: ellipsis;
	overflow: hidden;
 	white-space: nowrap;
}



	.selectable:hover ,
.selectable:active,
.selectable:focus {
	background: var(--uncolour);
	color: var(--recolour);
	border-color: var(--recolour);
	text-decoration-color: var(--recolour);
	transition-duration:var(--durationOn);
	outline:none
}

.pulsating,
.pulsating:hover,
.pulsating:active,
.pulsating:focus{
	background-color:var(--uncolour);
	color:var(--recolour);
	--durationOff:0.001s;
	transition-duration:var(--durationOn);
}

.selectable, .selectable *{
	cursor:pointer;
}

.fraglink{
	cursor: crosshair;
}

.disabled, .disabled *{
	filter: saturate(0);
	cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='rgb(0,0,0)'%3E%3Cpath d='M 2 1 L 9 7 L 16 1 L 17 2 L 11 9 L 17 16 L 16 17 L 9 11 L 2 17 L 1 16 L 7 9 L 1 2 Z'/%3E%3C/svg%3E") 8 8, pointer;
}

.selected{
	filter: brightness(0.75)
}
	.scrollable{
	scrollbar-width: thin;
	scrollbar-color: inherit;
	scrollbar-color: var(--neutraldarkest) var(--neutrallightest);
}
.iconpath{
	fill: currentColor;
	min-width:  var(--fontheight);
	max-width: var(--fontheight);
	min-height:  var(--fontheight);
	max-height: var(--fontheight);
	overflow:visible;
}


.iconpath.outlined{
	stroke: currentColor;
	stroke-width: 0.1;
	fill:none
}

icon{
  display: flex;
  flex-direction: column;
	justify-content: center;
	align-items: center;
	max-width: var(--fontheight);
}

.inline icon{
	 padding: 0 calc( var(--fontheight) * 0.4); 
}

.inline icon{
	display: inline
}

.emoji{
		filter: contrast(0.3) sepia(1) brightness(1.1) contrast(2) hue-rotate(120deg) saturate(0.7)
}

icon text{
	fill: currentColor;
	font-weight: bold
}
	
textarea{
	scrollbar-width: thin;
	scrollbar-color: inherit;
	caret-color: currentColor;
}
	@media print {
  @page {
   size: A4
  }

  nav,
  aside,
  bookshelf,
  button,
   .toc{
    display: none !important;
  }

  .pretoc{
    width:unset;
    max-width: unset
  }
  *{
    filter: unset !important;
    background: unset !important;
  }
}





img,svg{
	max-width: 100%;
	height:auto;
}
.image, img{
	padding:var(--h-2) var(--w-2) var(--h-2) var(--w-2);
	width:auto;
	vertical-align:middle;
	display:inline-block;
	max-width:100%;
}


figure{
	max-width: 100%;
	margin: unset;
	margin-top: var(--s1); /* just like normal paragraphs*/
	margin-bottom: var(--s1);
}

figure figcaption{
	font-size: 80%;
	font-style: italic
}
	
admonition{
	--colour:var(--neutraldarkest);
	--bcolour:var(--neutraldark);
	--bgcolour:var(--neutrallight);
	
	width: 100%;
	padding: 0 var(--s2) 0;
	margin: var(--s2) 0;
	color:var(--color);
	border-left: var(--s-2) solid var(--bcolour);
	background-color:var(--bgcolour);
	display: flex;
	flex-direction: column;
	align-items:center
}

admonition.info{
	filter:hue-rotate(0deg)
}

admonition.pass{
	filter:hue-rotate(310deg)
}

admonition.idea{
	filter:hue-rotate(260deg)
}

admonition.fail{
	filter:hue-rotate(170deg)
}

admonition.warn{
	filter:hue-rotate(210deg)
}


admonition .emoji{
	filter: unset;
	font-size: 150%;
	margin: var(--s1)
}
	:root{
	--moonbow1:linear-gradient(115deg, 
		var(--primarychiaroscuro),
		var(--terciarydark)			60%,
		var(--terciarydarkest)
	); 
		--moonbow2:linear-gradient(115deg, 
		var(--terciarychiaroscuro),
		var(--secondarydark)			70%,
		var(--secondarydarkest)
	); 
}

.announce{
	flex-direction: column;
	background-color:var(--terciarydarkest);
	background-image:var(--moonbow2);
	margin:0;
	margin-bottom:var(--h1);
	padding:var(--h4) 0 var(--h4) 0;
	width:100%;
	font-size:120%;
}
.announce:nth-of-type(odd){
	background-image:var(--moonbow1);
}

.announce p {
	font-weight:bold;
	font-size:120%;
	color:var(--neutrallightest);
	margin:var(--h1) 0 var(--h1) 0;
	width:100%;
	line-height: 120%;
}

.announce a{
	text-decoration: unset;
}

.announce card {
	background:var(--neutrallight);
	border-radius: var(--s1)
}

	button{
	--button-color:var(--primarylight);
	color:var(--text);
	background-color:var(--button-color);
	font-size: inherit;
	font-family: inherit;
	align-self:center;
	align-items: center;
	display: flex;
	flex-direction: column;
	border-width: 0px;
	padding:var(--h-2) var(--w2) var(--h-2) var(--w2);
	margin:var(--h1) var(--w2) var(--h1) var(--w1);
	border-radius: var(--s1);
}

button.selected{
	border-top-width:var(--s-8);
	border-bottom-width:0;
}

button.inline{
	display: inline;
	width: unset;
	margin: unset;
	padding-left: unset;
	padding-right: unset;
}

button a{
	text-decoration:none;
	color:inherit;
}

button .textual{
	display: flex;
}

button.warn{
	filter:hue-rotate(-60deg);
	width:100%;
	padding:var(--h2) var(--w2);
	font-weight: bold
}

select{
	--button-color:var(--secondarylight);
	color:var(--neutraldarkest);
	background-color:var(--button-color);
	font-size: inherit;
	font-family: inherit;
	align-self:center;
	border-width: 0px;
	border-bottom-width:var(--s-4);
	border-bottom-style:solid;
	border-bottom-color:currentColor; 
	padding:var(--h-2) var(--w2) var(--h-2) var(--w2);
	margin:var(--h1) var(--w2) var(--h1) var(--w1);
	cursor: pointer
}

button row div:first-of-type{
	padding-right:var(--s-2)
}
	
code,.code{
	font-family:'Courier New', Courier, monospace;
	letter-spacing:0px;
	font-weight: bold;
	background-color: var(--neutraldark);
	color:var(--neutrallightest);
	padding:0 var(--s2) 0 var(--s2);
	white-space: pre-wrap; 
	text-align:left;
	overflow: scroll;
	tab-size: 4;
	cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='rgb(255,255,255)'%3E%3Cpath d='M 0 0 L 18 0 L 11 2 L 10 3 L 10 15 L 11 16 L 18 18 L 0 18 L 7 16 L 8 15 L 8 3 L 7 2 Z'/%3E%3C/svg%3E") 8 8, pointer;
	max-width: 100%;
	scrollbar-width: thin;
	scrollbar-color: inherit;
}

.code a{
	text-decoration: underline;
	color:var(--secondarylight)
}

code.column{
	align-items: flex-start
}

/*counters*/

code{
  counter-reset: line ;
}

code-line:before {
  content: counter(line);
  counter-increment: line;
	color: var(--primarylight);
	font-size: 75%;
	margin-right: var(--w2);
}

blockquote{
	display: flex;
	font-family: Georgia, Times New Roman, Times, Serif;
	margin: var(--h4) var(--w4)
}

blockquote > p:first-of-type::before {
  content: open-quote;
	font-size: 150%;
	padding-right: var(--s1);
	margin-left:calc(-2 * var(--s1));
}

blockquote > p:last-of-type::after {
  content: close-quote;
	font-size: 150%;
	padding-left: var(--s1)
}


.quote{
	background: var(--neutrallight);
	color: var(--text);
	padding: var(--s1);
}

.quote figcaption{
	width:100%;
	text-align: right;
}

blockquote{
	flex-direction: column;
}

blockquote p{
	margin: 0
}


.polycolumn{
	width: 100%;
	height: 100%;
	column-width: calc(var(--fontheight) * 8);
  column-rule: var(--w-2) solid var(--neutrallight);
	column-fill: balance;
	margin-bottom: var(--h2);
}

.polycolumn p{
	margin:0 !important;
	padding: 0;
	text-indent: 0;
	font-size: calc(var(--fontheight) * 0.7);
	line-height: calc(var(--fontheight) * 0.7);
	border: 0;
	width: 100%;
	overflow: hidden;
	white-space: nowrap;
  text-overflow: ellipsis;
}

table{
	font-size: 90%;
	overflow-x:clip;
	overflow-y:clip; /* so the eather does not come below on search scroll*/
	margin-top: var(--s1);
	margin-bottom: var(--s1);
	word-break:break-word;
	/* border-collapse: collapse; */
	width:100%;
}

thead{
	position: sticky;
  top: var(--s4);
	z-index: 4;
}

.ascended::before{
	content:"▲"
}
.descended::before{
	content:"▼"
}

thead th{
	background-color:var(--terciarychiaroscuro);
	color:var(--neutrallightest);
	padding:var(--s1);
}


tbody tr{
	background-color:var(--neutrallightest);
}
tbody tr:nth-child(odd){
	background-color:var(--neutrallight);
}


tbody tr:hover{
	background-color:var(--secondarylight);
	color:var(--neutraldarkest);
}

tbody td:hover{
	background-color:var(--secondarylight);
	filter:brightness(0.9)
}

td{
	padding: var(--s-2)
}

.table.dense td{
	max-width: 0px;
}

@media only screen and (max-width:350px){

	thead th, tbody tr{
		display:flex;
		flex-direction:column;
	}
	tr{
		margin-bottom: var(--dynasize);
		border-bottom: var(--dynasize) solid var(--lightcolour);
	}
	tr td{
		text-align: left;
	}
	tr:nth-child(even) td{
		text-align: right;
	}
	
	.table.dense td{
	   max-width: 100vw
  }
	
}

.caption{
	color:var(--darkcolour);
	font-style:italic;
}

table .image{
	max-width: calc(var(--fontheight) * 10)
}


p{
	text-align:left;
	text-indent:var(--s4);
	max-width: 100%;
	width: 100%;
	margin-top: var(--s1);
	margin-bottom: var(--s1);

}
p + p{
	margin-top:0;
}


ul,
ol{
	width: 100%;
	text-align:start;
	list-style-position: outside;
	margin:0;
	padding:0;
	padding-left:calc(var(--w8));
}


a{
	color:inherit;
	text-decoration:none;
	overflow:hidden;
}

a.fraglink{
	text-decoration:underline;
	text-decoration-style: dotted;
	text-decoration-thickness:1px;
}

a.outerlink{
	text-decoration-color:var(--text);
	text-decoration-style:double;
}

a{
	color:inherit;
	text-decoration-line:underline;
	text-decoration-style:solid;
	text-decoration-color:var(--neutralchiaroscuro);
	text-decoration-thickness: 5%
}

.iconpath{
	min-width:  calc( var(--fontheight) * 0.6);
	max-width: var(--fontheight);
	min-height:  calc( var(--fontheight) * 0.6);
	max-height: calc( var(--fontheight) * 0.5);
}

kbd .iconpath{
	min-width:  var(--fontheight);
	max-width: var(--fontheight);
	min-height:  var(--fontheight);
	max-height: var(--fontheight);
}

kbd {
	border: var(--s-8) solid;
	border-bottom-width: var(--s-4);
	padding: var(--s-2) var(--s-2) 0 var(--s-2);
	line-height: calc( 2 * var(--fontheight));
	font-family: inherit;
	font-weight: bold;
	background-color: var(--secondarylight);
}

kbd icon{
	display: inline;
}

kbd icon svg{
	min-width:30px;
	min-height:30px;
}

person {
	font-weight: bold;
	font-variant: small-caps;
}

.spoiler {
	color: inherit;
	background-color: inherit;
	cursor: inherit;
	transition-duration: var(--durationOff)
}
.spoiler.unspoiled, .spoiler.unspoiled * {
	color: transparent;
	background-color: var(--neutraldark);
	border-radius: var(--fontheight);
	cursor: pointer;
	text-shadow: unset;
}
.spoiler.unspoiled:hover,
.spoiler.unspoiled:hover * {
	background-color: var(--neutraldarkest);
}

mark {
	background-color: var(--secondarychiaroscuro);
	color: currentColor;
	padding: var(--h-8) var(--w-2)
}

ins{
	border-left: var(--w1) solid var(--primarydark);
	border-right: var(--w1) solid var(--primarydark);
	padding: var(--w-4);
	background-color: var(--primarylight);
	text-decoration: unset;
}

del{
	border-left: var(--w1) solid var(--secondarylightest);
	border-right: var(--w1) solid var(--secondarylightest);
	padding: var(--w-4);
	background-color: var(--secondarylight);
	opacity: 0.8
}

s{
	text-decoration-thickness:calc(0.5*var(--fontheight));
}

.label{
	--sat:90%;
	color:var(--text);
	background-color:var(--neutrallight);
	font-size:60%;
	font-weight:bold;
	word-break:normal;
	padding:var(--s-4);
	border-left:var(--s-2) solid var(--text);
}



figcaption p{
	margin: 0
}

sub{
  position: relative;
  top: calc(var(--fontheight)/2);
}

u{
	text-decoration:none;
	filter:drop-shadow(2px 2px 0px var(--secondarychiaroscuro));
}

.language-flag{
	background-color: var(--secondarylight)
}

footnotes{
	width: 100%;
	line-height: calc( 2* var(--fontheight));
 	margin:var(--s8) 0 var(--s2) 0;
	padding:var(--s2) 0;
	background-color: var(--neutrallight);
}

footnote{
	display: block;
	width: 100%;
	text-align: left;
  padding: 0 var(--s2);
}

footnote .number{
	font-weight: bold;
}

footnote .number::after{
	content: ")"
}

hr{
	margin: var(--s8) 0;
	background-color:var(--neutrallight);
	width: 100vw;
	height: var(--h-4);
	border: none;
}


.line-empty{
	padding: calc(var(--lineheight)/2) 0;
}