/*
	Lotus Minima Theme (c) 2017-2021 by Pedro PSI
	https://pedros.works/
*/

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);
	--tagheight:12px;
	--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);

	--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);
	--lightfilter:contrast(0.4) brightness(1.2) sepia(1);
	--normalfilter:unset;

	--night: ;
	--mono: ;
}


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


.opening,
.closing{
	--fade:opacity var(--durationFade) ease-in-out;
	transition:var(--fade);
	-moz-transition:var(--fade);
	-webkit-transition:var(--fade);
	-o-transition:var(--fade);
	-ms-transition:var(--fade);
}
.closing{
  opacity:0;
}
.opening{
  opacity:1;
}
.faded{
	opacity: 0;
	transition-duration: var(--durationFade);
}

.hideCursor{
	cursor:none;
}

.current{
	background-color:var(--primarychiaroscuro);
}


.fragment.hyper{
	width: 100%;
}




/*Loading*/


body > pre {
	background: rgba(255,255,255,0.8);
	color: var(--text,rgb(0,0,75));
	height: 100vh;
	width:100vw;
	overflow: scroll;
	margin: 0;
	z-index:99999;
	position: absolute;
	 white-space: pre-wrap;
}

body > pre {
	 
  animation:   Reveal 10s linear;
}

@keyframes Reveal{
	0% {
		opacity: 0;
		background: rgba(255,255,255,0);
		color: var(--neutrallightest,rgb(255,255,255));
	}
	100% {
	}
}


.centered{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.overed{
	position:fixed;
	left:0;
	top:0;
	width:100vw;
	max-width:100vw;
	min-width:100vw;
	height:100vh;
	z-index: 100;
}


@keyframes Waves{
	0%,100% {
			background:rgb(170,225,225);
	}
	50% {
			background:rgb(0,55,55);
	}
}


@keyframes Clouds{
	0%,100% {
		opacity: 0.025;
	}
	50% {
		opacity: 0.6;
	}
}


slide#preload{
  -webkit-animation: Waves 10s infinite; 
  -moz-animation:    Waves 10s infinite; 
  -o-animation:      Waves 10s infinite; 
  animation:         Waves 10s infinite;
  transition-duration: var(--durationOff);
}
slide svg rect{
  -webkit-animation: Clouds 10s infinite; 
  -moz-animation:    Clouds 10s infinite; 
  -o-animation:      Clouds 10s infinite; 
  animation:         Clouds 10s infinite;
  transition-duration: var(--durationOff);
}

slide svg{
	width: max(50px,min(50%,500px));
	height:auto;
	fill-opacity: 0.5;
	stroke: var(--neutrallightest,white);
	stroke-width: 0.1px;
}

	
.nightskin{
	--night:contrast(0.5) sepia(1) invert(1) hue-rotate(140deg) contrast(1.5);
	filter: var(--night);
}

.monochromeskin{
	--mono: saturate(0);
	filter: var(--night) var(--mono);
}

.nightskin *{
	--lightfilter: ;
}

.compactskin {
	--scaling:1;
	--h1:var(--basis-height);

	--fontheight:12px;
	--lineheight:8px;
	--tagheight:1px;
	--sh:1px;
	
  --s1:1px;--s2:2px;--s4:4px;--s8:8px;--s16:16px;--s32:32px;
	--h1:1px;--h2:2px;--h4:4px;--h8:8px;--h16:16px;--h32:32px;
	--w1:1px;--w2:2px;--w4:4px;--w8:8px;--w16:16px;--w32:32px;
	--s-1:1px;--s-2:1px;--s-4:1px;--s-8:1px;--s-16:1px;--s-32:1px;
	--h-1:1px;--h-2:1px;--h-4:1px;--h-8:1px;--h-16:1px;--h-32:1px;
	--w-1:1px;--w-2:1px;--w-4:1px;--w-8:1px;--w-16:1px;--w-32:1px;
}

