:root {
	/*--back: #202831;*/
	--back: #979dae;
	--boxback: #979dae;
	/*--fore: #d3d4d5;*/
	--fore: #000;
	--boxfore: #000000;
    --button-highlight: #979dae;
    --border-light: #b2b2b2;
    --button-shadow: #808080;
    --border-dark: #4c4c4c;
    --dialog-blue: #000080;
    --dialog-blue-light: #1084d0;
    --link-blue: #1e1a8b;
	--border-field: inset -1px -1px var(--button-highlight), inset 1px 1px var(--button-highlight), inset -2px -2px var(--border-light), inset 2px 2px var(--border-dark);
}

@media (prefers-color-scheme: dark) {
	#project-main {
  		background-image: url(https:/img/textures/cyber01.gif) !important;
}

:root {
	/* --back: #979dae; */
	/* --boxback: #979dae; */
	/* --fore: #000; */
	/* --boxfore: #000000; */
	--fore: #979dae;
	--boxfore: #979dae;
	--back: #121212;
	--boxback: #121212;
	--link-blue: #50b5b5;
	--border-field: inset 0 1px 5px 1px #080808, 0px 1px #979dae26;
	}


main {
  background: #121212f0 !important;
  border: none !important;
	}
footer, .week_feat {
  background: #121212f0 !important;
  box-shadow: none !important;
	}

img {
	filter: brightness(75%) contrast(1.2) !important;
}
pre {
  background: #121212 !important;
	}

nav ul.tree-view {
  background: #121212f0 !important;
  border-style: none !important;
	}

.tree-view li a {
	color: var(--fore) !important;
	}

.tree-view li a:hover {
	color: black !important;
	}

.container > div > a, .container > div  img, p > img {
	border-style: none !important;
}

code {
	border: 1px solid var(--border-dark) !important;
}
}



@media screen and (max-width: 992px) {
	#project-main {
		overflow: none !important;
		width: 1000px !important;
	}
	main p, ul {
		width: 80% !important;
	}
}

@font-face { 
	font-family: 'Spleen12'; 
	src: url('fonts/spleen-6x12.otf');
}
@font-face{
	font-family: 'Spleen16'; 
	src: url('fonts/spleen-8x16.otf');
}
@font-face{
	font-family: 'Spleen24';
	src: url( 'fonts/spleen-12x24.otf');
}
@font-face{
	font-family: 'Spleen32'; 
	src: url('fonts/spleen-16x32.otf');
}
@font-face{
	font-family: 'Spleen64'; 
	src: url('fonts/spleen-36x64.otf');
}

@font-face{
	font-family: 'Terminus';
	src: url('fonts/TerminusTTF-4.47.0.ttf');
}
	

/* outlines */
#project-main {
	background: var(--back);
	background-image: url(https://displ.nl/img/textures/cloth08.gif);
	background-attachment: fixed;
}
body {
	font-family: 'Spleen16','mono';
	font-size: 1rem;
	display: grid;
	grid-template-areas: "mn . nv" "mn . as" "mn . ft";
	grid-template-columns: 4fr 0fr 0fr;
	grid-template-rows: auto 1fr auto; 
	grid-gap: 5px;
	margin: 2% 5% 10% 5%;
}

main {
	color: var(--fore);
	padding: 25px 50px 50px 50px;
	border-width: 2px;
	border-style: groove;
	background: #979dae90;
	grid-area: mn;
    /* background-image: url(img/textures/cloth08.gif);*/
}
main p, ul {
	width: 95%;
	line-height: 1.5rem;
	text-align: justify !important;
}
hr {
	border: 2px dotted grey;
}
#tag_page {
	padding: 0px 40px;
	width: 100%;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15em,1fr));
}
a {
	color: var(--link-blue);
}
a:focus {
  outline: 1px dotted var(--link-blue);
}
a:hover, .tree-view li a:hover {
	color: var(--back);
	background: var(--link-blue);
}

/* index gimmicks */
#power {
	float: right;
	width: 50%;
	padding: 0px 10px
}
#power img {
	width: 100%	
}

/* only as title  */
h1 {
	font-family: 'Spleen12','mono';
	font-size: 3rem;
	margin: 0px 0px 10px 0px;
}
/* sub-heading */
h3 {
	font-family: 'Spleen12','mono';
	font-size: 2rem;
}

/* sub-heading in ul,p */
.subhead {
	color: var(--link-blue) !important;
	letter-spacing: 2px;
}

/* navigation on left */
nav {
	top: 0;
	left: 0;
	grid-area: nv;
}
nav ul.tree-view {
	width: 150px;
	padding: 15px 6px 100px 6px;
	background: var(--boxback);
	background-image: url(img/textures/cloth08.gif);
	font-family: 'Spleen16';
	font-size: 1rem;
	box-shadow: var(--border-field);
	margin: 0;
}

