@font-face {
    font-family: hkgrotesk;
    src: url("linkedlists/fonts/hkgrotesk-bold.woff") format("woff");
    font-weight: bold;
}

@font-face {
    font-family: hkgrotesk;
    src: url("linkedlists/fonts/hkgrotesk-regular.woff") format("woff");
    font-weight: normal;
}

@font-face {
    font-family: hkgrotesk;
    src: url("linkedlists/fonts/hkgrotesk-light.woff") format("woff");
    font-weight: 100;
}

* {
  transition-duration: .5s;
  transition-property: background-color;	
}

/* default colors */
:root {
  --light_background: hsl(0,0%,98%);
  --light_text: hsl(0,0%,0%);
	--light_border: hsl(0,0%,75%);
	--light_border_hover: hsl(0,0%,50%);
	--light_link: hsl(209,100%,45%);
	--light_filter: hsl(330,100%,40%);
	--dark_background: hsl(0,0%,8%);
	--dark_text: hsl(0,0%,75%);
	--dark_border: hsl(0,0%,25%);
	--dark_border_hover: hsl(0,0%,50%);
	--dark_link: hsl(209,100%,40%);
	--dark_filter: hsl(330,100%,40%);
	--sun:url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg xmlns:xl='http://www.w3.org/1999/xlink' xmlns='http://www.w3.org/2000/svg' xmlns:dc='http://purl.org/dc/elements/1.1/' version='1.1' viewBox='0 0 100 100' width='100' height='100'%3E%3Cdefs/%3E%3Cg id='sun' stroke='none' stroke-opacity='1' stroke-dasharray='none' fill-opacity='1' fill='none'%3E%3Ctitle%3Esun%3C/title%3E%3Cg id='sun: Layer 1'%3E%3Ctitle%3ELayer 1%3C/title%3E%3Cg id='Graphic_6'%3E%3Ccircle cx='49.6063' cy='49.6063' r='15.5905760024116' fill='white'/%3E%3C/g%3E%3Cg id='Line_7'%3E%3Cline x1='49.6063' y1='8.838385' x2='49.6063' y2='28.680905' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/g%3E%3Cg id='Line_8'%3E%3Cline x1='49.6063' y1='70.7445' x2='49.6063' y2='90.58702' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/g%3E%3Cg id='Line_12'%3E%3Cline x1='90.54144' y1='49.6063' x2='70.69892' y2='49.6063' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/g%3E%3Cg id='Line_11'%3E%3Cline x1='28.504923' y1='49.6063' x2='8.662403' y2='49.6063' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/g%3E%3Cg id='Line_16'%3E%3Cline x1='78.635545' y1='20.577053' x2='64.604765' y2='34.607833' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/g%3E%3Cg id='Line_15'%3E%3Cline x1='34.634665' y1='64.57793' x2='20.603885' y2='78.60871' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/g%3E%3Cg id='Line_20'%3E%3Cline x1='20.586964' y1='20.46408' x2='34.617744' y2='34.49486' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/g%3E%3Cg id='Line_19'%3E%3Cline x1='64.58784' y1='64.46496' x2='78.61862' y2='78.49574' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
	--moon: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg xmlns:xl='http://www.w3.org/1999/xlink' xmlns='http://www.w3.org/2000/svg' xmlns:dc='http://purl.org/dc/elements/1.1/' version='1.1' viewBox='0 0 100 100' width='100' height='100'%3E%3Cdefs/%3E%3Cg id='moon' stroke='none' stroke-opacity='1' stroke-dasharray='none' fill-opacity='1' fill='none'%3E%3Ctitle%3Emoon%3C/title%3E%3Cg id='moon: Layer 1'%3E%3Ctitle%3ELayer 1%3C/title%3E%3Cg id='Graphic_4'%3E%3Cpath d='M 14.173229 67.11095 C 15.648538 69.51313 17.426565 71.781945 19.50731 73.86268 C 33.80932 88.16476 56.99744 88.16476 71.299445 73.86268 C 85.60153 59.56067 85.60153 36.372554 71.299445 22.070546 C 67.82103 18.59211 63.81698 15.95967 59.542976 14.173228 C 68.20826 28.282496 66.43023 46.992363 54.208894 59.213636 C 43.385304 70.03728 27.472387 72.66972 14.173228 67.11095 Z' fill='black'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");

}


