:root{

	--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));
	
	--fontheight:calc(12px + var(--w-2));
	--lineheight:var(--fontheight);
	--tagheight:12px;
	--sh:1px;
	
	--horiz:var(--w4);
	--verti:var(--h1);
}

html{
	scroll-behavior: smooth;
	overflow-x: hidden; /*removes unnecessary horizontal scrollbar*/
}

body{
	min-height: 100vh;
	background-color:var(--smokewhite);
	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);	
	justify-content:space-between;
	text-align:center;
	word-wrap:break-word;
	font-feature-settings: "salt";
	display:flex;/*Fix for overlapping layout issues*/
	flex-direction:column;/*Fix for overlapping layout issues*/
}




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


.selectable:hover ,
.selectable:active,
.selectable:focus ,
.selectable:hover .selectable,
.selectable:active .selectable,
.selectable:focus .selectable,
.selectable:hover .image,
.selectable:focus .image,
.selectable:active .image,
.selectable.selected,
.selected .selectable,
.selected{
	color:var(--turquoise);
	text-decoration-color:currentColor;
	background-color:var(--darkblue);
	transition-duration:var(--durationOn);
	border-bottom-color:currentColor;
	cursor:pointer;
	outline:none;
	text-shadow:unset;
	background-image:unset;
	border-color: var(--darkblue);
}

.selectable:hover .image,
.selectable:focus .image,
.selectable:active .image{
	opacity: unset;
	filter: var(--normalfilter);
}


/* Scrollbars */
body{
	scrollbar-width:thin;
	scrollbar-color: var(--darkblue) var(--white);
}
::-webkit-scrollbar {
	width: var(--w1);
}
::-webkit-scrollbar-track {
	background: var(--white);
}
::-webkit-scrollbar-thumb {
	background: var(--darkblue);
}
::-webkit-scrollbar-thumb:hover {
	background:var(--turquoise);
}


.iconpath{
	fill: currentColor;
	stroke: currentColor;
	height: var(--fontheight);
	padding: 0 var(--w-2) 0 var(--w-2);
}

.icon{
	display: flex;
	justify-content: center;
	flex-direction: column;
	height: 100%;	
}

p .icon{
	display: inline;
}



a{
	text-decoration:none;
	color:var(--darkblue);
	overflow:hidden;
	transition-duration: var(--durationOff);
}

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

a.selflink{
	width: 100%;
}

.whiteboard a.selflink,
.whiteboard a.selflink:hover,
.whiteboard a.selflink:active,
.whiteboard a.selflink:focus,
.whiteboard a.selflink.selected{
	margin-bottom: var(--verti);
	padding: 0;
	text-decoration: none;
	background-color: unset;
	color: var(--darkblue);
}

.whiteboard a.selflink .header{
	margin: 0;
	padding: 0;
}



.whiteboard{
	width: calc(100% - var(--w-8));
	background-color: var(--white);
	align-items:center;
	padding-top: var(--verti);
	padding-bottom: var(--verti);
	overflow: hidden;
	font-size:120%;
	line-height:120%;
}

.whiteboard .text p{
	text-align:left;
	width: calc(100% - 2* var(--horiz));
	margin: 0;
	margin-top: calc(2 * var(--verti));
	margin-bottom: calc(2 * var(--verti));
	margin-left:var(--horiz);
	margin-right:var(--horiz);
	text-indent:var(--horiz)
}

.whiteboard .text p +p{
	margin-top: 0;
	margin-bottom: var(--verti);
}

.whiteboard .text p + .selflink,
.whiteboard .text p + h1,
.whiteboard .text p + h2,
.whiteboard .text p + h3,
.whiteboard .text p + h4,
.whiteboard .text p + h5,
.whiteboard .text p + h6{
	margin-top: calc( 4* var(--verti));
}

.text a.innerlink{
	text-decoration-color:var(--green);
	cursor: help !important;
}

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

.text a{
	color:inherit;
	text-decoration-line:underline;
	text-decoration-style:double;
	text-decoration-color:var(--lightblue);
}

.whiteboard figure .image{
	max-width: calc(100% - var(--horiz) * 2);
	max-height: calc(100vh - var(--verti) );
}

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





p{
	margin-bottom:var(--h2);
	margin-top:var(--h2);
	max-width:100%;
}
ul,
ol{
	width: 100%;
	text-align:justify;
	list-style-type:none;
	margin:0;
	padding:0;
	padding-left:calc(var(--w4));	
}
li{
	list-style-type:none;
	margin-bottom:var(--h-2);
	text-indent:var(--w4);
}
li::before{
	content:"⮞";
	font-size: var(--fontheight);
	padding-right: var(--w1);
}

::selection{ 
	background:var(--smokewhite);
	color:var(--blue);
	text-decoration-color:var(--blue);
}


