/*
	Lotus Minima Theme (c) 2017-2026 by Pedro
*/

html{
  		
	--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(--darkblue);
}

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

body{
	min-height: 100vh;
	color:var(--darkblue); 
	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 {
	--white:rgb(211,231,231);
	--smokewhite:rgb(180,214,214);
	--darkblue:rgb(0,75,50);
	--blue:rgb(0,75,125);
	--lightblue:rgb(0,125,175);
	--turquoise:rgb(0,200,125);
	--lightestgreen:rgb(215,250,175);
	--lightgreen:rgb(175,225,150);
	--green:rgb(150,200,150);
	--yellow:rgb(220,200,100);
	--lightyellow:rgb(250,220,150);
	--beige:var(--lightyellow) ;
	
	--transparent:rgba(255,255,255,0);

	--uncolour:var(--blue);
	--recolour:var(--turquoise);

	--lightfilter:contrast(0.4) brightness(1.2) sepia(1);
	--normalfilter:unset;

}


/*///////////////////////////////////////////////////////////////////////////////////////
Lotus logo
///////////////////////////////////////////////////////////////////////////////////////*/

svg .darkblue{
	fill:var(--darkblue);
	stop-color:var(--darkblue);
}
svg .blue{
	fill:var(--blue);
	stop-color:var(--blue);
}
svg .lightblue{
	fill:var(--lightblue);
	stop-color:var(--lightblue);
}
svg .turquoise{
	fill:var(--turquoise);
	stop-color:var(--turquoise);
}
svg .green{
	fill:var(--green);
	stop-color:var(--green);
}
svg .yellow{
	fill:var(--yellow);
	stop-color:var(--yellow);
}
svg .lightyellow{
	fill:var(--lightyellow);
	stop-color:var(--lightyellow);
}
svg .beige{
	fill:var(--beige);
	stop-color:var(--beige);	
}


nav{
	width: 100%;
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	align-items: stretch;
	justify-content: space-evenly;
	font-weight: bold;
	background-color:var(--white);
	
}

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;
	background:var(--lightyellow);
}

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));
}
	column, .column{
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 100%;
}


/*///////////////////////////////////////////////////////////////////////////////////////
Headings
///////////////////////////////////////////////////////////////////////////////////////*/

h1,h2,h3,h4,h5,h6{
	width: 100%;
	
	font-weight:bold;
	text-align: left;
	line-height:calc(80% + 20% * var(--scaling));
	font-size:calc(120% * var(--scaling));
	
	margin: calc( var(--scaling) * var(--s4)) 0 calc( var(--scaling) * var(--s1)) 0;
	
	--shaderline: calc( var(--scaling) * var(--s-4)) 20px var(--uncolour);
	text-shadow: 10px var(--shaderline),
	            -10px var(--shaderline);
}


.h1,h1{
	--scaling:1.5;
	--uncolour:var(--lightyellow);
	--sh:4px;
	text-align: center;
	font-variant-caps:small-caps;
	font-feature-settings:normal;	
}
.h2,h2{
	--scaling:1.2;
	--uncolour:var(--yellow);
	--sh:3px;
	font-variant-caps:small-caps;
	font-feature-settings:normal;	
}
.h3,h3{
	--scaling:1;
	--uncolour:var(--green);
	--sh:2px;
	font-variant-caps:small-caps;
	font-feature-settings:normal;	
}
.h4,h4{
	--scaling:0.9;
	--uncolour:var(--turquoise);
	--sh:1px;
	font-variant-caps:small-caps;
	font-feature-settings:normal;	
	font-weight:normal;
}
.h5,h5{
	--scaling:0.85;
	--uncolour:var(--lightblue);
	--sh:0.5px;
	font-weight:normal;
	font-feature-settings:normal;	
}
.h6,h6{
	--scaling:0.77;
	--uncolour:var(--blue);
	--sh:0.25px;
	font-weight:normal;
	font-feature-settings:normal;	
}



/*///////////////////////////////////////////////////////////////////////////////////////
Layout and text
///////////////////////////////////////////////////////////////////////////////////////*/

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


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

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

.whiteboard{
	background-color: var(--white);
	line-height:120%;
	padding-bottom: var(--s8);
	padding-top: var(--s2);
	width: 100%;
}

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

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




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


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



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

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



figcaption p{
	margin: 0
}

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

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

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

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



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


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

.autotext{
  font-family:monospace;
}
	
body universe{
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	background:var(--smokewhite);
	min-height: inherit ;
}


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

footer{
	font-weight:700;
	padding:var(--h4) 0 var(--h4) 0;
	line-height: 120%;
}

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


.breadcrumbs{
	background-color: var(--white);
	width: 100%;
	font-size:75%;
	font-style: italic;
}

.page-tags{
	font-size:75%;
	font-weight:bold
}




	
blockquote{
	display: flex;
	font-family: Georgia, Times New Roman, Times, Serif;
}

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(--smokewhite);
	color: var(--darkblue);
	padding: var(--s1);
}

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

blockquote{
	flex-direction: column;
}

blockquote p{
	margin: 0
}




/*///////////////////////////////////////////////////////////////////////////////////////
Links and selectables
///////////////////////////////////////////////////////////////////////////////////////*/

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

a:visited{
	color:var(--blue)
}

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

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

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



select{
	--button-color:var(--lightyellow);
	color:var(--darkblue);
	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
}

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

.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(--darkblue) var(--white);
}
	.iconpath{
	fill: currentColor;
	min-width: calc( var(--fontheight) * 0.5);
	max-width: var(--fontheight);
	min-height: calc( var(--fontheight) * 0.5);
	max-height: var(--fontheight);
	overflow:visible;
}

a.headlink{
	text-decoration: none
}



/*///////////////////////////////////////////////////////////////////////////////////////
Icons and Keys
///////////////////////////////////////////////////////////////////////////////////////*/


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
  }
  
  icon text{
	  fill: currentColor;
	  font-weight: bold
  }

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

kbd icon{
	display: inline;
}


/*///////////////////////////////////////////////////////////////////////////////////////
Image galleries
///////////////////////////////////////////////////////////////////////////////////////*/

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

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

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

card .card-supra{
	padding:var(--s1);
	font-variant-caps:small-caps;
	text-decoration: none;
	font-weight:bold;
}

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

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(--lightyellow)
}

card:hover{
  z-index:2
}

card:hover .image{
  filter: unset
}


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



/*///////////////////////////////////////////////////////////////////////////////////////
TOC: Table of Contents
///////////////////////////////////////////////////////////////////////////////////////*/


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

.pretoc{
	max-width: 85%;
}

.toc-added .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),20%));
	max-height:100vh;
	overflow-x: hidden;
	overflow-y: scroll;
	background:linear-gradient(0deg, rgba(255,255,255,0) 0%, var(--white) 50%);
	text-align:right;
	padding-top: var(--s8);
	scrollbar-width: thin
}

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

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

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

.toc .toc-link:hover ,
.toc .toc-link:active,
.toc .toc-link:focus {
	background-color: var(--uncolour) !important;
	color: var(--darkblue);
}