/* light and default */
body { color: var(--light_text); background-color: var(--light_background);} 
h2 { color: var(--light_text); }
a:link, a:visited { color: var(--light_link); }
#l .active span, #r .active span , #m .active { color: var(--light_filter); }
#m li { color: var(--light_text);}
#m h2 a { color: var(--light_text);}
::selection {   background-color: var(--light_link); }	
#m li img:not(.dark) { opacity: 1; }	
div#switch { background-image: var(--moon); }
#m li img {border-color: var(--light_border);}
#m li:hover img {border-color: var(--light_border_hover);}

body.toggle { color: var(--dark_text); background-color: var(--dark_background); }
body.toggle h2 { color: var(--dark_text); }
body.toggle a:link, body.toggle a:visited { color: var(--dark_link); }
body.toggle #l .active span, body.toggle #r .active span, body.toggle #m .active { color: var(--dark_filter); }
body.toggle #m li { color: var(--dark_text); }
body.toggle #m h2 a { color: var(--dark_text);}
body.toggle ::selection { background-color: var(--dark_link); }		
body.toggle #m li img:not(.dark) { opacity: .66; transition: opacity .5s; }
body.toggle #m li:hover img:not(.dark) { opacity: 1; }
body.toggle div#switch { background-image: var(--sun) }						
body.toggle #m li img {border-color: var(--dark_border);}
body.toggle #m li:hover img {border-color: var(--dark_border_hover);}


/* dark mode */
@media (prefers-color-scheme: dark) {
	body { color: var(--dark_text); background-color: var(--dark_background);} 
	h2 { color: var(--dark_text); }
	a:link, a:visited { color: var(--dark_link); }
	#l .active span, #r .active span , #m .active { color: var(--dark_filter); }
	#m li { color: var(--dark_text); }
	#m h2 a { color: var(--dark_text);}
	::selection { background-color: var(--dark_link); }
	#m li img:not(.dark) { opacity: .66; transition: opacity .5s; }
	#m li:hover img:not(.dark) { opacity: 1; }	
	div#switch { background-image: var(--sun); }	
	#m li img {border-color: var(--dark_border);}	
	#m li:hover img {border-color: var(--dark_border_hover);}
		
	body.toggle { color: var(--light_text); background-color: var(--light_background); }
	body.toggle h2 { color: var(--light_text); }
	body.toggle a:link, body.toggle a:visited { color: var(--light_link); }
	body.toggle #l .active span, body.toggle #r .active span , body.toggle #m .active { color: var(--light_filter); }
	body.toggle #m li { color: var(--light_text); }
	body.toggle #m h2 a { color: var(--light_text);}
	body.toggle ::selection { background-color: var(--light_link); }		
	body.toggle #m li img:not(.dark) { opacity: 1; }	
	body.toggle div#switch { background-image: var(--moon); }	
	body.toggle #m li img {border-color: var(--light_border); }	
	body.toggle #m li:hover img {border-color: var(--light_border_hover);}	
}


canvas, #l, #m, #r {
	opacity: 1; 
  transition-duration: .2s;
  transition-property: opacity;	
}


body {
	-webkit-text-size-adjust: none;
	margin: 0; padding: 0;
	font-family: hkgrotesk, sans-serif;
/*	font-size: 1.25vw;*/
	font-size: 10px;
	font-weight: 100;
	line-height: 1.3em;
	margin: auto;
	overflow-y: scroll;
	min-height: 100vh;	
}

::selection {
	color: white;
}

h1 {
	font-size: 2em;	
	font-weight: 100;
	line-height: 1.4em;
	margin-top: .7em;
	margin-bottom: .6em;
	margin-left: -.075em;
	white-space: nowrap;
}