code{
	font-family:unset;
	letter-spacing:var(--w-8);
	background-color:var(--lightyellow);
	padding:0 var(--w2) 0 var(--w2);
}

kbd{
	border:var(--w-8) solid currentColor;
	border-bottom-width:var(--h-2);
	border-top-width:var(--h-8);
	padding:0 var(--w-2) 0 var(--w-2);
	margin-left:var(--w-4);
	margin-right:var(--w-4);
	font-weight:bold;
	line-height:calc(var(--lineheight) + var(--h2) + var(--h-2));
	font-family:unset;
	font-variant:petite-caps;
	background-color: var(--lightyellow);
	display: inline-block;
	min-width: calc(var(--w-2) + var(--h-2));
	min-height:calc(var(--w-2) + var(--h-2));
	text-align: center;
	text-indent: 0;
}

kbd[data-key=" "]{
	min-width:calc( var(--w4) + var(--h4));
	min-height:calc( var(--w1) + var(--h1));
}


.label{
	font-size:65%;
	border-left:var(--w-2) solid var(--blue);
	background-color:var(--smokewhite);
	color:var(--blue);
	padding:var(--h-8) var(--w1) var(--h-8) var(--w1);
	font-weight:bold;
	word-break:normal;
	--sat:90%;
	margin-right: var(--w-2);
}


.label.Partly{
	color:var(--lightblue);
	border-color:var(--lightblue);
}
.label.Problem{
	color:var(--smokewhite);
	border-color:var(--smokewhite);
	background-color:var(--darkblue);
}

.name {
	font-weight: bold;
	font-variant: small-caps;
}


footer{
	font-weight:700;
	padding:var(--h4) 0 var(--h4) 0;
}


body,div{
	--hue:0;
	--sat:50%;
	--lig:50%;
	--alp:0.9;
	
	--darken:1;
	--huen:0;
	
	--hue1:180;
	--hue2:160;
	--hue3:60;
	
	--sat1:var(--sat);
	--sat2:80%;
	--sat3:var(--sat);
	
	--lig1:var(--lig);
	--lig2:var(--lig);
	--lig3:55%;
	
	--l1:0.50;
	--l2:0.60;
	--l3:0.70;
	--l4:0.80;
	--l5:1.00;
	--l6:1.10;
	--l7:1.25;
	--l8:1.50;
	--l9:1.75;
	
	--hued1:calc(var(--huen) + var(--hue1));
	--hued2:calc(var(--huen) + var(--hue2));
	--hued3:calc(var(--huen) + var(--hue3));
	
	--darlig1:var(--darken) * var(--lig1);
	--darlig2:var(--darken) * var(--lig2);
	--darlig3:var(--darken) * var(--lig3);
	
	--pri1:	hsla(var(--hued1),var(--sat1),calc(var(--darlig1) * var(--l1)),var(--alp));
	--pri2: hsla(var(--hued1),var(--sat1),calc(var(--darlig1) * var(--l2)),var(--alp));
	--pri3: hsla(var(--hued1),var(--sat1),calc(var(--darlig1) * var(--l3)),var(--alp));
	--pri4:	hsla(var(--hued1),var(--sat1),calc(var(--darlig1) * var(--l4)),var(--alp));
	--pri5:	hsla(var(--hued1),var(--sat1),calc(var(--darlig1) * var(--l5)),var(--alp));
	--pri6:	hsla(var(--hued1),var(--sat1),calc(var(--darlig1) * var(--l6)),var(--alp));
	--pri7:	hsla(var(--hued1),var(--sat1),calc(var(--darlig1) * var(--l7)),var(--alp));
	--pri8:	hsla(var(--hued1),var(--sat1),calc(var(--darlig1) * var(--l8)),var(--alp));	
	--pri9:	hsla(var(--hued1),var(--sat1),calc(var(--darlig1) * var(--l9)),var(--alp));	
	
	--sec1:	hsla(var(--hued2),var(--sat2),calc(var(--darlig2) * var(--l1)),var(--alp));
	--sec2:	hsla(var(--hued2),var(--sat2),calc(var(--darlig2) * var(--l2)),var(--alp));
	--sec3: hsla(var(--hued2),var(--sat2),calc(var(--darlig2) * var(--l3)),var(--alp));
	--sec4: hsla(var(--hued2),var(--sat2),calc(var(--darlig2) * var(--l4)),var(--alp));
	--sec5:	hsla(var(--hued2),var(--sat2),calc(var(--darlig2) * var(--l5)),var(--alp));
	--sec6:	hsla(var(--hued2),var(--sat2),calc(var(--darlig2) * var(--l6)),var(--alp));
	--sec7:	hsla(var(--hued2),var(--sat2),calc(var(--darlig2) * var(--l7)),var(--alp));
	--sec8:	hsla(var(--hued2),var(--sat2),calc(var(--darlig2) * var(--l8)),var(--alp));
	--sec9:	hsla(var(--hued2),var(--sat2),calc(var(--darlig2) * var(--l9)),var(--alp));	
	
	--ter1:	hsla(var(--hued3),var(--sat3),calc(var(--darlig3) * var(--l1)),var(--alp));
	--ter2:	hsla(var(--hued3),var(--sat3),calc(var(--darlig3) * var(--l2)),var(--alp));
	--ter3: hsla(var(--hued3),var(--sat3),calc(var(--darlig3) * var(--l3)),var(--alp));
	--ter4: hsla(var(--hued3),var(--sat3),calc(var(--darlig3) * var(--l4)),var(--alp));
	--ter5:	hsla(var(--hued3),var(--sat3),calc(var(--darlig3) * var(--l5)),var(--alp));
	--ter6:	hsla(var(--hued3),var(--sat3),calc(var(--darlig3) * var(--l6)),var(--alp));
	--ter7:	hsla(var(--hued3),var(--sat3),calc(var(--darlig3) * var(--l7)),var(--alp));
	--ter8:	hsla(var(--hued3),var(--sat3),calc(var(--darlig3) * var(--l8)),var(--alp));
	--ter9:	hsla(var(--hued3),var(--sat3),calc(var(--darlig3) * var(--l9)),var(--alp));	
	
	--highlight:white;
		
	--white:var(--pri9)      	;		
	--smokewhite:var(--pri8) 	;
	--lightyellow:var(--ter8)	;
	--yellow:var(--ter7)		;
	--beije:var(--ter7)      	;
	
	--lightgreen:var(--sec8)	;
	--green:var(--sec6)			;
	
	--turquoise:var(--pri5)	 	;
	
	--lightblue:var(--pri3)	 	;
	--blue:var(--pri2)			;
	--darkblue:var(--pri1)	 	;
	
	--normalfilter:unset;

}


