html {
	background-color: black;
}
body {
	background-color: black;
	color: white;
	font-family: Arial, Helvetica, sans-serif;
	font-size:22px;
	word-wrap: break-word;
}
.content {
	margin: 1em 1em 1em 1em;
    /* margin-top: 20px; */
    overflow-wrap: break-word;
    /* padding-top: 1em; */
}

@font-face {
	font-family: 'VT323';
	src: url('https://r74n.com/cook/fonts/VT323-Regular.ttf') format('truetype');
}

*:focus {
  outline: none;
}
*:focus-visible {
  outline: 2px dashed #00ffff!important;
}

a {
	color: rgb(255, 90, 255);
	text-decoration: none;
	cursor: pointer;
}
a:active, a:hover:active {color: rgb(255, 179, 255);}
a:hover {color: rgb(255, 130, 255);}
a[style]:active, a[style]:hover:active, a:active span[style], a:hover:active span[style], a.qr:active, a.qr:hover:active {
	color: unset;
	filter: brightness(2.8);
}
a[style]:hover, a:hover span[style], a.qr:hover {
	color: unset;
	filter: brightness(1.8);
}
a.newLink::before {color: red; content: "(NEW) "}
a.newLink:hover::before { filter:brightness(200%);}
a.newLink:active::before { filter:brightness(300%);}

