@font-face{
	font-family:"Source Code Pro";
	src:url("sourcecodepro.otf");
	font-display:swap;
}
@font-face{
	font-family:"Source Code Pro";
	src:url("sourcecodepro_bold.otf");
	font-weight:bold;
	font-display:swap;
}

/* generic */

	html{
		font-family:"Arial", sans-serif;
		background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoAgMAAADxkFD+AAAACVBMVEUWFhYXFxcYGBhg/KczAAAATUlEQVQYV9XKMQGDAAAEsbAgAjXoQU1FdOmpZHsPzRxwVP3AWfUFV9UHPFX3v1Wrh9XT6mX1sZrVrGY1q1nNalazmtWsZjWrWc1qVnsBKyaE0e6a/BkAAAAASUVORK5CYII=);
		background-color:#181818;
		color:#ddd;
		scroll-behavior:smooth;
		overflow-wrap:break-word;
		}
	body{
		margin:0;
		font-size:15px;
		line-height:24px;
		}
	a{
		color:#fff;
		}
		a[href]:hover{
			color:#bf0;
			text-decoration-thickness:20%;
			}
		a.external::after{
			content:" →";
			}
		a.above::after{
			content:" ↑";
			}
		a.below::after{
			content:" ↓";
			}
		a{
			display:inline-block;
			}
	hr{
		margin:45px 0;
		border:none;
		border-top:1px solid #555;
		}
	h1{
		color:#ae0;
		font-size:40px;
		line-height:52px;
		text-align:center;
		}
	h2{
		color:#ae0;
		font-size:28px;
		line-height:38px;
		text-align:center;
		}
	h3{
		color:#fff;
		font-size:20px;
		line-height:30px;
		margin-top:30px;
		}
	h4, h5, h6{
		color:#fff;
		}
	h1 small{
		font-style:italic;
		display:block;
		}
	p, ol, ul, details{
		margin:15px 0;
		}
	li{
		margin:0;
		}
		li + li{
			margin-top:7px;
			}
		li ol, li ul{
			margin:7px 0;
			}
	blockquote{
		margin:15px 5%;
		}
	summary{
		cursor:pointer;
		}
	pre, code, kbd{
		font-family:"Source Code Pro", monospace;
		font-size:12px;
		}
		pre{
			-moz-tab-size:4;
			tab-size:4;
			white-space:pre-wrap;
			background:#222;
			padding:8px 12px;
			color:#eee;
			line-height:18px;
			margin:8px 0;
			}
		code, kbd{
			display:inline-block;
			padding:0 6px;
			color:#eee;
			}
		kbd{
			border:1px solid #555;
			}
	code{
		background:#333;
		}
		/*code .comment,  pre .comment  { color:#777; }
		code .comment a,pre .comment a{ color:#777; }
		code .macro,    pre .macro    { color:#b9a; }
		code .string,   pre .string   { color:#da7; }
		code .number,   pre .number   { color:#dc8; }
		code .const,    pre .const    { color:#d77; }
		code .key,      pre .key      { color:#8ac; }
		code .type,     pre .type     { color:#cba; }
		code .faded,    pre .faded    { color:#888; }*/
		
		code .comment,  pre .comment  { color:#777; }
		code .comment a,pre .comment a{ color:#777; }
		code .type,     pre .type     { color:#dca; }
		code .function, pre .function { color:#dca; }
		code .macro,    pre .macro    { color:#b9a; }
		code .import,   pre .import   { color:#b9a; }
		code .string,   pre .string   { color:#da7; }
		code .number,   pre .number   { color:#dc8; }
		code .const,    pre .const    { color:#d77; }
		code .key,      pre .key      { color:#8ac; }
		code .modifier, pre .modifier { color:#bbb; }
		
		/*code .modifier, pre .modifier { color:#aaa; }
		code .comment, pre .comment{ color:#494; }
		code .comment a, pre .comment a{ color:#494; }*/
	b{
		color:#fff;
		}
	img{
		vertical-align:middle;
		max-width:100%;
		height:auto;
		}
	
	#returnlink{
		position:fixed;
		top:6px;
		left:6px;
		z-index:999;
		text-decoration:none;
		color:#000;
		font-size:14px;
		font-weight:bold;
		text-align:center;
		}
		#returnlink span{
			display:block;
			padding:3px 8px;
			background-color:#aaa;
			}
		#returnlink:hover span{
			background-color:#0ff;
			background-color:#ae0;
			}
	#pagelastupdated{
		display:block;
		font-size:11px;
		font-style:italic;
		opacity:0.5;
		text-align:right;
		padding:5px 10px 0 0;
		}
	#pagelastupdated::before{
		content:"Last updated: ";
		}

/* common */

	.spoiler{
		background-color:#000;
		color:#000;
		}
	.spoiler:hover{
		color:#fff;
		}

	a.playbutton,
	a.downloadbutton{
		font-size:14px;
		padding:3px 10px;
		display:inline-block;
		border-radius:0.25em;
		text-decoration:none;
		font-weight:bold;
		}
		a.playbutton,
		a.downloadbutton{
			color:#000;
			background-color:#ae0;
			}
		a.downloadbutton::before{
			content:"";
			position:relative;
			display:inline-block;
			vertical-align:middle;
			width:16px;
			height:16px;
			margin:0 5px 0 -2px;
			top:-2px;
			background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M2,26v6H30V26ZM28,12H19V0H13V12H4L16,24Z"/></svg>');
			}
		a.playbutton:hover,
		a.downloadbutton:hover{
			color:#000;
			background-color:#fff;
			}
		.downloaddetails{
			font-family:"Source Code Pro", monospace;
			color:#999;
			font-size:13px;
			}
	.gallery{
		display:flex;
		flex-wrap:wrap;
		gap:30px;
		justify-content:center;
		text-align:center;
		}
		.gallery img,
		.gallery video{
			max-width:100%;
			display:block;
			margin:0 auto;
			}
		.gallery .item{
			display:inline-block;
			color:#aaa;
			min-width:150px;
			width:100%;
			}
			.gallery .item > a:hover{
				outline:2px solid #bf0;
				outline-offset:1px;
				}
			/* -2px is because the items wrap automatically, due to floating point inaccuracy or whatever they may wrap at random. Reducing the width slightly fixes that. */
			.gallery .item.split2{
				width:calc((100% - 2px - 30px) / 2);
				}
			.gallery .item.split3{
				width:calc((100% - 2px - 30px * 2) / 3);
				}
			.gallery .item.split4{
				width:calc((100% - 2px - 30px * 3) / 4);
				}
		.gallery .desc{
			display:block;
			font-size:12px;
			line-height:19px;
			font-style:italic;
			margin:2px auto 0;
			width:80%;
			}
			.gallery .split2 .desc,
			.gallery .split3 .desc,
			.gallery .split4 .desc{
				width:100%;
				}
			.gallery .desc a{
				color:inherit;
				}
			.gallery .desc a:hover{
				color:#bf0;
				}
	.anchor{
		top:-150px;
		position:relative;
		}
	.box{
		border:1px solid #fff3;
		padding:18px 20px;
		margin:8px 0;
		}
		.box > *:first-child{
			margin-top:0;
			}
		.box > *:last-child{
			margin-bottom:0;
			}
	.togglebox{
		margin:8px 0;
		}
		.togglebox > summary{
			border:1px solid #fff3;
			padding:8px 18px;
			}
		.togglebox > summary:hover{
			border-color:#fff6;
			color:#fff;
			}
		.togglebox[open] > summary{
			border-color:#ae0;
			color:#ae0;
			}
	p.center{
		text-align:center;
		}
	p.smallp{
		font-size:13px;
		opacity:0.75;
		margin-left:5%;
		transition:color 0.2s;
		}
	p.smallp:hover{
		opacity:1;
		}
	.dchangelog{
		}
		.dchangelog iframe{
			background:#eee;
			width:100%;
			height:500px;
			border:none;
			}

/* navig */

	.localnavig{
		position:sticky;
		top:0;
		text-align:center;
		background-color:#000;
		background-color:#333;
		padding:8px 75px;
		font-size:14px;
		z-index:2;
		border-bottom:1px solid #000;
		}
		.localnavig a{
			text-decoration:none;
			padding:2px 10px;
			display:inline-block;
			}
		.localnavig a.current{
			color:#ae0;
			}
		.localnavig .subpages{
			border-bottom:1px solid #555;
			padding-bottom:7px;
			}
			.localnavig .parted{
				display:inline-block;
				padding:0 7px;
				}
			.localnavig .parted *{
				display:inline-block!important;
				}
			.localnavig .parted a{
				padding:2px 4px;
				}
			.localnavig .partedtitle{
				margin-right:4px;
				}
			.localnavig .disabled{
				text-decoration:line-through;
				opacity:0.5;
				}
		.localnavig .subpages + .pagelinks{
			margin-top:10px;
			}

/* C pages */

	.stackednav{
		position:sticky;
		top:0;
		text-align:center;
		background-color:#333;
		padding:11px 75px;
		z-index:2;
		border-bottom:1px solid #000;
		}
		.stackednav a{
			text-decoration:none;
			padding:2px 4px;
			display:inline-block;
			}
		.stackednav a.current{
			color:#ae0;
			}
		.stackednav .part{
			display:inline-block;
			padding:0 7px;
			}
		.stackednav .title{
			font-size:14px;
			}
		.stackednav .content{
			}
		.stackednav .locallinks{
			border-top:1px solid #555;
			margin-top:7px;
			padding-top:6px;
			}
		.stackednav .locallinks a{
			padding:2px 11px;
			}
	.hohint{
		outline:2px solid rgba(255,0,0,0.333);
		position:relative;
		display:inline-block;
		}
		.hohint:hover,
		.hohint:focus{
			outline:2px solid rgba(255,0,0,1);
			}
		.hohint:hover::after,
		.hohint:focus::after{
			content:attr(data-hint);
			pointer-events:none;
			display:block;
			position:absolute;
			top:100%;
			left:50%;
			transform:translateX(-30%);
			width:18em;
			max-width:80vw;
			line-height:1.4em;
			padding:0.4em 1em 0.6em;
			z-index:2;
			background:#000;
			border:2px solid rgba(255,0,0,0.5);
			font-size:0.75rem;
			font-weight:bold;
			font-family:"Arial", sans-serif;
			color:#fff;
			}

/* page */

	header{
		padding:30px 5% 0;
		}
	main{
		max-width:800px;
		margin:0 auto;
		padding:30px 8%;
		}