svg .darkblue{
	fill:var(--terciarydarkest);
	stop-color:var(--terciarydarkest);
}
svg .blue{
	fill:var(--terciarydark);
	stop-color:var(--terciarydark);
}
svg .lightblue{
	fill:var(--terciarychiaroscuro);
	stop-color:var(--terciarychiaroscuro);
}
svg .turquoise{
	fill:var(--primarychiaroscuro);
	stop-color:var(--primarychiaroscuro);
}
svg .green{
	fill:var(--primarylight);
	stop-color:var(--primarylight);
}
svg .yellow{
	fill:var(--secondarychiaroscuro);
	stop-color:var(--secondarychiaroscuro);
}
svg .lightyellow{
	fill:var(--secondarylight);
	stop-color:var(--secondarylight);
}
svg .beige{
	fill:var(--secondarylightest);
	stop-color:var(--secondarylightest);
}

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



.text h1, h1.title,
.text h2,
.text h3,
.text h4,
.text h5,
.text h6{
	font-weight:bold;
	width: 100%;
	font-size:var(--size);
	line-height:var(--size);
	padding-top: var(--size);
}


.text h1{
	border-bottom: 8px solid var(--neutraldarkest)
}
.text h2{
	border-bottom:  4px solid var(--neutraldarkest)
}
.text h3{
	border-bottom:  2px solid var(--neutraldarkest)
}
.text h4{
	font-weight:normal;
	border-bottom:  1px solid var(--neutraldarkest)
}
.text h5{
	font-weight:normal;
	border-bottom:  1px solid var(--neutraldark)
}
.text h6{
	font-weight:normal;
}

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

grid, .grid{
	display: grid;
	gap: var(--s-8) var(--s-8);
	scrollbar-width: thin;
	scrollbar-color: var(--neutraldarkest) var(--neutrallightest);
}

grid cell{
	padding: var(--s-2);
	text-align: left;
}

section{
	display:flex;
	flex-direction:column;
	margin:0;
	padding: 0;
	max-width: 100%;
	width: 100%;
}

container{
	max-width: 100%;
	width: 100%;
}

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

sticker, .sticker{
	position: sticky;
	top: 0;
	z-index: 2;
}

half-screen{
	width: 100vw;
	height: 100vh;

	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	
	--height:99vh;
	--width:99vw;
	
	--horizontaled:calc(min(max((var(--width) - var(--height) ),0px),1vw));
	--verticaled:  calc(min(max((var(--height) - var(--width) ),0px),1vh));

		padding: 0;
		position: absolute;
		top:0;
		background: var(--neutrallight);
		
}

tile {
		scrollbar-width:thin;
}

half-screen tile{
	min-width:calc(var(--width)    - 50 * var(--horizontaled));
	max-width:calc(var(--width)    - 50 * var(--horizontaled));
	min-height:calc(var(--height)  - 50 * var(--verticaled  ));
	max-height:calc(var(--height)  - 50 * var(--verticaled  ));
  margin:0;
	outline: 1px solid var(--secondarychiaroscuro);
	padding: 0;
	overflow: hidden;
}

.short{
		width: calc( 3 * var(--fontheight));
}

.longest{
	width:100%
}

.pane{
	width: 50vw;
	max-width: 99vw;
	height: 99vh;
	min-width: 10vw;
	max-height: 99vh;
	overflow-y: scroll;
	resize:horizontal;
	background: var(--neutrallightest);
	z-index: 10;
}

.panes{
	display:flex;
	flex-direction: row;
}

.visor {
	max-height: calc(var(--fontheight)*2 + var(--s1)*2);
	width: 100%; 
	overflow-x:scroll;
	overflow-y: hidden;
	margin: var(--s-2) 0;
	padding: var(--s1);
	background: var(--neutrallight);
	white-space: nowrap
}
	footer {
	background:var(--secondarylightest);
}

footer .row{
	margin:0;
	flex-wrap: unset;
	font-size: 90%;
}
footer .column{
	padding:0 var(--s4);
	align-items: flex-start;
}