::selection {background:#00ffff; color:#000000;}
::-moz-selection {background:#00ffff; color:#000000;}

.pagetitle, header .back, .R74nicon {
	display: inline-block;
	margin: 0px;
	vertical-align: middle;
}
.pagetitle, .R74nicon, header .back, header img {font-size:32pt; }

.pagetitle {margin-left: 0.5em;}
.R74nicon, header a.home {width:1.4em;transition: filter 3s, outline 0s;}
.iconimg {height:50px;width:50px;}

b {font-weight:bold;}
i {font-style:italic;}

img, audio, video {vertical-align:middle;max-width:100%}

.vertical {font-family:'Mongolian Baiti','Noto Sans Mongolian',sans-serif;font-size:140%;-webkit-writing-mode:vertical-lr;-moz-writing-mode:vertical-lr;writing-mode:vertical-lr;writing-mode:vertical-ideographic;}


.R74nicon:hover {
	filter:hue-rotate(3600deg);
	transition: filter 30s;
}

textarea, button, input, .checkmark {
	vertical-align: middle;
	color-scheme: dark;
}
/* input[type=submit] {background-color: rgb(72, 85, 74)!important;} */
input[type=submit] {background-color: rgb(79, 111, 79)!important;}
input[type=reset] {background-color: rgb(111, 79, 79)!important;}
input[type=button], button, .button, input[type=submit], input[type=reset], .checkmark {
	background-color: rgb(107,107,107);
	color: rgb(255,255,255);
	/* box-shadow: 0em -0.1em 0em inset rgb(0,0,0,0.5); */
	font-size: 20px;
	padding-left: 0.4em;
	padding-right: 0.4em;
	min-width: 30px;
	max-height: 40px;
	vertical-align: middle;
	line-height: 22px;
	cursor: pointer;
	outline: 0;
	margin: 4px 0;
	line-height: 1;
	/* color transition */
	transition: filter 0.2s, scale 0.2s, translate 0.2s;
}
input[type=button][selected=true], .button[selected=true] {
	filter: brightness(150%);
}
input[disabled], textarea[disabled], button[disabled], .button[disabled], select[disabled] {filter:brightness(50%);cursor:not-allowed}
input[type=button]:hover, button:hover, .button:hover, input[type=submit]:hover, input[type=reset]:hover, .checkmark:hover, .clickable:hover {
	filter: brightness(125%);
}
input[type=button][disabled]:hover, button[disabled]:hover, .button[disabled]:hover, input[type=submit][disabled]:hover, input[type=reset][disabled]:hover {
	filter: brightness(75%);
	scale: 1!important;
}
input[type=button]:active, button:active, .button:active, input[type=submit]:active, input[type=reset]:active, .checkmark:active, .clickable:active {
	filter: brightness(50%);
	scale: 0.98
}
.clickable {
	cursor: pointer
}

textarea, input[type=text], input[type=number], input[type=date], input[type=datetime-local], input[type=month], input[type=week], input[type=email], input[type=password], input[type=search], input[type=tel], input[type=time], input[type=url] {
	background-color: rgb(107,107,107);
	color: rgb(255,255,255);
	border-radius: 15px;
	border-style: none;
	outline: 0;
	padding: 10px;
}
input[type=number] {width:100px}
textarea {
	max-width:80%;
}
select {
	background-color: rgb(107,107,107);
	color: rgb(255,255,255);
	border-radius: 15px;
	border-style: none;
	outline: 0;
	padding: 10px;
}
meter, progress {
	height: 1.5em;
	vertical-align: middle;
}
input[type="color"] {
	appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;
	background-color: rgb(107,107,107);
	border: 0;
	cursor: pointer;
	padding: 0;
	vertical-align: middle;
	height: 1.75em;
}

input[type=text], input[type=number], input[type=date], input[type=datetime-local], input[type=month], input[type=week], input[type=email], input[type=password], input[type=search], input[type=tel], input[type=time], input[type=url],
textarea {
	border-radius: 0;
	background-color:#3b3b3b;
	border: solid 3px rgba(255,255,255,0.25);
	border-right-color: rgba(255,255,255,0.4);
	border-bottom-color: rgba(255,255,255,0.4);
	cursor: text;
	padding-top: 0.4em;
	padding-bottom: 0.4em;
}
button, .button,
a.sb,
input[type=button], input[type=reset], input[type=submit],
input[type=file]::file-selector-button,
select {
	border-radius: 0;
	background-color:#3b3b3b;
	border: solid 3px rgba(255,255,255,0.4);
	border-right-color: rgba(255,255,255,0.25);
	border-bottom-color: rgba(255,255,255,0.25);
	cursor: pointer;
	padding-top: 0.4em;
	padding-bottom: 0.4em;
}
button, .button,
a.sb,
input[type=button], input[type=reset], input[type=submit],
input[type=file]::file-selector-button {
	line-height: 0;
    padding-top: 0.9em;
    padding-bottom: 0.9em;
	border-top-width: 2px;
	border-bottom-width: 4px;
}
button:active, .button:active,
input[type=button]:active, input[type=reset]:active, input[type=submit]:active,
input[type=file]:active::file-selector-button {
	border-bottom-width: 3px;
	translate: 0px 1px;
	margin-bottom: 5px;
}
textarea:focus-visible, input:focus-visible {
	border-color: rgba(0,255,255,0.5);
	border-right-color: rgba(0,255,255,0.75);
	border-bottom-color: rgba(0,255,255,0.75);
	outline: none!important;
}
select:focus-visible, button:focus-visible, .button:focus-visible,
input[type=button]:focus-visible, input[type=reset]:focus-visible, input[type=submit]:focus-visible,
input[type=file]:focus-visible::file-selector-button {
	border-color: rgba(0,255,255,0.5);
	border-left-color: rgba(0,255,255,0.75);
	border-top-color: rgba(0,255,255,0.75);
	outline: none!important;
}



ul, dl {
	list-style: none; /* Remove default bullets */
}
ul li::before, dl dt::before {
	content: "\003E\00A0";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
	color: rgb(90, 255, 90); /* Change the color */
	font-weight: bold; /* If you want it to be bold */
	display: inline-block; /* Needed to add space between the bullet and the text */
	/*width: 1em; /* Also needed for space (tweak if needed) */
	margin-left: 0.5em; /* Also needed for space (tweak if needed) */
}
li.redbullet::before, dt.redbullet::before, li.red::before, dt.red::before {color:red;}
li.cyanbullet::before, dt.cyanbullet::before {color:#00ffff;}
li.glowbullet::before, dt.glowbullet::before, .glowtext {text-shadow: 0px 0px 20px,0px 0px 20px,0px 0px 20px,0px 0px 20px,0px 0px 20px,0px 0px 20px,0px 0px 20px;}
li.graybullet::before, dt.graybullet::before {color:gray;}
li.yellowbullet::before, dt.yellowbullet::before, li.yel::before, dt.yel::before {color:yellow;}
ol {list-style: none; counter-reset: li}
ol li::before {content: counter(li) "."; color: rgb(90, 255, 90);display: inline-block; padding-right: 0.5em; margin-left: -1.25em}
ol li {counter-increment: li}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: lightgray;
  opacity: 1; /* Firefox */
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: lightgray;
}
::-ms-input-placeholder { /* Microsoft Edge */
  color: lightgray;
}



.checkbox {
	position: absolute;
	opacity: 0;
}
.checkbox + label {
	position: relative;
	cursor: pointer;
	padding: 0;
}
.checkbox + label:before {
	content: '';
	margin-right: 5px;
	margin-top: 2.5px;
	display: inline-block;
	vertical-align: text-top;
	width: 20px;
	height: 20px;
	background: rgb(107,107,107);
	border-radius: 0px;
	border-style: none;
}
.checkbox:hover + label:before {
	filter: brightness(150%)
}
.checkbox:focus + label:before {
	/* box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12); */
	filter: brightness(150%)
}
.checkbox:checked:focus + label:before {
	/* box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12); */
	filter: brightness(80%)
}
.checkbox:checked + label:before {
	background: white;
}
.checkbox:disabled + label {
	color: #b8b8b8;
	cursor: auto;
}
.checkbox:disabled + label:before {
	/* box-shadow: none; */
	background: #ddd;
}
.checkbox:checked + label:after {
	content: '';
	position: absolute;
	left: 5px;
	top: 9px;
	background: black;
	width: 2px;
	height: 2px;
	box-shadow: 2px 0 0 black, 4px 0 0 black, 4px -2px 0 black, 4px -4px 0 black, 4px -6px 0 black, 4px -8px 0 black;
	transform: rotate(45deg);
	margin-top: 2.5px;
}

hr {
	border: 1px solid rgb(53, 53, 53);
	margin-left:50px;
	margin-right:50px;
	margin-bottom:30px;
	margin-top:30px;
}

/*.lidesc {margin-left:10px;}*/
.lidesc, dd {font-style:italic;}
dd {margin-inline-end: 20px;}
.lidesc::before, dd::before {content:"↳ "}
.cw[open="false"] {cursor:pointer;background-color:rgb(39, 39, 39);padding:5px;border-radius:0;line-height:2;}
.cw[open="false"]:active {background-color:rgb(61, 61, 61);}
.cw[open="true"] {transition:0.5s;}
.desc {display:block;margin-left:10px;}
.desc::before {content:"↳ "}
/*.wordtxt {}*/
.wordsep {color:rgb(85, 85, 85);}
.wordcom {color:lightgray}
.worddef {color:lightgray;font-style:italic;}
.wordlist {white-space:pre-wrap;margin-left:10px;margin-left:40px;}
.wordline {margin-left: -20px;text-indent: 10px;}
.toc {margin:0px;}

.divblock {display:inline-block;margin:0.4rem;padding:0.4rem;vertical-align:middle;max-width:500px;}
.homedivparent {
	display: flex;
    flex-wrap: wrap;
}
.homediv {
	display:inline-block;
	vertical-align:top;
	flex-grow: 1;
}
.homefundiv, .homefundivtop {
	display:block;
	margin-bottom:1em;
	/* text-align: center; */
	border-radius: 0;
	border: solid 3px rgba(255,255,255,0.5);
	border-right-color: rgba(255,255,255,0.33);
	border-bottom-color: rgba(255,255,255,0.33);
}

body > footer {
	font-size:0.7em;
	text-align:center;
	display:block;
	margin-top: 1em;
	margin-bottom: 1.5em;
}
body > footer a::after {
	content: "\A • ";
	color: white;
}
body > footer a:last-child::after {
	content: ""
}

table {border-collapse:collapse;margin-left: 0.5em;overflow-wrap: anywhere;}
td, th {border:0.5px solid gray;padding:5px;padding-left:10px;padding-right:10px}
th {background-color:#00ffff;color:black}
tr:nth-child(odd){background-color: #272727;}
.fullTable {margin-left:0;min-width:100%;max-width:unset;overflow-wrap:unset}
.imgtext { height:1em }
img.invert { filter:invert(1) }

.linkcategory {color:yellow}
h2.linkcategory, h3.linkcategory {font-size: 1em;margin-block-start: 0;}

.alertheader {
	padding:0.25em;
	border-radius:0px;
    /* margin-block-start: 1em;
    margin-block-end: 1em; */
}
#newsheader {
	color:white;
	background-color:darkred;
	border: solid 3px rgba(255,255,255,0.5);
	border-right-color: rgba(255,255,255,0.33);
	border-bottom-color: rgba(255,255,255,0.33);
	flex-shrink: 1;
	padding-left: 0.5em;
    padding-right: 0.5em;
	flex-basis:content;
}
#newsheader a {
	color: lime;
	text-decoration: underline;
	text-underline-offset: 0.1em;
}
#newsheader a:hover {color:rgb(117, 255, 117);}
#newsheader a:active {color:yellow;}
#newsheader strong {
	font-variant: small-caps;
}
#splashheader, .projectheader {text-align: center;}
.projectheader {
	display: flex;
	justify-content: center;
    flex-wrap: wrap;
}

img, canvas {
	image-rendering: pixelated;
	image-rendering: -moz-crisp-edges;
	image-rendering: crisp-edges;
}
.pixelart, .pixelflag, .doodle {
	image-rendering: pixelated;
	image-rendering: -moz-crisp-edges;
	image-rendering: crisp-edges;
}
.doodle {
	-webkit-filter: drop-shadow(0px 0px 5px #222);
	filter: drop-shadow(0px 0px 5px #222);
}
.grayimg {background-color:gray;padding:5px;}

kbd {background-color:rgb(59, 59, 59);color:white;border-radius:5px;padding:2px;padding-left:5px;padding-right:5px;margin-left:3px;margin-right:3px;line-height:1.5;}

ul, ol {
	padding-left:1.5em;
}
ul ol, ol ul, ul ul, ol ol { /* Nested lists */
	padding-inline-start: 1.75em;
}

/* Mobile styles */
@media only screen and (max-width: 700px) {
	table {margin-left: 0em}
	ul, ol {
	    padding-left:0.5em;
	}
	.pagetitle { font-size:24pt }
}

.textButton {
	cursor: pointer;-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;
}

.noSelect, .panelTitle, .actionItem, .logMessage .logDay, .logMessage .logAct {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	 -khtml-user-select: none;
	   -moz-user-select: none;
	    -ms-user-select: none;
	        user-select: none;
}
summary {
	cursor: pointer;
}
abbr {
	cursor:help;
}

.artgallery {
	display:flex;
	flex-wrap:wrap;
	flex-direction: row;
	/* center whole gallery on page */
	justify-content: center;
	border:solid white;
}
.artgallery > div {
	text-align: center;
	padding: 10px;
	flex-grow: 1;
	border:solid white;
}
.artgallery div img, .artgallery div video {
	height: 198px;
}
.artgallery div audio {
	height: 125px;
}

.texticon, a.qr {
	color: rgba(0,0,0,0);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	height: 1em;
	width: 1em;
	max-width: 1em;
	overflow: hidden;
	display: inline-block;
	vertical-align: middle;
	text-align: center;
	text-wrap: none;
	overflow-x: hidden;
	word-wrap: normal;
}

a.qr {
	background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3Csvg%20fill%3D%22%23DEA5E8%22%20width%3D%22800px%22%20height%3D%22800px%22%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20data-name%3D%22Layer%201%22%3E%3Cpath%20d%3D%22M8%2C21H4a1%2C1%2C0%2C0%2C1-1-1V16a1%2C1%2C0%2C0%2C0-2%2C0v4a3%2C3%2C0%2C0%2C0%2C3%2C3H8a1%2C1%2C0%2C0%2C0%2C0-2Zm14-6a1%2C1%2C0%2C0%2C0-1%2C1v4a1%2C1%2C0%2C0%2C1-1%2C1H16a1%2C1%2C0%2C0%2C0%2C0%2C2h4a3%2C3%2C0%2C0%2C0%2C3-3V16A1%2C1%2C0%2C0%2C0%2C22%2C15ZM20%2C1H16a1%2C1%2C0%2C0%2C0%2C0%2C2h4a1%2C1%2C0%2C0%2C1%2C1%2C1V8a1%2C1%2C0%2C0%2C0%2C2%2C0V4A3%2C3%2C0%2C0%2C0%2C20%2C1ZM2%2C9A1%2C1%2C0%2C0%2C0%2C3%2C8V4A1%2C1%2C0%2C0%2C1%2C4%2C3H8A1%2C1%2C0%2C0%2C0%2C8%2C1H4A3%2C3%2C0%2C0%2C0%2C1%2C4V8A1%2C1%2C0%2C0%2C0%2C2%2C9Zm8-4H6A1%2C1%2C0%2C0%2C0%2C5%2C6v4a1%2C1%2C0%2C0%2C0%2C1%2C1h4a1%2C1%2C0%2C0%2C0%2C1-1V6A1%2C1%2C0%2C0%2C0%2C10%2C5ZM9%2C9H7V7H9Zm5%2C2h4a1%2C1%2C0%2C0%2C0%2C1-1V6a1%2C1%2C0%2C0%2C0-1-1H14a1%2C1%2C0%2C0%2C0-1%2C1v4A1%2C1%2C0%2C0%2C0%2C14%2C11Zm1-4h2V9H15Zm-5%2C6H6a1%2C1%2C0%2C0%2C0-1%2C1v4a1%2C1%2C0%2C0%2C0%2C1%2C1h4a1%2C1%2C0%2C0%2C0%2C1-1V14A1%2C1%2C0%2C0%2C0%2C10%2C13ZM9%2C17H7V15H9Zm5-1a1%2C1%2C0%2C0%2C0%2C1-1%2C1%2C1%2C0%2C0%2C0%2C0-2H14a1%2C1%2C0%2C0%2C0-1%2C1v1A1%2C1%2C0%2C0%2C0%2C14%2C16Zm4-3a1%2C1%2C0%2C0%2C0-1%2C1v3a1%2C1%2C0%2C0%2C0%2C0%2C2h1a1%2C1%2C0%2C0%2C0%2C1-1V14A1%2C1%2C0%2C0%2C0%2C18%2C13Zm-4%2C4a1%2C1%2C0%2C1%2C0%2C1%2C1A1%2C1%2C0%2C0%2C0%2C14%2C17Z%22%2F%3E%3C%2Fsvg%3E");
}
a.qr:hover, a.qr:active, a.qr:hover:active, a.texticon:hover, a.texticon:active, a.texticon:hover:active {
	color: rgba(0,0,0,0);
}

/* 2026 STYLE - LAUNCH FWD  (Not all of it) */

body > header:first-child {
	border-bottom: solid 3px rgba(255,255,255,0.5);
}
body.homepage > header:first-child {
	border: none;
}
.homepage .content {
	border: none;
	padding-top: 0em;
	margin-top: 0em;
}

.content > p:first-child,
.content > dl:first-child,
.content > ul:first-child,
.content > ol:first-child {
    margin-top: 0em;
	padding-top: 0em;
}

body header:first-child {
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	display: flex;
	align-items: center;
	transition: 0.2s padding-top, 0.2s padding-bottom;
}

header.homepage {
	justify-content: space-between;
}
header.homepage #pagetitle {
	display: none
}
body header:first-child > * {
	margin-left: 22px;
	flex-grow: 1;
}
body header:first-child > *:first-child,
body header:first-child > img { /* logo image */
	flex-shrink: 0;
	flex-grow: 0;
}
body header:first-child > *:last-child {
	margin-right: 22px;
}
header.homepage:first-child > *:last-child {
	margin-right: 1em;
}
body header.min:first-child {
	padding-top: 0.1em;
	padding-bottom: 0.1em;
}
body header.min:first-child * {
	font-size: 30px !important;
}
body header:first-child > * {
	transition: 0.2s font-size, 0.2s scale, 0.2s width;
}
header.homepage > .subtitle {
	font-variant: small-caps;
    font-weight: bold;
    font-style: italic;
}
header > img[role="button"] {
	width: 42px;
}
img[role="button"] {
	cursor: pointer;
	transition: 0.2s scale;
	user-select: none;
}
img[role="button"]:hover {
	scale: 1.5
}
img[role="button"]:active {
	scale: 1.1
}

header .back[href="proxy.php?url=https://R74n.com"],
header .back[href="proxy.php?url=https://r74n.com"],
header .back[href="proxy.php?url=https://r74n.com/"],
header .home {
	font-size:32pt;
	width: 1.4em;
	height: 1.4em;
	color: transparent;
	background-image: url("https://r74n.com/icons/favicon.png");
	background-size: contain;
	background-repeat: no-repeat;
}
header .home.dark {
	background-image: url("https://r74n.com/icons/black.png");
	background-size: contain;
	background-repeat: no-repeat;
}
header .back,
header .home,
body header:first-child .back,
body header:first-child .home {
	flex-grow: 0
}


@media only screen and (min-width: 1050px) {
	header.homepage #rueBox {
		position: relative !important;
		display: inline !important;
		top: 0px !important;
		flex-grow: 0;
		padding: 0 !important;
	}
}
@media only screen and (max-width: 1050px) {
	header.homepage #rueBox {
		top: 0.4em !important;
		padding-right: 0 !important;
	}
}