/* Indices and Headings */

h1,h2,h3,h4,h5,h6{
	font-variant-caps:small-caps;
	font-weight:bold;
	
  text-align: left;
	
	font-size:calc(120% * var(--scaling));
	line-height:calc(110% + 20% * var(--scaling));
	max-width:100%;
	width:100%;
	margin:0;
	margin-bottom: var(--verti);
	padding: 0;
	--w:calc( var(--scaling) * var(--w4) );
	--bo:calc(var(--w8) - var(--w)) solid var(--c);
	border-left: var(--bo);
	
	text-shadow: var(--sh) var(--sh) 0 var(--c);

	transition-duration:var(--durationOff);

	background-image:linear-gradient(45deg,
		var(--c),
		transparent 50%
		);
	
	text-decoration:unset;
}



h1{
	text-align: center;
}

/* TOC */

.toc{
	background-color:var(--smokewhite);
	text-align:left;
	margin:0;
	margin-bottom:var(--h1);
	padding:var(--h4) var(--w4) var(--h4) var(--w4);
}

.toc a.toc-link{
	justify-self:left;
	font-size:calc(var(--scaling) * var(--fontheight));
	line-height:calc(4px + var(--scaling) * var(--lineheight));
	text-decoration:underline;
	text-decoration-style: double;
	text-decoration-color: var(--c);
	text-decoration-thickness: var(--h-4);
}

.toc-item + .toc-item{
margin-top: unset;
}

.toc-link.h1,
h1{
	--scaling:2;
	--c:var(--lightyellow);
	--sh:4px;
}
a.toc-link.h2,
h2{
	--scaling:1.3;
	--c:var(--yellow);
	--sh:3px;
}
a.toc-link.h3,
h3{
	--scaling:0.95;
	--c:var(--green);
	--sh:2px;
}
a.toc-link.h4,
h4{
	--scaling:0.85;
	--c:var(--turquoise);
	--sh:1px;
}
a.toc-link.h5,
h5{
	--scaling:0.77;
	--c:var(--lightblue);
	--sh:0.5px;
}
a.toc-link.h6,
h6{
	--scaling:0.77;
	--c:var(--blue);
	--sh:0.25px;
}

details{
	cursor: pointer;
}

summary{
list-style: none;
	
}

.toc{
	width:100%;
	padding:var(--h-2) var(--w-2) var(--h2) var(--w-2);
	display: flex;
}

.toc .toc-link{
	display: flex;
	margin-left:calc( var(--w4) * 1/var(--scaling));
	text-shadow: var(--sh) var(--sh) 0 var(--c);
}

.toc h1.toc-link{
	margin: 0;
	--scaling:1.5;
}

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





/* collapsible*/

details[open] summary > *::before{
	transform: rotate(-30deg) translateY(calc(-1 * var(--h-2)));
transition: var(--durationOff) transform ease;
}
details summary > *::before{
	content:"▶";
	transform: rotate(0);
	transition: var(--durationOff) transform ease;
}