footer .column:last-of-type{
	border-left: 1px solid var(--neutraldarkest)
}
footer a{
	font-size: 90%;
	line-height: 90%;
	font-weight: normal
}


.test-result p{
  margin-top:unset;
	margin-bottom:unset;
}


.external-area{
	width:100%;
	margin-top:var(--h4);
	flex-direction: column;
}


news-board{
	max-width: 100%;
	padding:var(--s1);
}

news-board p{
	text-align: left;
	font-size:80%;
	text-indent: 0;
}

change-stream {
	padding: var(--s1);
}

.fade-down {
	-webkit-mask-image: -webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,1)),to(rgba(0,0,0,0)));
}

change-item {
	display: block;
	width: 100%;
	text-align: start;
	padding: var(--s-4);
}

.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
}
	.variegated{
	--variunit:5deg;
	--varioffset:0deg;
}

.variegated:nth-child(2n) *{
	filter: hue-rotate(calc(1 * var(--variunit))) !important;
}

.variegated:nth-child(3n) *{
	filter: hue-rotate(calc(4 * var(--variunit))) !important;
}

.variegated:nth-child(5n) *{
	filter: hue-rotate(calc(10 * var(--variunit))) !important;
}

.variegated:nth-child(7n) *{
	filter: hue-rotate(calc(18 * var(--variunit))) !important;
}

.variegated:nth-child(11n) *{
	filter: hue-rotate(calc(23 * var(--variunit))) !important;
}

.variegated:nth-child(13n) *{
	filter: hue-rotate(calc(25 * var(--variunit))) !important;
}

.variegated *{
	--huen2:0;
	--huen3:0;
	--huen5:0;
	--huen7:0;
	--huen11:0;
	--huen13:0;
	--huen:calc(var(--varioffset) + var(--huen2) + var(--huen3) + var(--huen5) + var(--huen7) + var(--huen11) + var(--huen13));
	filter: hue-rotate(--huen)
}


	/*Gallery*/

gallery{
	display: flex;
	justify-content:space-evenly;
	align-items:center;
	flex-direction:row;
	flex-wrap:wrap;
}

gallery .loading{
	background:var(--secondarylight);
}

card {
	flex-grow: 1;
	flex-basis:5%;
	margin: var(--s-4);
  padding: var(--s-4);
	text-align: center;
}

.card-supra{
	padding:var(--s1);
	max-width: calc(var(--fontheight) * 6);
}

card legend{
	width: 100%;
	padding: var(--s-4);
	text-indent: 0;
	font-size: 90%
}

card heading{
	font-weight: bold;
}

card .image{
	max-width: calc(var(--fontheight) * 6);
	height: auto;
	filter: var(--lightfilter);
	object-fit:scale-down !important;
}

card img[src$=svg]{
	background-color: var(--secondarylight)
}

card:hover{
  z-index:2
}

card:hover .image{
  filter: unset
}

	.input{
	border:0;
	color:var(--neutralchiaroscuro);
	caret-color: currentColor;
	background-color:var(--neutrallightest);
	
	border:var(--w-8) solid;
	border-bottom:var(--h-2) solid;
	margin:var(--h1) var(--w-8) var(--h1) var(--w-8);
	
	padding-top:var(--h1);
	padding-bottom:var(--h1);
	
	font-family:inherit;
	font-size:inherit;
	
	align-self:center;
	
	overflow:auto;
	text-align:center;
	
	max-width:100%;
	min-width: calc(100% - var(--w8));
	min-height: var(--fontheight);

}

.input.inline{
	min-height: unset;
	padding: 0;
	min-width: unset;
	margin: 0;
}

.input:focus,
.input:hover,
.input:active{
	outline-style: none;
	filter: brightness(1.05);
}
.input:focus{
	color:var(--neutraldark);
}
.input::selection{
	background-color: var(--neutraldark);
	color:var(--secondarylight);
}