nav .subhead { padding: 10px 0px 0px 15px; }
/* aside */

aside {
	grid-area: as;
}

.week_feat {
	color: var(--fore);
	padding: 10px;
	text-align: center;
	box-shadow: var(--border-field);
}	



/* footer */
footer {
	color: var(--fore);
	grid-area: ft;
	/*
	margin-top: -5px;
	text-align: center;
	margin-bottom: calc(-100%);
	transform: translateY(-100%);
	*/
	box-shadow: var(--border-field);
	padding: 10px;
	visibility: hidden;
}

/* weird square at last element */
nav ul.tree-view ul { 
	border-left: 1px dotted var(--link-blue); }

ul.tree-view li {
    list-style-type: none;
    /*! background: wheat; */
}

nav ul.tree-view ul li:last-child::after { 
	background: var(--boxback);
  content: "";
  display: block;
  position: absolute;
  left: -20px;
  top: 10px;
  bottom: 0px;
  width: 4px;
}
nav ul.tree-view ul li::before {
	border-bottom: 1px dotted var(--link-blue);
  content: "";
  display: block;
  position: absolute;
  left: -16px;
  top: 10px;
  width: 12px;
}


/* bottom nav */
#navbot {
	padding-top: 50px;
}
#nav_prev {
	position: absolute;
}
#nav_next {
	float: right;
}

/* projection */
#nav_next > a, #nav_prev > a, #tag_list > a {
	padding: 2px 10px 0px 10px;
	text-decoration: none;
	border-width: 3px !important;
}

/* images in p */
p > img {
	padding: 5px;
	box-shadow: var(--border-field);
	max-width: 75%;
}
/* movies grid layout */
.container {
  	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px,1fr));
	grid-gap: 15px;
}	
.container > div > a {
	box-shadow: var(--border-field);
	padding : 5px; 
	display: flex;
	}
.container > div img {
	padding: 1px;
	height: 230px !important;
	width: 200px;
}

/* inline code */
code {
	font-family: Spleen16;
	padding: 2px 10px;
}

/* block code  */
pre {
	background: var(--back);
	box-shadow: var(--border-field);
	overflow: auto;
	width: 85%;
	padding: 12px 15px;
	scrollbar-width: thin;
	scrollbar-color: var(--back) var(--fore);
}
pre > code {
	border-style: none !important;
	padding: 0px;
}

/* jdan.github.io/98.css MIT lic purged soon */
ul.tree-view {
  /*! display: block; */
  background: var(--button-highlight);
  box-shadow: var(--border-field);
  padding: 6px;
  margin: 0;
}

ul.tree-view li {
  list-style-type: none;
}

ul.tree-view a {
  text-decoration: none;
  color: #000;
}

ul.tree-view a:focus {
  background-color: var(--dialog-blue);
  color: var(--button-highlight);
}

ul.tree-view ul,
ul.tree-view li {
  margin-top: 3px;
}

ul.tree-view ul {
  margin-left: 16px;
  padding-left: 16px;
  /* Goes down too far */
  border-left: 1px dotted #808080;
}

ul.tree-view ul > li {
  position: relative;
}
ul.tree-view ul > li::before {
  content: "";
  display: block;
  position: absolute;
  left: -16px;
  top: 10px;
  width: 12px;
  border-bottom: 1px dotted #808080;
}

/* Cover the bottom of the left dotted border */
ul.tree-view ul > li:last-child::after {
  content: "";
  display: block;
  position: absolute;
  left: -20px;
  top: 10px;
  bottom: 0px;
  width: 4px;
  background: var(--button-highlight);
}

ul.tree-view details {
  margin-top: 0;
}

ul.tree-view details[open] summary {
  margin-bottom: 0;
}

ul.tree-view ul details > summary:before {
  margin-left: -22px;
  position: relative;
  z-index: 1;
}

ul.tree-view details > summary:before {
  text-align: center;
  display: block;
  float: left;
  content: "+";
  border: 1px solid #808080;
  width: 8px;
  height: 9px;
  line-height: 8px;
  margin-right: 5px;
  padding-left: 1px;
  background-color: #fff;
}

ul.tree-view details[open] > summary:before {
  content: "-";
}

/* border inset 
main {
	border: 1px solid var(--border-dark); 
	border-right-color: var(--border-light);
	border-bottom-color: var(--border-light);
}
*/

/* border outset */
code, nav ul.tree-view, #nav_next > a, #nav_prev > a, #tag_list > a, p > img, .container > div > a, .container > div img {
	border: 1px solid var(--border-dark);
	border-left-color: var(--border-light);
	border-top-color: var(--border-light);
}