@media only screen and (max-width: 860px) {
	header.homepage > .subtitle {
		display: none;
	}
}

@media only screen and (min-width: 1016px) and (max-width: 1799px) {
	.homediv {
		width: 46%;
		max-width: 46%;
        /* margin-left: 2%; */
        margin-right: 4%;
	}
}
@media only screen and (max-width: 1016px) {
	.homediv {
		width: 100%;
	}
	.tree > li > details > ul > li {
		display: block;
	}
}
@media only screen and (min-width: 1799px) {
	.homediv {
        /* margin-left: 2%; */
        margin-right: 4%;
		max-width: 750px;
	}
}

@media only screen and (max-width: 1050px) {
	header.homepage {
		display: block !important;
	}
	header.homepage #rueBox {
		position: absolute !important;
		/* right: 0.5em; */
		right: 0;
		max-width: 62.5%;
	}
	header.homepage #rueBoxIn {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	#newsheader {
		display: block;
		margin-top: 1em;
		margin-left: 1em;
		margin-right: 1em;
	}
}

.tree {
	padding: 0;
	margin: 0;
	margin-bottom: 1em;
	line-height: 1.25em;
}
.tree * {
	transition: 0.1s opacity, 0.1s border-bottom, 0.1s padding-bottom;
}
.tree li::before {
	content: "";
	margin: 0;
	display: none;
}
.tree summary::marker,
.tree summary::-webkit-details-marker {
	display: none;
}
.tree summary {
	color: #ffff87;
	list-style: none;
	user-select: none;
	font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-weight: 600;
}
.tree details {
	user-select: none;
}
.tree details[open] {
	user-select:text;
}
.tree details > summary {
	border-bottom: 0px solid rgba(255, 255, 0, 0);
	padding-bottom: 0em;
	margin-bottom: 0.75em;
}
.tree details > summary:active,
.tree details[open] summary:active {
	border-bottom: 1.5px solid rgba(188, 144, 1, 0.75);
	padding-bottom: 0.15em;
}
.tree details[open] > summary {
	border-bottom: 3px solid rgba(188, 144, 1, 0.75);
	padding-bottom: 0.25em;
}
.tree summary::before {
	content: "+";
	/* padding-right: 0.25em; */
	width: 1em;
	font-family:'Courier New', Courier, monospace;
	font-weight: bold;
	display: inline-block;
	transform: translateY(-0.1em);
	color: white;
}
.tree details > summary:hover:active::before,
.tree details[open] > summary:hover:active::before {
	content: "/";
}
.tree details[open] > summary::before {
	content: "-";
}
.tree > li > details > ul {
	padding-left: 0;
}
.tree > li > details > ul > li {
	padding-top: 0.75em;
	padding-left: 1.5em;
	position: relative;
}
.tree > li > details > ul > li:first-of-type {
	padding-top: 0;
}
.tree > li > details > ul > li::before {
	content: "↳";
	display: inline-block;
	color: rgb(90, 255, 90);
	font-family:'Courier New', Courier, monospace;
	/* transform: translateY(-0.2em); */
	font-weight: bold;
	width: 1em;
	position: absolute;
	left: 0.5em;
	top: 0.66em;
}
.tree > li > details > ul > li:first-of-type::before {
	top: 0em;
}

