html{
	scroll-padding-top: 100px;
	-scroll-behavior: auto; 
	overflow-anchor: none;
}

body{
	font-family: monospace;
	background-color: #000;
	color: white;
	margin: 0px auto;
	max-width: min(1000px, 92vw);
	position: relative;
	display: block;
	
}

details{
	font-size: 14px;
	background-color: #222;
	-padding-left: 24px;
	padding-left: 18px;
	-box-sizing: border-box;
	overflow:visible;
	
}
.d0{
	--bg-color: #222;
}
.d0 > summary{
	padding-top: 10px;
	padding-bottom: 10px !important;
	background-color: #222;
}
.d0:nth-of-type(odd){
	--bg-color: #000;
	background-color: #000;
}
.d0:nth-of-type(odd) > summary{
	background-color: #000;
}
/* expand icon */

details[open]{
	-border-left: 1px solid #fff;
	border-left: 15px solid rgba(80, 80, 100, 0.3);
	padding-left: 3px;
	-padding-left: 18px; /* tab offset */
	margin-bottom: 5px; /* make box a little bigger */
	margin-left: -2px;
}
summary{
	cursor: pointer;
	-margin-left: -15px; /* fontsize + 1px */
	display: list-item;
	list-style: none;
	list-style-type: disclosure-closed;
	margin-left: 2px;
	text-indent: -4px;
}
summary:hover{ 
	text-decoration: underline;
	
}
details[open] > summary{
	-list-style: none;
	-margin-left: -19px;
	-position: relative;
	list-style-type: disclosure-open;
	-background-color: #223666;
	-color: #fff;
	
	margin-left: 4px;
	text-indent: -4px;
}
/*details[open] > summary::after{
	content:"";
	display:inline-block;
	overflow:hidden;
	position:absolute;
    width: 1px;
    height: 60%;
	margin-right: 8px;
	left: 0px;
	top: 60%;
	background-color: #fff;
}

details[open] > summary::before{
	content:"";
	display:inline-block;
    width: 0px;
    height: 0px;
	margin-right: 3.8px;
	margin-left: 0px;
    border-top: 10px solid white;
    border-right: 10px solid transparent;
    border-bottom: 0px solid white;
}*/

.d0{
	-background-color: #222;
	-margin-left:10px;
}
.d0 > summary{
	color: #6eff6e;
	color: #fcc868;
	font-weight: bold;
}
.d1{
	background: none;
	color: #94cdff;
}
.d1 > summary{
	color: #fff;
	background-color: var(--bg-color);
}

.d2{
	background: none;
	color: #d4ebff;
}
.d2 > summary{
	color: #fff;
	background-color: var(--bg-color);
}


@keyframes flashup{
	0%{
		-background-color: #006073;
		-background-color: #013c47;
		background-color: #012b33;
	}
	100%{
		background-color: var(--bg-color);
	}
}


.selected{
	outline: 1px solid aqua;
	outline-offset: 3px;
	-z-index: 1000;
	animation-name:flashup;
	animation-duration:1s;
}

dmark{
	color: #9ef781;
	font-weight: bold;
}
a{
	color: #bababa;
}
a:hover{
	color: #9ef781;
}
.anchor{
	color: #bababa;
	background: none;
	font-weight: bold;
	border: none;
	cursor: pointer;
	padding: 0px;
	margin: 0px;
	outline: none;
	font-family: monospace;
	
}
.cold{
	color: #fff;
	font-weight: normal;
	
}
.anchor:hover{
	color: #9ef781;
	text-decoration: underline;
}

cli{
	display: list-item;
	list-style-type: "- ";
	margin-left: 1.2em;
	
}

h2,h1{
	-margin-left: -10px;
	-margin-left: 0px;
	text-align:center;
	padding-right: 30vw;
	
}

table{
	margin-top: 5px;
	margin-bottom: 5px;
	background-color: #aaa;
	border-spacing: 1px;
	font-size: 14px;
	
}

th{
	color: #9ef781;
	font-weight: bold;
}

th,td{
	padding: 5px;
	
	background-color: var(--bg-color);
}
tr{
	--bg-color: #000;
}
tr:nth-child(even){
	--bg-color: #222;
}