.input::placeholder{
	color: currentColor;
	opacity: 0.5;
}


.modal .input::placeholder{
	color:var(--primarydark);
}


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

	/* Playground*/

.playground textarea{
  width: 100%;
  height: 100%;
  resize: none;
  margin: 0;
}

.playground .live-preview{
  width: 100%;
  height: 100%;
  overflow: scroll;
  background-color:var(--neutrallightest);
  padding: 0;
  margin: 0;
  scrollbar-width:thin;
}



/* Logger */
logger{
	width:100%;
	margin:var(--s2);
  }
  
  logger .live{
	padding:var(--s1);
	width:calc(100% - var(--s2));
	max-width:calc(100% - var(--s1));
  }
  
  logger .live-preview{
	max-width:calc(100% - var(--s1));
	border: var(--s1) double var(--neutrallight)
  }
  
  logger news-item{
	display: flex;
	flex-direction: column
  }
	draggable, .draggable{
	position: absolute;
	top:0;
	left:0;
	cursor:move;
	max-height: 100%;
	max-width: 100%;
	overflow: hidden;
}

button.dragor{
	cursor:move;
}
	#textmonitor {
	position: absolute;
	z-index: 999999999;
	max-height: 15vh;
	overflow-y:scroll;
	resize:both
}



.monitor{
	background-color: var(--secondarylight);
	max-width: 99%;
	max-height:95%; 
	height: auto;
	width: auto;
	overflow: scroll;
	padding-left: var(--w-2);
	resize:both
}
#kudamonitor div{
	margin:1vh;	
	text-align: left;
	outline: 0.2vh solid var(--neutrallight)
}


.Console, .monitor{
	flex-direction: column;
	position:fixed;
	top:var(--h2);
	left:0;
	margin-top:var(--h1);
	width:100%;
	z-index:1000;
	align-items:center;
}

	.inputlabel{
	 padding: 0;
	 white-space:nowrap;
	 border:none;
}
.inputlabel button{
	padding:0px 2px;
	border-radius:calc(var(--lineheight)*0.3);
	background-color: var(--primarylightest);
	border-bottom-width: 1px;
	
}
.inputlabel .subtract{
	--huen:-60;
}

.search{
	position: sticky;
	top: var(--s2);
	z-index: 5;
}

.table .search{
	width: 100%;
}
	

.question{
	font-variant-caps:small-caps;
	font-weight:bold;
	font-size:calc(var(--fontheight) * var(--scaling));
	--scaling:1.2;
	transition-duration:var(--durationOff);
	color: var(--text);
	width: 100%;
	padding: var(--h2) 0 var(--h1) 0;
	margin: var(--h2) 0 var(--h1) 0;
}
.question:first-of-type{
	margin-top: unset;
}

.question-info{
	transition-duration:var(--durationOff);
	color: var(--text);
}

.field {
	flex-direction: column;
}

.subtitle .buttonrow{
	flex-direction:row;
	flex-wrap:wrap;
	margin-left:var(--w4);
	margin-right:var(--w4);
	justify-content:center;
	align-items:flex-end;
}

.subtitle .buttonrow button:hover,
.subtitle .buttonrow button:active,
.subtitle .buttonrow button:focus{
	background-color:var(--neutraldarkest);
	border-bottom-color:currentColor;
	color:var(--primarychiaroscuro);
}


.toolbar{
	margin-top:0;
	justify-content:space-evenly;
	flex-wrap:nowrap;
	background-color:var(--neutrallightest);
	width:100%;
}

.toolbar button{
	flex-grow:1;
	border-bottom-width:var(--h-2);
}

@media only screen and (max-width:330px){
	.toolbar{
		flex-wrap:wrap;
	}
}

.nowrap{
	flex-wrap:nowrap;
}

.section-title{
	width: 100%;
	margin: unset;
	margin-top: var(--h1);
}