.tree details[open] summary:active ~ ul {
	opacity: 0.5;
}

.tree details > ul {
	height: 0;
	transition: 0.2s height
}
.tree details[open] > ul {
	height: unset;
}

.tree details > ul a {
	font-style: italic;
	color: unset;
	text-decoration: none;
	display: inline-block;
	transition: 0.2s color, 0.1s transform;
}
.tree details > ul a:active {
	color: unset;
}
.tree details > ul a em {
	font-style: normal;
	color: rgb(255, 90, 255);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}
.tree details > ul a em.news {
	color: rgb(255, 62, 62);
	text-decoration: none;
}
.tree details > ul a em:last-of-type::after {
	text-decoration: none;
	color: white;
	content: " »";
	display:inline-block;
	white-space: pre;
}
.tree details > ul .noArrow a em:last-of-type::after {
	content: "";
	display: none;
}
.tree details > ul a:active em,
.tree details > ul a:hover:active em {
	color: rgb(255, 179, 255);
}
.tree details > ul a:hover em {
	color: rgb(255, 121, 255);
}
.tree details > ul a:active em.news,
.tree details > ul a:hover:active em.news {
	color: rgb(255, 0, 0);
}
.tree details > ul a:hover em.news {
	color: rgb(255, 118, 118);
}
.tree details > ul a:hover:only-child {
	transform: translateX(0.1em);
}
.tree details > ul a:active:only-child {
	transform: scale(98%)
}