h1:hover {
	font-weight: 100;
	text-decoration: underline;
	cursor: pointer;
}

h1.passive:hover {
	text-decoration: none;
	cursor: default;
}

h2 {
	font-size: 1em;
	font-weight: bold;
	margin-top: 1em;
	margin-bottom: 1.5em;
	transform: translate3d(0,0,0); 
	text-transform: uppercase;
	letter-spacing: .05em;
}


div { 	margin: auto; }

a:link, a:visited { text-decoration: none; }
a:hover { text-decoration: underline;}

#l .active span, #r .active span { font-weight: bold; } 

#l li.active:hover, #r li.active:hover {text-decoration: none !important; }

ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
}

li { 	margin: 0; padding: 0; }

#l ul, #r ul { 	user-select: none; width: 80%; }

#l, #r { 
	position: fixed; 
	top: 1.5em;
	max-height: 100%;
	bottom: 2vw;
}

#l li span:hover, #r li span:hover { text-decoration: underline;}
#l p img {height: 1em; }
#l li span, #r li span { cursor: pointer; }

#l li, #r li {
  transition-duration: .4s, .4s, .4s;
  transition-property: font-size, opacity, line-height;
}


/* layout */

#l, #m, #r {
	background-color: xred;
}

h1 {width: 22.5vw; white-space: normal;}
#l {width: 20vw; margin: 0 3vw;}
#m {width: 45vw; margin-top: 1.5em; padding-left: 4vw; }
#r {width: 20vw; padding-top: 4.325em; right: 3vw; }

/*  search  */

#m h2 { float: left; } 

#ll_search {
	padding: 0;
	margin: 2em 0 2.5em 0;
	border: 0px;
	width: 15vw;
	display: block;
	border: 1px solid #999;
}



/* areas */

#l { 	transform: translate3d(0,0,0); }
#l h2 { margin-top: 1.5em; margin-bottom: 0.75em;}
#l li {padding: 0; margin: .2em 0; line-height: 1.2em; font-weight: 100; }
#l p {transform: translate3d(0,0,0); }

/* types */
#m img { width: 44.4vw; height: 11.1vw; margin-bottom: 0em; }

#m li img {
	border-width: .08em;
	border-style: solid;
}

#m li { margin-bottom: 1.5em; clear: both; 	overflow: hidden;  }

#m ul { padding-bottom: 2em; padding-top: 0.1em; }
#m h2 a.passive:hover { text-decoration: none; cursor: default;}

#m.init li { transition-duration: 0s; }
#m li {
	max-height: 30vw;
  transition-duration: .3s, .3s, .3s;
  transition-property: opacity, max-height, margin-bottom;
}

#m li.hidden {
	opacity: 0; max-height: 0; margin-bottom: 0;
}

#l p a, #m li a { font-weight: normal; }

#m li { cursor: default;}
#m li span { cursor: help;}
#m li em { font-style: normal; cursor: pointer; }
#m li em:hover {text-decoration: underline;}

/* authors */
#r ul { margin-top: .5em; float: right;}
#r li { padding: 0; margin: .2em 0; line-height: 1.2em; font-weight: 100; }
#r h2 { margin-bottom: 1.1em; text-align: right; direction: rtl; hyphens: manual; }

#r { text-align: right; }

#canvas {
	top: 0; left: 0;
	width: 100vw;
	height: 100vh;
	position: fixed;
	transition: opacity .3s ease-in;
}

#canvas {	z-index: -1; }

#l, #m, #r {	z-index: 1; }


#switch {
	position: fixed;
	top: .75em;
	right: .75em;
	width: 1.75em;
	height: 1.75em;
	background-image: var(--moon);
  background-size: cover;
	opacity: .33;
	cursor: pointer;
}

#email em {
	white-space: nowrap;
	word-spacing: -.3em;
	font-style: normal;
}

#imprint {
	font-size: .75em;
	line-height: 1.25em;
}