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

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));
	--tagheight:12px;
	--sh:1px;
		
	--colour:currentcolor;
	--uncolour: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);	
	font-feature-settings: "salt";
	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;
	background-color: var(--neutrallightest);
}



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

html {
	--neutrallightest:rgb(251, 248, 224);
	--neutrallight:rgb(245, 239, 204);
	--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(--terciarydark);
	--recolour:var(--neutrallightest);
	--text:var(--primarydarkest);
	--border:var(--neutraldarkest);
	--lightfilter:contrast(0.4) brightness(1.2) sepia(1);
	--normalfilter:unset;

	--night: ;
	--mono: ;
}

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

h1,.h1{
	--uncolour:var(--secondarydarkest);
	--recolour:var(--neutrallightest);
}
h2,.h2{
	--uncolour:var(--secondarydark);
	--recolour:var(--neutrallightest);
}
h3,.h3{
	--uncolour:var(--secondarychiaroscuro);
	--recolour:var(--neutraldarkest);
}
h4,.h4{
	--uncolour:var(--secondarylight);
	--recolour:var(--neutraldarkest);
}
h5,.h5{
	--uncolour:var(--primarylight);
	--recolour:var(--neutraldarkest);
}
h6,.h6{
	--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;
}





/*///////////////////////////////////////////////////////////////////////////////////////
Navbar
///////////////////////////////////////////////////////////////////////////////////////*/

nav{
	width: 100%;
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	font-weight: bold;
	background-color:var(--secondarylightest);
	border-bottom:2px solid var(--neutralchiaroscuro);
	overflow: hidden;
	position: sticky;
	top:0;
	z-index:5
}

nav .nav-link {
	flex-grow: 1;
}

nav divider {
	font-size: 175%;
	color: var(--neutralchiaroscuro)
}

nav img{
	max-height: var(--fontheight);
}

footer{
	display: flex;
	flex-direction: column;
	background-color:var(--secondarylightest);
	border-top:2px solid var(--neutralchiaroscuro);
}

/*///////////////////////////////////////////////////////////////////////////////////////
Layout
///////////////////////////////////////////////////////////////////////////////////////*/


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

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


/*///////////////////////////////////////////////////////////////////////////////////////
Text
///////////////////////////////////////////////////////////////////////////////////////*/


.text{
	padding: 0 var(--w4);
}


.text p{
	width: 100%;
	text-align:justify;
	text-indent:var(--s4);
}


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


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



.title{
	width: 100%;
	padding:var(--s4) 0 var(--s2) 0;
	margin: 0;
}



uptag{
	width: 100%;
	font-size:75%;
	font-style: italic;
	margin-bottom: var(--s1);
}



/*///////////////////////////////////////////////////////////////////////////////////////
Blockquotes
///////////////////////////////////////////////////////////////////////////////////////*/


blockquote{
	font-family: Georgia, Times New Roman, Times, Serif;
	padding: var(--h4) var(--w4);
	background: var(--neutrallight);
}

blockquote > p:first-of-type::before {
  content: open-quote;
	padding-right: var(--s-2);
}

blockquote > p:last-of-type::after {
  content: close-quote;
	padding-left: var(--s-2)
}

blockquote figcaption{
	text-align: right;
	font-size: 90%;
}


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


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 p a{
	color:inherit;
	text-decoration-line:underline;
	text-decoration-style:solid;
	text-decoration-color:var(--neutralchiaroscuro);
	text-decoration-thickness: 5%
}


.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, .headlink{
	cursor: crosshair;
}

	

/*///////////////////////////////////////////////////////////////////////////////////////
Gallery and cards
///////////////////////////////////////////////////////////////////////////////////////*/


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


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);
	padding:var(--h-2) var(--w-2) var(--h-2) var(--w-2);
	height: auto;
	filter: var(--lightfilter);
	object-fit:scale-down !important;
}


card:hover .image{
  filter: unset
}


/*///////////////////////////////////////////////////////////////////////////////////////
Icons
///////////////////////////////////////////////////////////////////////////////////////*/

icon svg{
	height: var(--fontheight)
}
.selectable svg:hover{
	filter: invert(100%)
}

/*///////////////////////////////////////////////////////////////////////////////////////
TOC - table of contents
///////////////////////////////////////////////////////////////////////////////////////*/

main{
	display: flex;
	flex-direction: row;
}


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%;
	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{
	margin-left:calc( var(--w2) * 1/var(--scaling));
	margin-right:calc( var(--w2) * 1/var(--scaling));
}


toc .h1{
	--scaling:0.8;
	font-size: 80%;
	border-bottom: 2px solid var(--neutralchiaroscuro)
}
toc .h2{
	--scaling:0.6;
	font-size: 75%;
	border-bottom:  1px solid var(--neutralchiaroscuro)
}
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(--neutralchiaroscuro)
}
toc .h5{
	--scaling:0.25;
	font-size: 60%;
	border-bottom:  1px solid var(--neutralchiaroscuro)
}
toc .h6{
	--scaling:0.2;
	font-size: 50%;
	border-bottom:  1px solid var(--neutralchiaroscuro)
}