.tree details summary + * {
	margin-top: 0
}

.tree.poll summary {
	width: 100%;
	max-width: unset;
}
.tree .tree {
	margin-bottom: 0;
}
.tree .tree details:not([open]) summary {
	margin-bottom: 0;
}
.tree .tree summary::before {
	height: 5px
}

@media only screen and (max-width: 500px) {
	.tree > li > details > ul > li {
		padding-left: 1em;
		padding-top: 0.5em;
	}
	.tree > li > details > ul > li::before {
		left: 0em;
	}
	.tree details > ul a em:last-of-type::after {
		content: '';
		display: block;
	}
	.tree details > ul a {
		width: 100%;
	}
}

@media only screen and (min-width: 800px) {
	.tree summary {
		max-width: 50vw;
	}
}

.form input,
.form textarea,
.form button,
.form select {
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	display: block;
}

.form div {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
.form div > * {
	display: inline-block;
	margin-right: 0.5em;
}
.form div > *:last-child {
	margin-right: 0;
}
.form .response {
	display: none
}
form .honeypot {
	display: none
}
.tree .form + p {
	margin-top: 0;
}

/* Global Dialogs*/
.globalDialog {
	position: fixed;
	top: 0;
    left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.75);
	text-align: center;
	backdrop-filter: blur(10px);
	z-index: 9999;
	display: none;
	align-items: center;
	/* justify-content: center; */
	flex-direction: column;
	font-family: 'VT323', 'Courier New', Courier, monospace;
	font-variant-ligatures: no-common-ligatures;
	font-size: 35px;
	text-shadow: 0 0 10px black, 0 0 10px black, 0 0 10px black;
	color: white;
}
.globalDialog.open {
	display: flex;
}
.globalDialog > div {
	flex-direction: column;
    display: flex;
	width: 50%;
	flex-grow: 1;
	overflow-y: scroll;
	margin: auto;
	justify-content: space-around;
}
.globalDialog > div > div {
	flex-direction: row;
	display: flex;
	padding: 0.5em;
	flex-wrap: wrap;
	justify-content: space-between;
	flex-grow: 1;
}
.globalDialog > div > div:first-child {
	justify-content: space-between;
	padding-top: 0.1em;
}
.globalDialog > div > div:first-child * {
	align-self: end;
}
.globalDialog .doodle {
	width: unset;
	height: 1.5em;
}
.globalDialog > div > div:nth-child(2) .doodle {
	margin-left: 0.5em;
	margin-right: 0.5em;
	margin-bottom: 0.5em;
	height: 1.75em;
	-webkit-filter: drop-shadow(0px 0px 10px rgba(255,255,127,0.5));
	filter: drop-shadow(0px 0px 10px rgba(255,255,127,0.5));
}
.globalDialog > div > div > div {
	display: flex;
    flex-direction: column;
	width: 100%;
}
.globalDialog > div > div > div > * {
	margin-bottom: 1em;
}
.globalDialog.wide > div {
	width: 100%
}
.globalDialog.wide .globalDialogContent {
	padding: 0;
}
.globalDialogContent * {
	flex-grow: 0;
}