.ll{
	-max-width: min(100%, calc(100% - 1.7em));
	-max-height:300px;
	
	
	-width: 100%; 
    -height: 100%; 
	-max-height: 100%;
	-object-fit: scale-down;
	max-width: 100%;
    -object-fit: contain;
	-object-position: left top;
	-height: 300px;
	cursor: pointer;
	visibility: hidden;
	float: left;
	margin-right: 0.5em;
	-display: inline-block;
	-display: flex;
	-gap: 10px;
	margin-bottom: 0.5em;
	-border: 1px solid white;
}


.no-select {
	user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
}
.no-select2::selection {
  color: inherit;
  background-color: inherit;
}

/* avoid DOM shifts from image size */
.imgbox{
	-height: 300px;
	margin: 0.5em;
	margin-left: 1.2em;
	margin-bottom: 0em;
	position: relative;
	overflow: hidden;
	-outline: 1px solid green !important;
	-display: flex;
    -align-items: flex-start;
}



#ifvdarker{
	display: block;
	background-color: #000;
	width: 150%;
	height: 150%;
	margin: -50px;
	z-index: 9800;
	position: fixed;
	top: 0px;
	left: 0px;
	opacity: 0;
	transition: opacity 0.3s, visibility 0.3s;
	visibility: hidden;
}
#ifvdarker.active{
	visibility: visible;
	opacity: 1;
}
#ifvcloser{
	display: inline-block;
	z-index: 10000;
	position: fixed;
	color: #ddd;
	font-size: 30px;
	font-style: normal;
	background-color: #000;
	-border-radius: 0px 0px 0px 10px;
	right: 0px;
	top: 0px;
	text-align: center;
	width: 30px;
	-box-sizing: border-box;
	opacity: 0;
	transition: opacity 0.3s, visibility 0.3s;
	visibility: hidden;
	cursor: pointer;
}
#ifvcloser.active{
	visibility: visible;
	opacity: 1;
}
#ifv{
	/*padding: 0px !important;
	border: none !important;
	border-radius: 0px !important;
	position:fixed !important;
	left: 0px !important;
	right: 0px !important;
	top: 0px !important;
	bottom: 0px !important;
	margin: auto !important;
	z-index: 9900 !important;*/
	position:fixed;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
	margin: auto;
	z-index: 9900;
	opacity: 0;
	transition: opacity 0.3s;
	visibility: hidden;
	width: 100%; 
    height: 100%; 
	box-sizing: border-box;
	padding: 15px;
	max-height: 100%;
	max-width: 100%;
    object-fit: contain;
	
}
#ifv.active{
	visibility: visible;
	opacity: 1;
}

#expand-toggle{
	position: fixed;
	bottom: 0px;
	right: 0px;
	padding: 10px;
	right: 0px;
	z-index: 5000;
	cursor: pointer;
}

#search-tip{
	font-size:14px;
	margin-top:2px
}
/*#navibar{
	position:fixed;
	left:0px;
	top:0px;
	background-color:#000;
	margin:0px;
	padding:10px;
}*/
code{
	background-color: #333;
	color: #fff;
	-border: 0.1px solid #666;
}

@media only screen and (max-width: 600px) {
	h2,h1{
		margin-left: 0px;
		text-align: center;
		padding-right: 0px;
	}
	body{
		margin: 10px;
		max-width: 100vw;
	}
	cli{
		margin-bottom: 0.5em;
	}
	summary{
		padding-bottom: 0.5em;
		margin-left: -3px;
		text-indent: 0px;
		
	}
	summary:hover{
		text-decoration: none;
	}
	details{
		overflow: auto;
	}
	details[open]{
		margin-left: -3px;
		border-left: none;
		padding-left: 18px;
	}
	details[open] > summary{
		margin-left: 0px;
		text-indent: 0px;
	}
	.ll{
		cursor: initial;
		max-height: 45vw;
		max-width: 100%;
		-height: auto;
		width: auto;
		-margin-bottom: 10px;
		object-fit: contain;
	}
	#ifv{
		padding: 0px;
		
	}
	.imgbox{
		-height: 180px;
		-height: 45vw;
		margin-bottom: 1em; /* easely may press the img instead of summary otherwise */
		
	}
	.tileimg{
		max-width: calc(50% - 0.5em);
		box-sizing: border-box;
	}
	.anchor{
		text-decoration: underline;
	}
	.cold{
		padding-bottom: 1.5em;
	}
	
}