.error{
	max-width:95%;
	font-weight:bold;
	color:var(--neutralchiaroscuro);
	align-self:center;
}

	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
}
	.supra-reactive{
  padding: unset;
  display: flex;
  align-items: baseline;
}

.reactive {
  margin: 0 var(--w-4) !important;
}


.reactive.editable{
  background: var(--terciarylightest);
  color:var(--text);
  padding: var(--h-2) var(--w-2) var(--h-8) var(--w-2);
  margin: 0 var(--w-4) 0 var(--w-4);
}
.reactive.editable.placeheld{
  color:var(--terciarychiaroscuro);
  background-color: var(--terciarylightest)
}

.reactive.editable:hover{
  background: var(--secondarylight);
  color:var(--text);
   padding: var(--h-2) var(--w-2) var(--h-8) var(--w-2);
}
.reactive.editable:focus,
.reactive.editable:active{
    background: var(--secondarylightest);
    color:var(--text);
    padding: var(--h-2) var(--w1) var(--h-8) var(--w1);
    border-bottom-width: var(--h-2);
    border-bottom-style:solid;
    transition-duration:var(--durationOn);
}

.reactive.editable:focus::before,
.reactive.editable:active::before{
   content: "‎ "
}
	.snowy{
  	filter:hue-rotate(280deg) !important;
}

.snowy{
  background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60px' height='120px' viewBox='0 0 60 120' xml:space='preserve'>   <g transform='translate(0,0),scale(1)' > <path stroke='rgba(255,255,255,0.5)' lineCap='round' opacity='0.1' stroke-width='2' fill='rgba(255,255,255,1)' d='m 27 7 l -3 3 l 2 0 l -3 3 l 2 0 l -3 3 l 3 0 l -4 3 l 5 0 l 0 1 l 2 0 l 0 -1 l 5 0 l -4 -3 l 3 0 l -3 -3 l 2 0 l -3 -3 l 2 0 z m 20 20 l -2 4 l -5 1 l 3 4 l -1 5 l 5 -2 l 5 2 l -1 -5 l 3 -4 l -5 -1 z m 20 20 l -2 4 l -5 1 l 3 4 l -1 5 l 5 -2 l 5 2 l -1 -5 l 3 -4 l -5 -1 z m -60 0 l -2 4 l -5 1 l 3 4 l -1 5 l 5 -2 l 5 2 l -1 -5 l 3 -4 l -5 -1 z m 20 20 l -2 4 l -5 1 l 3 4 l -1 5 l 5 -2 l 5 2 l -1 -5 l 3 -4 l -5 -1 z m 20 20 l -3 3 l 2 0 l -3 3 l 2 0 l -3 3 l 3 0 l -4 3 l 5 0 l 0 1 l 2 0 l 0 -1 l 5 0 l -4 -3 l 3 0 l -3 -3 l 2 0 l -3 -3 l 2 0 z m 20 20 l -2 4 l -5 1 l 3 4 l -1 5 l 5 -2 l 5 2 l -1 -5 l 3 -4 l -5 -1 z m -60 0 l -2 4 l -5 1 l 3 4 l -1 5 l 5 -2 l 5 2 l -1 -5 l 3 -4 l -5 -1 z'/> </g> </svg>") !important;
}

.halloween-bat{
  z-index: 100;
  position: absolute;
  top:0;
  right:0;
  background: rgba(180,214,214,0.5);
}
	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;
}

.buttonrow{
	display:flex;
}

.buttonrow button{
	font-size:100%;
	margin:unset;
	background-color: var(--neutrallightest);
}

.buttonrow.tags{
	justify-content:flex-end;
	flex-wrap:wrap;
	width:100%;
	margin-bottom:var(--h2);
}

.buttonrow.tags .tag{
	font-size: 75%;
	padding: var(--h1) var(--w1) var(--h1) var(--w1);
	justify-content: flex-end;
	flex-direction: row;
}
.buttonrow .tag:first-of-type{
	background-color:var(--secondarylight);
}