@media only screen and (max-width: 900px) {
	.globalDialog > div {
		width: 90%;
	}
}

/* Project Galleries */
.projectGallery {
	display:flex;
	width: 100%;
	/* margin-bottom:1.5em;
	margin-top: 1em; */
	justify-content: space-evenly;
	flex-wrap: wrap;
	}
	.projectGallery > a {
	width:25%; height:100px;
	margin-bottom: 0.5em;
	background-position: center;
	background-size: cover;
	color: white;
	font-family: 'VT323';
	font-variant-ligatures: no-common-ligatures;
	text-align: center;
	font-size: 40px;
	/* -webkit-text-stroke: 4px black;
	paint-order: stroke fill; */
	text-shadow:
0px 3px 0px black,
0px -3px 0px black,
3px 0px 0px black,
-3px 0px 0px black,
3px 3px 0px black,
3px -3px 0px black,
-3px -3px 0px black,
-3px 3px 0px black,
0px 0px 10px black,
0px 0px 10px black,
0px 0px 10px black,
0px 0px 10px black
;
	border: solid 4px #797979;
	border-right-color: #575757;
	border-bottom-color: #575757;
	border-top-width: 3px;
	border-bottom-width: 5px;
	/* transition: 0.2s scale, 0.5s border-color, 0.5s border-left-color, 0.33s color, 0.2s border-bottom-width, 0.2s translate; */
	overflow: hidden;
	display: flex;
	flex-direction: row!important;
	align-items: center;
	justify-content: center;
	align-content: center;
	line-height: 1;
	position: relative;
	image-rendering: pixelated;
}
.projectGallery > a:hover {
	filter: none;
	scale: 1.1;
	border-color: #ece060;
	border-right-color: #bab36f;
	border-bottom-color: #bab36f;
	color: yellow
}
.projectGallery > a:active {
	filter: none!important;
	border-bottom-width: 4px;
	scale: 1.05;
}
.projectGallery > a.new::after {
	content: "new";
	position: absolute;
	right: 0;
	bottom: 0;
	background-color: #ff4a4a;
	font-size: 30px;
	text-shadow: none;
	color: white;
	padding-left: 5px;
	padding-right: 5px;
	line-height: 1;
}
.projectGallery > a.new.update::after {
	content: "update";
}
@media only screen and (max-width: 1200px) {
	.projectGallery > a.new::after {
		opacity: 0.66
	}
}
@media only screen and (max-width: 950px) {
	.projectGallery > a {
		flex-grow: 1;
		border-left: none;
		border-left-color: #797979;
		max-width: 40%;
	}
	.projectGallery > a:first-child {
		border-left: solid 3px #797979;
	}
	.projectGallery > a:hover {
		scale: 1.05;
		z-index: 1000;
		border-left: solid 3px #ece060;
	}
}
@media only screen and (max-width: 700px) {
	.projectGallery {
		display: block;
		/* margin-top: 0.5em;
		margin-bottom: 1em; */
	}
	.projectGallery > a {
		width: 100%;
		flex-wrap: wrap;
		display: flex;
		margin-bottom: 0.2em;
		border-left: solid 3px #797979;
		max-width: 100%;
		height: 80px;
		margin-top: 0.25em;
		line-height: 0.8;
	}
	.projectGallery > a:hover {
		scale: 1.01;
	}
	.projectGallery > a.new::after {
		opacity: 1
	}
}
.globalDialog .projectGallery {
	margin-bottom: 0;
}



@view-transition {
	navigation: auto;
}

@keyframes move-out {
	from {
		opacity: 1;
	}

	to {
		opacity: 0;
	}
}

@keyframes move-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

::view-transition-old(root) {
	animation: 50ms ease-in both move-out;
}

::view-transition-new(root) {
	animation: 50ms ease-in both move-in;
}