.buttonrow .tag{
	color:var(--text);
	border-color:currentColor;
	margin:0;
	padding-top:var(--tagheight);
	padding-bottom:var(--tagheight);
	align-self:stretch;
	background-color:var(--neutrallightest);
}

.buttonrow .tag time{
	padding: 0 var(--w-4) 0 var(--w-4)
}

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)
}
	
bookshelf{
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content:space-between;
	overflow-x:scroll;
	overflow-y:hidden;
	scrollbar-width: thin;
	scrollbar-color: var(--neutraldarkest) var(--neutrallightest);
	border-bottom: 2px solid var(--neutraldarkest)
}

bookshelf book{
	writing-mode:vertical-rl;
	max-height: 33vh;
	flex-grow: 1;
	font-size: 70%;
}

bookshelf book a {
		min-width: calc(min(12px + var(--w1),20px));
}

bookshelf .variegated{
	--variunit:5deg;	
	--varioffset:-30deg;
	filter: hue-rotate(var(--varioffset))
}

bookshelf book a{
	display: flex;
	align-items: center;
	text-align: left;
	font-weight: bold;	
	font-variant: small-caps;
	line-height: 80%;
	height: 100%;
	width: 100%;
	color:var(--uncolour);
	background:var(--primarylightest);
	padding-bottom: var(--s2);
	padding-top: var(--s1);
	outline: 1px solid var(--neutraldarkest)
}


book.current{
	filter: saturate(0)
}
	.carousel {
	width: 100%;
	text-align: center;
	overflow: hidden;
}

.slides {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
}


.slides > div {
	scroll-snap-align: start;
	flex-shrink: 0;
	width: 100%;
	margin-right: 50px;
	border-radius: 10px;
	background: #eee;
	transform-origin: center center;
	transform: scale(1);
	transition: transform 0.5s;
	position: relative;

	display: flex;
	justify-content: center;
	align-items: center;
	}



.carousel .links a {
	display: inline-flex;
	width: 1.5rem;
	height: 1.5rem;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	margin: 1rem 0 0.5rem 0;
	position: relative;
}


/* Don't need button navigation */
@supports (scroll-snap-type) {
	.carousel .links {
		display: none;
	}
}

	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);
}
	.datetags{
	background-color: var(--neutrallightest);
	width: 100%;
	font-size:75%;
	font-style: italic;
}
	.datetimepicker {
	display: inline-flex;
	align-items: center;
	background-color: var(--primarylightest);
}

.datetimepicker:focus-within {
	border-color: var(--primarydark);
}
.datetimepicker input {
	font: inherit;
	color: inherit;
	-moz-appearance: none;
			appearance: none;
	outline: none;
	border: 0;
	background-color: transparent;
}
.datetimepicker input[type=date] {
	width: 10rem;
	padding: 0.25rem 0 0.25rem 0.5rem;
	border-right-width: 0;
}
.datetimepicker input[type=time] {
	width: 5.5rem;
	padding: 0.25rem 0.5rem 0.25rem 0;
	border-left-width: 0;
}
	modal{	
	--t:0.75;
	background-color:var(--primarydarkest);
	transition:visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
	animation:fadein var(--durationOff);
	z-index:10;
}

dialog{
	flex-direction: column;
	background-color:var(--secondarylight);
	color:var(--text);
	border-color: var(--secondarylight);
	scrollbar-width: thin;
	max-width: calc( 95vw - var(--w8)); /* space for scrollbar on ultrathin windows */
	max-height: calc( 95vh - 120px); /* also for fingers */
	overflow-y: scroll;
	overflow-x: hidden;
}

dialog img{
	max-height: calc(100vh - var(--h16) -  var(--h8));
}

dialog .input::placeholder{
	color:var(--primarydark);
}


dialog input,
dialog textarea{
	max-width:calc(100% - var(--w1));
	min-height: var(--fontheight);
	background-color:var(--secondarylight);
	text-align:center;
}

dialog+button{
	position: absolute;
	top:0;
	font-weight: bold;
	border-color:var(--secondarychiaroscuro);
	color:var(--secondarychiaroscuro);
	background-color: unset;
}
	universe{
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	background:var(--neutrallight);
	min-height: inherit ;
}

.title{
	width: 100%;
	padding:var(--s4) 0 var(--s2) 0;
	margin: 0;
	border: unset;
	background-color:var(--neutrallightest);
}

footer{
	font-weight:700;
	padding:var(--h4) 0 var(--h4) 0;
	line-height: 120%;
	border-top:2px solid var(--neutraldarkest);
}

footer.text p{
	text-align: center;
}


tile-board{
	width: 100%;
	display: flex;
}

tile-board tile{
	flex-grow: 1;
	
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	
	padding: var(--s1)
}

tile-board tile tile-title{
	font-weight: bold;
	font-variant: small-caps;
	font-size:130%;
}
	nav{
	width: 100%;
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	align-items: stretch;
	justify-content: space-evenly;
	font-weight: bold;
	background-color:var(--secondarylightest);
	border-bottom:2px solid var(--neutraldarkest);
	position: sticky;
	top:0;
	z-index:5
}

nav .nav-link,
nav presser{
	padding:0;
	flex-grow: 1;
}


nav .supra-logo svg:hover rect{
	filter: brightness(1.75);
	transition-duration: 2s
}
nav .supra-logo svg rect{
	transition-duration: 0s
}


nav .supra-logo{
	display: flex;
	flex-direction: row;
	flex-grow: 0;
	align-items: stretch;
	justify-content: left;
}

nav .supra-logo a{
	justify-content: center;
}

nav .supra-logo divider, nav .supra-logo .logo{
	display: flex;
	flex-direction: column;
	justify-content: center;
	font-weight: lighter;
	font-size: 200%
}


.logo svg{
	height:calc(var(--s2) + var(--fontheight));
	width:calc(var(--s2) + var(--fontheight));
}
	
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
}
	universe{
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	background:var(--neutrallight);
	min-height: inherit ;
}

.title{
	width: 100%;
	padding:var(--s4) 0 var(--s2) 0;
	margin: 0;
	border: unset;
	background-color:var(--neutrallightest);
}

footer{
	font-weight:700;
	padding:var(--h4) 0 var(--h4) 0;
	line-height: 120%;
	border-top:2px solid var(--neutraldarkest);
}

footer.text p{
	text-align: center;
}


tile-board{
	width: 100%;
	display: flex;
}

tile-board tile{
	flex-grow: 1;
	
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	
	padding: var(--s1)
}

tile-board tile tile-title{
	font-weight: bold;
	font-variant: small-caps;
	font-size:130%;
}
	.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.text{
	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;
}
.polycolumn h3{
	font-size: calc(var(--fontheight));
	margin: var(--h-2) 0 var(--h-2) 0;
	padding: unset;
	text-indent: unset;
	border: unset;
}
#tests-passed span{
	font-size: calc(var(--fontheight)*0.7);
	line-height: calc(var(--fontheight)*0.7);
	padding: 0;
	margin: 0;
}
	.repl{
	max-width: 100%;
}

.repl textarea, .test-result textarea{
	width:100%;
	height:auto;
	padding:var(--s1);
}

.repl .repl-result{
	background-color: var(--secondarylightest);
	color: var(--text);
	cursor:pointer;
	overflow: scroll;
}

.repl .repl-result:nth-child(odd){
	filter:hue-rotate(20deg)
}

.expected{
	background-color: var(--neutrallight);
}


.repl-test p{
	text-align:left;
	font-weight: bold;
}




.doc-arguments{
	text-align: left;
	background: var(--neutrallight);
	padding: var(--h2) var(--w2);
	margin: var(--h2) var(--w2) 0 var(--w2);
}


.test-result.accepted{
	background-color: var(--primarydark)
}

.test-result.erased{
	background-color: var(--secondarychiaroscuro)
}

	.ribbon {
	position: fixed;
	z-index:6;
	top:0;
	right:0;
	width:600px;
	transform: translate(200px,0px) rotate(45deg) translate(40px,0px) ;

	background-color: var(--terciarydark);
	color: var(--terciarylightest);
	text-align: center;
	font-weight: bold;
	font-size: 120%;
	border-width: 5px 0;
	border-color: var(--terciarylightest);
	border-block-style: solid;
	font-family: Arial
}
	.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
}

table{
	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
  }
	
}

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

.table .image{
	max-width: calc(var(--fontheight) * 10)
}
	.whiteboard{
	background-color: var(--neutrallightest);
	line-height:120%;
	padding-bottom: var(--s8);
	padding-top: var(--s2);
	width: 100%;
}

.whiteboard .text{
	padding: 0 var(--w8) 
}

.whiteboard .text .text{
	padding: unset 
}

.whiteboard .image{
	width: calc(var(--fontheight) * 30)
}

.text p{
		text-align:left;
		text-indent:var(--s4);
}

p{
	width: 100%;
	max-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(--w2));
}

.text > ul, .text > ol {
	padding-left:calc(var(--w8));
}

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

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

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

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

.text .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);
}

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

.name {
	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;
}

.autotext{
	font-family:monospace;
}

.largetext{
	font-size:150%
}
	.toast{
	flex-direction: column !important;
	pointer-events:all;
	background-color:var(--secondarylight); 
	color:var(--neutraldark);
	border-bottom:var(--h1) solid currentColor; 
	margin-bottom:var(--h2);
	padding:var(--h1) var(--w2) var(--h1) var(--w2);
	font-weight:bold;
	align-self:center;
	flex-direction: row;
	max-height:20vh; 
	/*overflow-y: scroll;*/
}
	/* TOC */

.toc-added{
	display: flex;
	flex-direction: row;
	
}

.pretoc{
	max-width: 85%;
}

.toc{
	position: sticky;
	top: 0;
	display: flex;
	flex-direction: column;
	flex-flow:row wrap;
	align-items: flex-start;
	align-content: flex-start;
	justify-content: stretch;
	min-width: 15%;
	max-width: calc(min(var(--w32),15%));
	max-height:100vh;
	overflow-x: hidden;
	overflow-y: scroll;
	background:var(--neutrallight);
	text-align:right;
	padding-top: var(--s8);
	scrollbar-width: thin;
	border-left: 1px solid var(--neutralchiaroscuro)
}

.toc a.toc-link{
	justify-self:left;
	width: 100%;
	margin-bottom:calc(var(--scaling) * 0.2 * var(--lineheight));
	text-decoration:underline;
	text-decoration-style: dotted;
	text-decoration-thickness:1px;
	text-align: left;
	padding-right: 0;
	margin-right: 0;
	max-height: var(--fontheight);
	overflow: hidden;
	font-stretch:condensed
}

.toc .toc-link{
	display: flex;
	margin-left:calc( var(--w2) * 1/var(--scaling));
	margin-right:calc( var(--w2) * 1/var(--scaling));
}

.header a{
	text-decoration: unset;
}


.toc .h1{
	--scaling:0.8;
	font-size: 80%;
	border-bottom: 2px solid var(--neutraldarkest)
}
.toc .h2{
	--scaling:0.6;
	font-size: 75%;
	border-bottom:  1px solid var(--neutraldark)
}
.toc .h3{
	--scaling:0.4;
	font-size: 70%;
	border-bottom:  1px solid var(--neutralchiaroscuro)
}
.toc .h4{
	--scaling:0.3;
	font-size: 65%;
	border-bottom:  1px solid var(--neutrallight)
}
.toc .h5{
	--scaling:0.25;
	font-size: 60%;
	border-bottom:  1px solid var(--neutrallight)
}
.toc .h6{
	--scaling:0.2;
	font-size: 50%;
	border-bottom:  1px solid var(--neutrallight)
}