/*Begin reset*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}
/*End reset*/

:root {
	font-size: 16px;
	overflow-x: hidden;
	max-width: 100vw;
}
@font-face {
    font-family: 'archaic';
    src: url('fonts/archaic.woff2') format('woff2'),
         url('fonts/archaic.woff') format('woff');
    font-weight: normal;
    font-style: normal;
	font-display: swap;
}
@font-face {
    font-family: 'interface';
    src: url('fonts/interfacereg.woff2') format('woff2'),
         url('fonts/interfacereg.woff') format('woff');
    font-weight: normal;
    font-style: normal;
	font-display: swap;
}
@font-face {
    font-family: '3x3';
    src: url('fonts/3x3.woff2?bug=waterbug') format('woff2'),
         url('fonts/3x3.woff?bug=waterbug') format('woff');
    font-weight: normal;
    font-style: normal;
	font-display: swap;
}

/*Begin JS-related styling*/
.js-loading .window {
	display: none !important;
}
.js-loading {
	background: #000;
	width: 100%;
	height: 100%;
}
.js-only {
	display: none !important;
}
/*End JS-related styling*/
.loading {
	font-family: 'archaic', monospace;
	position: absolute;
	width: 100%;
	height: 200%;
	background: #000;
	color: var(--sec);
	z-index: 999999999;
	padding: 1em;
	font-size: 1.25em;
	line-height: 1.25em;
	display: block;
	--cur-hand0: url('images/cur_hand2_0.png') 18 18, default;
	--cur-hand1: url('images/cur_hand2_1.png') 18 18, default;
	--cur-hand2: url('images/cur_hand2_2.png') 18 18, default;
	--cur-hand3: url('images/cur_hand2_3.png') 18 18, default;
	--cur-hand4: url('images/cur_hand2_4.png') 18 18, default;
	--cur-hand5: url('images/cur_hand2_5.png') 18 18, default;
	cursor: var(--cur-hand0);
	animation: cursorhand 1.2s linear infinite alternate;
	& * {
		cursor: inherit;
	}
}
@keyframes cursorhand {
	0% {
		cursor: var(--cur-hand0);
	}
	20% {
		cursor: var(--cur-hand1);
	}
	40% {
		cursor: var(--cur-hand2);
	}
	68% {
		cursor: var(--cur-hand3);
	}
	80% {
		cursor: var(--cur-hand4);
	}
	100% {
		cursor: var(--cur-hand5);
	}
}
.loading span {
	display: inline-block;
}
.loading p {
	margin-bottom: 1.5em;
	color: #000;
}
#loada:checked ~ .loading {
	display: none;
}
#guy {
	color: var(--sec);
	position: relative;
}
#guy::after {
	content: '(• _ • ╬ ) ‼';
	position: absolute;
	left: 0;
	opacity: 0;
	background: #000;
	animation: wakeup 0s 0.2s steps(1) forwards;
}
#ornate {
	line-height: 1em;
}
#rotate {
	text-align: center;
	animation: rotate 0.7142s steps(1) infinite;
}
#ellipsis::after {
	content: '';
	display: inline;
	animation: ellipsis 1.14s linear infinite alternate;
}
#l1 {
	animation: popin 0s 0.2s steps(1) forwards;
}
#l2 {
	animation: popin 0s 0.3s steps(1) forwards;
}
#l3 {
	animation: popin 0s 0.4s steps(1) forwards;
}
#l4 {
	animation: popin 0s 0.5s steps(1) forwards;
}
#l5 {
	animation: popin 0s 0.6s steps(1) forwards;
}
#l6 {
	animation: popin 0s 0.625s steps(1) forwards;
}
#l7 {
	animation: popin 0s 0.650s steps(1) forwards;
}
#l8 {
	animation: popin 0s 0.675s steps(1) forwards;
}
#l9 {
	animation: popin 0s 0.7s steps(1) forwards;
}
#l10 {
	animation: popin 0s 0.725s steps(1) forwards;
}
#l11 {
	animation: popin 0s 0.825s steps(1) forwards;
}
#l12 {
	animation: popin 0s 0.925s steps(1) forwards;
}
#l13 {
	animation: popin 0s 1.025s steps(1) forwards;
}
#l14 {
	animation: popin 0s 1.125s steps(1) forwards;
}
#l15 {
	animation: popin 0s 1.225s steps(1) forwards;
}
#l16 {
	animation: popin 0s 1.325s steps(1) forwards;
}
#l17 {
	display: inline-block;
	margin-bottom: 1.5em;
	animation: popin 0s 1.425s steps(1) forwards;
}
#l18 {
	animation: popin 0s 1.45s steps(1) forwards;
}
#l19 {
	animation: popin 0s 1.475s steps(1) forwards;
}
#l20 {
	animation: popin 0s 1.5s steps(1) forwards;
}
#l21 {
	color: #000;
	animation: popin 0s 1.525s steps(1) forwards, blink11 1s steps(1) infinite;
	cursor: url('images/cur_pointer2.png'), pointer;
}
#l21:hover {
	background: none;
}
#l18,#l19,#l20 {
	clear: both;
}
@keyframes rotate {
	0% {transform: rotate(0);}
	50% {transform: rotate(0.25turn);}
}
@keyframes ellipsis {
	0% {content: '';}
	33.333% {content: ' . ';}
	66.666% {content: ' . . ';}
	100% {content: ' . . . ';}
}
@keyframes popin {
	0% {color: #000;}
	100% {color: var(--sec);}
}


/*Begin state-related styling and variables*/
body:has(#poltoga:checked) {
	--pri: #ffafcd;
	--pors: var(--sec);
	--sorp: var(--pri);
	--worb: #000;
	--borw: #fff;
	--borp: var(--pri);
	--bors: var(--sec);
	--borw05: rgba(255,255,255,0.05);
	--borw10: rgba(255,255,255,0.1);
	--borw20: rgba(255,255,255,0.2);
	--borw35: rgba(255,255,255,0.35);
	--borw75: rgba(255,255,255,0.75);
	--worb20: rgba(0,0,0,0.2);
	--worb75: rgba(0,0,0,0.75);
	--worb95: rgba(0,0,0,0.95);
	--worb98: rgba(0,0,0,0.98);
	--saors: var(--sec);
	--saors-clr: #2bd092b8;
	--neut: #7f7f7f;
	--bkgimg: url('images/bkg2.png');
	--emailimg: url('images/email2.png');
	--windowimg: url('images/window_alt2.png');
	--folderspriteimg: url('images/foldersprite2.svg');
	--tbimg: url('images/tb2.png');
	--mp3img: url('images/mp32.png');
	--closerimg: url('images/closer2.png?v=2');
	--scrollbkgimg: url('images/scrollbkg2.png');
	--fadergripimg: url('images/fadergrip2.png');
	--peelerimg: url('images/peeler2.png');
	--bouncerimg: url('images/bouncer2.png');
	--arrowYimg: url('images/arrow_y2.png');
	--arrowXimg: url('images/arrow_x2.png');
	--bubbleimg: url('images/bubble2.png');
	--bubbleimg-down: url('images/bubble_down2.png');
	--bubbleimg-vert-left: url('images/bubble_vert_left2.png');
	background: #000;
	--cur-hand0: url('images/cur_hand2_0.png') 18 18, default;
	--cur-hand1: url('images/cur_hand2_1.png') 18 18, default;
	--cur-hand2: url('images/cur_hand2_2.png') 18 18, default;
	--cur-hand3: url('images/cur_hand2_3.png') 18 18, default;
	--cur-hand4: url('images/cur_hand2_4.png') 18 18, default;
	--cur-hand5: url('images/cur_hand2_5.png') 18 18, default;
	--cur-default: url('images/cur_default2.png'), default;
	--cur-pointer: url('images/cur_pointer2.png'), pointer;
	--cur-grab: url('images/cur_grab2.png') 18 18, grab;
	--cur-grabbing: url('images/cur_grabbing2.png') 18 18, grabbing;
	--cur-text: url('images/cur_text2.png') 7 16, text;
	& #log h3#current, dd {
		text-shadow: unset;
	}
	& .fineprint img {
		filter: unset;
	}
	& .icongraphic, & .icongraphic::before, & .icongraphic::after {
	filter: invert();
	}
	& :is(#playlist,.grown) .icongraphic {
	filter: invert() url('#distort');
	}
	& .eye, & .eye::after {
		filter: invert();
	}
	& .rescaler-ex {
		filter: invert();
	}
	& #lowerreveal label::before {
		color: var(--worb);
		--bubbleimg: url('images/bubble.png');
		filter: invert();
	}
}
body:has(#poltoga:checked) .realinner::after {
	opacity: 1;
}
body:has(#poltoga:checked)::after {
	opacity: 1;
}
body:has(#poltoga:checked) :is(#guestbook,#garagesale) iframe {
	filter: invert(1);
}
#poltoga:checked ~ #wrapper #off2 {
	mix-blend-mode: color-dodge;
}
body:has(#poltoga:checked) #stolen :is(#stolenimg,.stolencool) {
	filter: invert();
}
body:has(#poltoga:checked) #stolencoolcheck:checked ~ div .stolencool::after {
	filter: invert() url('#distort');
}
body:has(#poltoga:checked) .benos {
	background-position-y: bottom;
}
body:has(#poltoga:checked) #spatter {
	mix-blend-mode: screen;
}
#poltoga:checked ~ #wrapper .home::before {
	opacity: 1;
}
#poltoga:checked ~ #wrapper .home::after {
	opacity: 0;
}
body {
	--pri: #c9658b;
	--sec: #2bd092;
	--secalt: #8ed9bc;
	--pors: var(--pri);
	--sorp: var(--sec);
	--worb: #fff;
	--borw: #000;
	--borp: #000;
	--bors: #000;
	--borw05: rgba(0,0,0,0.05);
	--borw10: rgba(0,0,0,0.1);
	--borw20: rgba(0,0,0,0.2);
	--borw35: rgba(0,0,0,0.35);
	--borw75: rgba(0,0,0,0.75);
	--worb20: rgba(255,255,255,0.2);
	--worb75: rgba(255,255,255,0.75);
	--worb95: rgba(255,255,255,0.95);
	--worb98: rgba(255,255,255,0.98);
	--saors: var(--secalt);
	--saors-clr: #8ed9bcb8;
	--neut: var(--borw35);
	--bkgimg: url('images/bkg1.png');
	--emailimg: url('images/email.png');
	--windowimg: url('images/window_alt.png');
	--folderspriteimg: url('images/foldersprite.svg');
	--tbimg: url('images/tb.png');
	--mp3img: url('images/mp3.png');
	--closerimg: url('images/closer.png?v=2');
	--scrollbkgimg: url('images/scrollbkg.png');
	--fadergripimg: url('images/fadergrip.png');
	--peelerimg: url('images/peeler.png');
	--bouncerimg: url('images/bouncer.png');
	--arrowYimg: url('images/arrow_y.png');
	--arrowXimg: url('images/arrow_x.png');
	--bubbleimg: url('images/bubble.png');
	--bubbleimg-down: url('images/bubble_down.png');
	--bubbleimg-vert-left: url('images/bubble_vert_left.png');
	--cur-hand0: url('images/cur_hand_0.png') 18 18, default;
	--cur-hand1: url('images/cur_hand_1.png') 18 18, default;
	--cur-hand2: url('images/cur_hand_2.png') 18 18, default;
	--cur-hand3: url('images/cur_hand_3.png') 18 18, default;
	--cur-hand4: url('images/cur_hand_4.png') 18 18, default;
	--cur-hand5: url('images/cur_hand_5.png') 18 18, default;
	--cur-default: url('images/cur_default.png'), default;
	--cur-pointer: url('images/cur_pointer.png'), pointer;
	--cur-grab: url('images/cur_grab.png') 18 18, grab;
	--cur-grabbing: url('images/cur_grabbing.png') 18 18, grabbing;
	--cur-text: url('images/cur_text.png') 7 16, text;
	cursor: var(--cur-default);
	touch-action: manipulation;
}
.innermost :is(#metal,.window):not(.main,.home,#system .window,.window .window,#playlist) {
	display: none;
}
.innermost {
	--pri: #00f !important;
	--sec: #f00 !important;
	--saors: #f00 !important;
	--saors-clr: #ff0000b8 !important;
	& #orbspeak {
		filter: hue-rotate(50deg);
		& output {
			filter: hue-rotate(-50deg);
		}
	}
}
.innermost #topbartog {
	color: #fff !important;
	animation: fiveoh 1s steps(5) infinite;
}
.innermost .topbar:hover #topbartog {
	color: #fff !important;
}
.innermost :is(#bioimg,#sssprite) {
	filter: hue-rotate(40deg);
}
.hidden {
	opacity: 0.25 !important;
	pointer-events: none;
	&:is(.scrollarea,.scrollareaX) {
		background: unset;
	}
	& :is(.scrollfader,.scrollfaderX) {
		opacity: 0;
	}
	&#fakemouse {
		opacity: 0 !important;
	}
}
/*End state-related styling and variables*/

/*Begin elements*/
html,body {
	min-height: 100vh;
}
#wrapper {
	min-height: calc(100vh);
	margin-bottom: 9em;
}
body {
	box-sizing: border-box;
	font-family: 'interface',monospace;
	background-color: #000;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	background: url('images/bkg_alt.png') top left repeat;
	position: relative;
	overflow: hidden;
	max-width: 100vw;
	color: var(--borw);
	image-rendering: pixelated;
	image-rendering: crisp-edges;
	transition: background-color 0.4s linear;
}
body::after {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	height: 100%;
	width: 100%;
	background: url('images/bkg_alt2.png') top left repeat;
	transition: opacity 0.2s steps(3);
	opacity: 0;
	z-index: -1;
}
body, body::after {
	background-size: 48.3125em;
}
.smoof {
	scroll-behavior: smooth !important;
}
h2, h3, input, textarea, p, li, dd, dt, output, blockquote, figcaption, time {
	cursor: var(--cur-text);
}
h1,h2 {
	margin: -4.25em auto 2.25em;
	text-align: center;
	line-height: 1.5em;
	position: relative;
	pointer-events: none;
}
.window > :is(h1,h2) {
	overflow-x: clip;
	overflow-y: visible;
	margin-inline: -2em;
}
h1 {
	text-transform: uppercase;
	user-select: none;
	.window > & {
		cursor: var(--cur-pointer);
	}
	/*trims schmutz from grip and forces rotato/rotato2 animation sync in ff mobile*/
	clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0);
}
h1 .dist > div {
	transform: translate(-0.25rem,-0.3125rem);
}
h1 label {
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	inset: 0;
	z-index: 2;
}
.c2,.c3 {
	position: absolute;
	inset: -0.125em;
	width: 10.5em;
	height: 2.125em;
	opacity: 0;
}
.c2 {
	background: url('images/coolname_clear.png') no-repeat center/contain;
}
.c3 {
	background: url('images/ornament.png') no-repeat center/contain;
}
h1:has(.c2 input:checked) {
	color: #0000;
	z-index: 2;
	& .c2 {
		opacity: 1;
	}
}
h1:has(.c3 input:checked) {
	color: #0000;
	z-index: 2;
	& .c3 {
		opacity: 1;
	}
}
body:has(#poltoga:checked) :is(.c2,.c3) {
	filter: invert();
}
h1 span {
	text-transform: lowercase;
}
a, #biolong label {
	text-decoration: none;
	color: var(--pri);
	padding-block: 0.25em;
	position: relative;
	white-space: break-spaces;
}
:is(li, p) :is(a, label) {
	padding-inline: 0 !important;
	&::after {
		padding-inline: revert-layer;
	}
}
a {
	cursor: var(--cur-pointer);
}
a[href]:not(:where(
	/* exclude hash only links */
	[href^="#"],
	/* exclude relative links */
	[href^="/"],
	/* exclude email links */
	[href^="mailto:"],
	/* domains to exclude */
	[href*="//occlu.de"],
	[href*="//hidersout.com"],
	[href*="//shapesinrealti.me"],
	[href*="//olivia-and-ben.info"],
	[href*="//chattweb.net"]
))::after {
	content: '→';
	font-family: 'archaic', monospace;
	display: inline-block;
	text-align: right;
	background: var(--pri);
	color: var(--worb);
	width: 1ch;
	margin-inline: 1ch 1px;
	height: 1.3333em;
}
a[href="/rss.xml"]::after {
	content: '╗';
	font-family: 'archaic', monospace;
	box-sizing: border-box;
	display: inline-block;
	aspect-ratio: 1/1;
	text-align: center;
	margin-inline: 1ch 2px;
	background: var(--pri);
	color: var(--worb);
	width: 2ch;
	height: 1.5em;
}
li a[href="/rss.xml"]::after {
	letter-spacing: -1ch;
}
.sub h3{
	transition: color 0.4s steps(3);
}
#leaf {
	position: absolute;
	display: block;
	width: 0.75em;
	aspect-ratio: 1 / 1;
	left: max(-0.4375em, calc(50% - 3.5em));
	top: 0;
	margin-top: -5.25em;
	z-index: 999;
	background: var(--saors);
	mask-image: url('images/leaf2.png');
	mask-size: contain;
	transition: inset 0.2s ease-out;
}
a:hover,a:hover span, #biolong label:hover {
	background: var(--pri);
	color: var(--worb);
}
#mp3 a:hover {
	background: none;
	color: var(--worb);
}
#mp3 a:hover span {
	background: var(--pri);
}
#mp3 a span {
	display: inline-block;
	padding: 0.125em;
}
label {
	cursor: var(--cur-pointer);
	white-space: nowrap;
	#system & {
		white-space: unset;
	}
}
p {
	margin-bottom: 1lh;
}
p:not(#warning p,.notice p,#mm) {
	max-width: 76ch;
}
code {
	color: var(--worb);
	background-color: var(--neut);
	padding-block: 0.25em;
}
#bio > .wincont {
	container: biomargin / inline-size;
}
dl {
	text-transform: uppercase;
	display: grid;
	grid-template-columns: 1fr 1fr;
	width: 100%;
	overflow-wrap: break-word;
}
dt,dd {
	padding-block: 0.75em;
	line-height: 1.5em;
	margin-block: 0.25em;
	#system & {
		line-height: unset;
		padding-block: 0.25em;
	}
}
#bio {
	& dt {
		transform: translatex(2.5em);
	}
	& dd {
		padding-inline: 1em 2.5em;
	}
	& :is(dd,dt):last-of-type {
		margin-block-end: 0.375em;
	}
}
dd {
	justify-self: end;
	text-align: right;
	color: var(--worb);
	text-shadow: 0.125em 0 var(--borw), 0 0.125em var(--borw), 00.125em 0.125em var(--borw);
	background: linear-gradient(var(--saors-clr), var(--saors-clr)), var(--scrollbkgimg) left/0.25em !important;
	box-shadow: -0.125em 0 0 var(--borw), 0 -0.125em 0 var(--borw), 0 0.125em 0 var(--borw);
	&::selection {
		color: var(--pri);
	}
}
.status dl {
	width: 14em;
	filter: url(#distort);
	transform: translate(-0.25rem, calc(-0.25rem - 0.125em));
}
.status dd {
	position: relative;
	margin-inline-end: -1000vw;
	padding-inline: 0.5em 1000vw;
}
#dis {
	display: none;
}
.kao {
	text-transform: none;
}
.window img {
	display: block;
	width: 100%;
	margin: 0 auto;
	max-width: fit-content;
}
.imgcontainer {
	display: grid;
	grid-template-columns: 2.5em auto 1fr;
	border-bottom: 0.125em solid var(--borw);
	position: relative;
}
@container biomargin (width < 29em) {
	dt {
		max-width: 11ch;
	}
}
@container biomargin (width < 24.5em) {
	.imgcontainer {
		grid-template-columns: clamp(1em,calc(100cqw - 22em),calc(100cqw - 22em)) auto 1fr;
	}
	.biolower {
		padding-inline-start: clamp(1em,calc(100cqw - 22em),calc(100cqw - 22em)) !important;
	}
	dt {
		transform: translatex(clamp(1em,calc(100cqw - 22em),calc(100cqw - 22em))) !important;
	}
	dd {
	padding-inline: 1em clamp(1em,calc(100cqw - 22em),calc(100cqw - 22em));
	}
}
#logimg {
	min-height: 5em;
	border-bottom: 0.125em solid var(--borw);
	position: relative;
}
#logimg::after {
	content: '';
	display: block;
	min-height: 5em;
	opacity: 0.25;
	background: url('images/square.png') 0.75em center/cover;
}
#logimg a {
	position: absolute;
	right: 1.5em;
	top: 1.5em;
	z-index: 1;
	display: inline;
	line-height: 1.5em;
}
.notice {
	background: var(--saors);
	color: var(--worb);
	text-align: center;
	padding: 1em;
	margin-top: 3em;
	border-top: 0.125em solid var(--borw);
}
.notice p {
	max-width: unset;
}
#kaoshake {
	position: relative;
	user-select: none;
	animation: colorfix 1s steps(1) infinite alternate;
}
#kaoshake::after {
	content: '(-_- )';
	position: absolute;
	left: 0;
	background: var(--saors);
	color: var(--worb);
	animation: blink11 1s steps(1) infinite alternate;
}
.crt {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url('images/crt.png');
	background-size: 0.319em;
	mix-blend-mode: soft-light;
	opacity: 0.2;
	animation: scanlines 1.5s steps(4) infinite;
	pointer-events: none;
}
.expleft .crt {
	z-index: 1;
	visibility: hidden;
}
.expleft:hover .crt {
	visibility: visible;
}
.item {
	padding: 1.5em 1.5em 0 1.5em;
}
.multipleheader {
	text-decoration: underline;
}
.odd {
	display: inline-block;
	transform: translatex(0.5em);
}
#contact {
	height: fit-content;
}
#contact .imga {
	display: block;
	height: 20em;
	opacity: 0.5;
	margin: 2em 0 2em;
	overflow: hidden;
	position: relative
}
#contact .imga::after {
	display: block;
	position: absolute;
	left: 0;
	width: 200%;
	height: 100%;
	content: '';
	background: var(--emailimg) center repeat-x;
	background-size: contain;
	background-position: left;
	animation: strip 8s 0.2s linear infinite;
	pointer-events: none;
}
#contact .imga:hover::after {
	animation-play-state: paused;
}
#contact .item {
	margin-top: 1em;
}
/*this is really really bad*/
#guestbook#guestbook#guestbook {
	height: 30em;
}
.gb h1,.gb h2 {
	margin: unset;
	font-family: 'archaic', monospace;
	text-align: left;
	pointer-events: all;
}
.gb h1 a {
	--pri: var(--saors);
	color: var(--borw);
	display: inline-block;
	padding-block: 0;
	padding-inline: 0.25em;
	background: var(--worb);
	border: 0.11666em solid var(--borw);
	box-shadow: 0 0.25em 0 var(--borw35);
	margin-block: 0.5em;
}
.gb h1 a span {
	display: inline-block;
	font-family: 'interface', monospace;
	transform: rotate(-0.25turn);
	background: unset;
}
.gb h1 a:hover {
	background: var(--pri);
	color: #fff;
}
.gb h1 a:hover span {
	color: #fff;
}
.gb h1 a:active {
	transform: translateY(0.25em) ;
	box-shadow: 0 0 0 var(--borw20);
	background: #7d7d7d;
}
.gb header {
	color: var(--worb);
	padding: 1.5em 1em 0.75em 2.375em;
	margin: -2.25em auto 1.5em -2.25em;
	width: calc(100% + 2.3125em);
	font-size: 1.5em;
	position: relative;
	border-bottom: 0.125rem solid var(--borw);
	background: var(--neut);
}
.gb header::before {
	content: '';
	display: block;
	position: absolute;
	inset: 0;
	opacity: 0.5;
	height: 100%;
	width: 100%;
	background: url('images/square.png') repeat-x center;
}
.gb header hgroup {
	display: block;
	width: fit-content;
}
#guestbook .wincont {
	overflow-y: scroll;
}
body.gb {
	background: unset;
}
.gb:not(body.gb) {
	padding: 2.375em;
}
/*container queries for non-iframe guestbook, which mimic guestbook iframe media queries*/
#guestbook .wincont {
	container: guestbook / size;
}
@container guestbook (max-width: 448px) {
	.gb {
		font-size: 16px !important;
	}
}
@container guestbook (max-width: 366px) {
	.gb {
		font-size: 3.5cqw !important;
	}
	#comment {
		font-size: 1em !important;
	}
}
hr {
	border: none;
	height: 0.125rem;
	background: var(--borw);
	opacity: 0.75;
}
.gb p {
	opacity: 0.5;
	line-height: 1.75em;
	margin: unset;
}
.gb blockquote {
	line-height: 1.75em;
	overflow: hidden;
}
.gb form {
	display: grid;
	grid-template-columns: 7em 1fr;
	grid-column-gap: 2em;
	grid-row-gap: 0.5em;
	justify-items: right;
	align-content: baseline;
	align-items: center;
	margin-top: 2.5em;
	box-sizing: border-box;
}
.gb label {
	display: inline-block;
	text-align: end;
}
.gb input {
	font-family: 'interface', monospace;
}
#age, label[for="age"] {
	display: none;
}
.gb input[type="submit"] {
	display: block;
	grid-column: 2;
	background: var(--worb);
}
.gb input:not(input[type="submit"]),.gb textarea {
	font-size: 1em;
	padding: 0.5em;
	width: 100%;
	border: 0.125rem solid var(--borw);
	background: var(--worb);
	color: var(--borw);
}
.gb :is(input,textarea) {
	.shrunk & {
		border-width: 0.0625rem !important;
	}
	.grown & {
		border-width: 0.25rem !important;
	}
}
.gb textarea {
	height: 4em;
	resize: vertical;
}
.gb time {
	font-size: 0.75em;
	display: inline-block;
	margin-bottom: 0.5em;
	opacity: 0.5;
}
label[for="comment"] {
	align-self: normal;
	padding-top: 0.5em;
}
#comment {
	font-family:'interface', monospace;
}
iframe {
	width: 100%;
	height: 100%;
	display: block;
}
#meta iframe {
	height: 100%;
}
/*ok yah let's do this*/
#meta#meta#meta {
	height: 40em;
}
.imga:hover {
	background: rgba(0,0,0,0);
}
#caption {
	text-align: justify;
	width: 15.25em;
	background: linear-gradient(var(--worb75), var(--worb75)), var(--scrollbkgimg) left/0.25em;
	box-sizing: border-box;
	padding-block: 1lh;
}
#cam1 {
	color: var(--worb);
	text-shadow:
		0 0.125em 0 var(--borw75),
		0.125em 0.125em 0 var(--borw75),
		0.125em -0.125em 0 var(--borw75),
		0 -0.125em 0 var(--borw75),
		0.125em 0 0 var(--borw75),
		-0.125em 0 0 var(--borw75),
		-0.125em -0.125em 0 var(--borw75),
		-0.125em 0.125em 0 var(--borw75);
}
.eye {
	display: inline-block;
	width: 1em;
	font-size: 2em;
	height: 0.75em;
	background: url('images/eye.png') no-repeat center/cover;
	margin-inline-end: 0.3125em;
	&::after {
		content: '';
		display: block;
		width: 0.25em;
		aspect-ratio: 1 / 1;
		margin-inline: auto;
		margin-block: 0.25em;
		background: var(--pri);
		animation: blink13 1s steps(1) infinite alternate;
	}
}
.title {
	background: var(--worb);
	display: inline-block;
	padding: 0.25em;
	pointer-events: all;
	position: relative;
	white-space: nowrap;
}
:is(#off1,#off2) .title {
	transition: background-color 0.3s steps(4);
}
ul {
	list-style-type: none;
}
nav {
	display: grid;
	user-select: none;
	transform: translateY(0.625em);
	filter: url(#distort);
}
nav a {
	padding: 0 0 0.125em 0;
}
nav a:hover, nav a:hover span {
	background: unset;
}
nav a:hover span span {
	background: var(--pri);
}
nav label {
	display: grid;
	grid-auto-flow: column;
	align-items: center;
	justify-items: start;
}
nav span span {
	display: grid;
	grid-auto-flow: column;
	align-items: center;
	padding-inline: 0.25em;
	height: 1.5em;
	align-self: center;
}
.navtxtouter {
	display: grid;
	grid-auto-flow: column;
	align-content: center;
}
.navtxtouter::before {
	display: inline-block;
	content: "";
	height: 2em;
	width: 2.875em;
	margin-right: 0.5em;
	transform: translateY(-0.125em);
	background: var(--folderspriteimg) no-repeat top;
	background-size: cover;
}
.return::before {
	display: inline-block;
	content: "";
	height: 1em;
	width: 0.875em;
	transform: translatey(0.125em);
	background: url('images/returnsprite.svg') no-repeat top;
	background-size: cover;
}
.return:hover::before {
	background-position: bottom;
}
.new,.sign,.open {
	padding-inline-end: 0;
}
.new::after,
.sign::after,
.open::after,
.removed::after,
.update {
	animation: flash 1s steps(5,jump-none) infinite alternate;
	background: var(--pri);
	color: var(--worb);
	height: 100%;
	width: fit-content;
	margin-left: 0.75em;
	padding-inline: 0.75em 0.5em;
	display: grid;
	align-content: center;
	box-sizing: border-box;
	padding-block-start: 0.125em;
	font-size: 0.5em;
	font-family: '3x3';
	border: 0.25em dashed var(--worb);
}
.new::after {
	content: "NEW";
}
.sign::after {
	content: "SIGN";
}
.open::after {
	content: "OPEN";
}
#projects .new::after {
	display: inline-block;
}
a:hover :is(.new,.open,.sign)::after,:is(.new,.open,.sign):hover::after {
	color: var(--worb) !important;
	border-color: var(--worb) !important;
}
.jectinfo{
	opacity: 0.5;
	clear: both;
}
h3 {
	margin-bottom: 0.75em;
}
#current {
	color: var(--saors);
/*	text-shadow: 0.125em 0 0 #000, 0 0.125em 0 #000, -0.125em 0 0 #000, 0 -0.125em 0 #000;*/
}
#current::after {
	content: "Current version";
	display: inline-block;
	text-transform: uppercase;
	color: #fff;
	background: var(--saors);
	padding-inline: 0.75em 0.5em;
	padding-block-start: 0.125em;
	font-size: 0.5em;
	font-family: '3x3';
	text-shadow: 0.25em 0 #000, 0 0.25em #000, 00.25em 0.25em #000;
}
#current:hover::after {
	content: "CSSSSSS vzzzzzz";
}
#log h3 {
	width: fit-content;
	margin-inline: -1.5em;
	padding-inline: 1.5em;
	padding-block: 1.5em;
	margin-top: -1.5em;
	& span {
		display: block;
		clear: both;
		word-wrap: anywhere;
		background: var(--borw);
		color: var(--worb);
		background: linear-gradient(var(--borw35), var(--borw35)), var(--scrollbkgimg) left/0.25em !important;
		&::d {
			color: var(--pri);
		}
	}
}
#log h3#current {
	text-shadow: 0.125em 0 var(--borw), 0 0.125em var(--borw), 00.125em 0.125em var(--borw);
	& span {
		text-shadow: unset;
		background: linear-gradient(var(--saors-clr), var(--saors-clr)), var(--scrollbkgimg) left/0.25em !important;
	}
}
.topbarcont {
	height: 6.185em;
	margin-bottom: 3em;
	width: 100%;
}
.topbar {
	width: 100%;
	height: 2em;
	z-index: 200;
	background: var(--worb95);
	border-bottom: 0.125em solid var(--borw20);
	transition: height 0.05s linear, background-color 0.3s steps(6,jump-none), opacity 0.3s linear;
	position: fixed;
}
#topbartog, .expleft {
	min-width: 6em;
	position: relative;
}
#topbartog {
	background: var(--worb75);
	color: #fff !important;
	outline-color: var(--pri);
	padding-top: 0.5em;
	display: grid;
	box-sizing: border-box;
	border-inline: 0.125em solid var(--borw20);
	background-clip: padding-box !important;
	transition: background-color 0.1s steps(3);
	--col: #6a6a6a;
	& span {
		filter:
			drop-shadow(0 0.125em 0 var(--col)) 
			drop-shadow(0 -0.125em 0 var(--col)) 
			drop-shadow(0.125em 0 0 var(--col)) 
			drop-shadow(-0.125em 0 0 var(--col));
	}
}
#topbartog:hover {
	background: var(--saors-clr);
	#topbartoga:not(:checked) ~ .topbar & {
		--col: var(--pri);
		height: calc(100% + 0.125em);
		border: 0.125em solid var(--pri);
		border-top-width: 0;
	}
	& span {
	color: #fff !important;
	}
}
#artwork {
	position: absolute;
	top: 0;
	width: 100%;
	height: 2em;
	object-fit: cover;
	object-position: center;
	aspect-ratio: 1 / 1;
	user-select: none;
	box-sizing: border-box;
	border-inline: 0.125em solid #0000;
	filter: saturate(0);
	animation: upanddown 14s linear infinite;
	animation-play-state: paused;
}
#playlisttog {
	display: block;
	box-sizing: border-box;
	position: relative;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	cursor: var(--cur-pointer);
	z-index: 99;
	user-select: none;
	border: 0.125em solid #0000;
	mix-blend-mode: hard-light;
}
#playlisttog:hover {
	border-color: #ffafcd;
}
#playlisttog:hover ~ #artwork, #topbartoga:not(:checked) ~ .topbar:has(#topbartog:hover) #artwork {
	animation-play-state: running;
}
#topbartoga:checked ~ .topbar {
	& #artwork {
	animation: upanddown 3.5s linear infinite;
	animation-play-state: paused;
	}
	& #topbartog::before {
		content: 'Collapse';
		top: calc(50% - 0.25em);
		left: -4em;
		width: 1ch;
		height: 7ch;
		border-image: var(--bubbleimg-vert-left);
		border-image-slice: 4 5 3 2 fill;
		border-width: 0.5rem 0.625rem 0.375rem 0.25rem;
		padding-block: 0.25em 0.5em;
		padding-inline: 0.625em 0.375em;
		text-align: center;
		letter-spacing: 0.25em;
		word-break: break-word;
		white-space: collapse;
	}
	& #playlisttog:hover ~ #artwork {
		animation-play-state: running;
	}
}
#topbartoga:not(:checked) ~ .topbar {
	#expanded {
		pointer-events: none;
	}
	& .expright {
		visibility: hidden;
		transform: scaley(0);
	}
	& :is(#playlisttog, #topbartog, #player button)::before {
		top: calc(100% + 0.5em);
	}
}
#playlist {
	display: none;
	height: 24em;
	position: fixed !important;
	top: 7.1875rem;
	left: 1rem;
	z-index: 999;
	&:not(.grown) {
		width: 17.25em;
	}
}
#playlist li {
	padding: 1em;
	user-select: none;
	cursor: var(--cur-pointer);
	min-width: max-content;
}
#playlist li::before {
	font-family: 'archaic', monospace;
	display: inline-block;
	margin-inline: -0.25em 0.75em;
	width: 2em;
	text-align: center;
	opacity: 0.5;
}
#playlist li:where(:hover,:active):before,.currentsong::before {
	opacity: 1 !important;
}
#playlist li:nth-of-type(odd)::before {
	content: '♪';
}
#playlist li:nth-of-type(even)::before {
	content: '♫';
}
#playlist li:hover{
	color: var(--worb);
	background: var(--saors);
}
#playlist li:active:before {
	animation: unset;
	content: '‼'
}
#playlist li:active, #playlist .currentsong:hover, .currentsong {
	background: var(--neut);
	color: var(--worb);
}
#playlist .songs .currentsong::before {
	content: '♪♫';
	animation: music 0.75s steps(1) infinite alternate;
	animation-play-state: paused;
}
body:has(.play) .currentsong::before {
	animation-play-state: unset !important;
}
.icongraphic {
	position: relative;
	:is(#playlist,.grown) & {
		filter: url('#distort');
		transform: translate(-0.25rem, -0.25rem);
	}
	#gridl & {
		background: url('images/grid_b.png') no-repeat center top/contain;
	}
	#listl & {
		background: url('images/list_b.png') no-repeat center top/contain;
	}
	#cam2l & {
		background: url('images/cam2_b.png') no-repeat center top/contain;
	}
	#cvl & {
		background: url('images/cv_sprite.png') no-repeat center bottom/cover;
	}
}
#cam2l .icongraphic {
	&::before {
		background: var(--saors);
		mask-image: url('images/cam2_hover_mask1.png');
	}
	&::after {
		background: var(--pri);
		mask-image: url('images/cam2_hover_mask2.png');
	}
	&::before, &::after {
		content: '';
		display: block;
		width: 100%;
		height: 100%;
		position: absolute;
		inset: 0;
		mask-size: contain;
		mask-position: center;
		opacity: 0;
	}
}
#cam2l:hover .icongraphic, #cam2a:checked ~ .spacer #cam2l .icongraphic {
	&::after, &::before {
		animation: blink13 1s steps(1) infinite alternate;
	}
	&::after {
		animation-direction: alternate-reverse;
	}
	body:has(#poltoga:checked) & {
		filter: invert();
	}
	.grown & {
		filter: drop-shadow(0.125em 0.125em 0 var(--worb)) url('#distort');
		transform: translate(-0.25rem, -0.25rem);
		body:has(#poltoga:checked) & {
			filter: url('#distort') invert();
		}
	}
	filter: drop-shadow(0.125em 0.125em 0 var(--worb));
}
/* dupe */
#cvl .icongraphic {
	animation: totop 2s steps(7,jump-none) infinite alternate;
	animation-play-state: paused;
	&::before {
		background: var(--saors);
		mask-image: url('images/cv_hover_mask1.png');
	}
	&::after {
		background: var(--pri);
		mask-image: url('images/cv_hover_mask2.png');
	}
	&::before, &::after {
		content: '';
		display: block;
		width: 100%;
		height: 100%;
		position: absolute;
		inset: 0;
		mask-size: cover;
		mask-position: bottom;
		opacity: 0;
		animation: totopmask 2s steps(7,jump-none) infinite alternate;
		animation-play-state: paused;
	}
}
#cvl:hover .icongraphic, #cva:checked ~ .spacer #cvl .icongraphic {
	&::after, &::before {
		opacity: 1;
	}
	body:has(#poltoga:checked) & {
		filter: invert();
	}
	.grown & {
		filter: drop-shadow(0.125em 0.125em 0 var(--worb)) url('#distort');
		transform: translate(-0.25rem, -0.25rem);
		body:has(#poltoga:checked) & {
			filter: url('#distort') invert();
		}
	}
	filter: drop-shadow(0.125em 0.125em 0 var(--worb));
}
#cvl:hover .icongraphic {
	animation-play-state: running;
	&::after, &::before {
		animation-play-state: running;
	}
}
#grida:checked ~ .songs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(8em, 1fr));
}
#grida:checked ~ .songs li {
	aspect-ratio: 1 / 1;
	display: inline-block;
	overflow: hidden;
	padding: 0;
	object-fit: cover;
	object-position: center;
	min-width: unset;
}
#grida:checked ~ .songs li:not(.currentsong,:hover,:active)::before {
	display: none;
	content: "" !important;
}
#grida:checked ~ .songs :is(.currentsong,:hover,:active)::before {
	width: 100%;
	height: 100%;
	display: grid;
	place-items: center;
}
:is(.currentsong, .songs li:hover) img {
	display: none;
}
.songs li img {
	pointer-events: none;
	max-width: unset;
}
.albumouter {
	width: 100%;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	border-bottom: 0.125em solid var(--borw);
}
.albumart {
	aspect-ratio: 1 / 1;
	max-width: 20em;
	min-width: 15em;
	height: 15em;
	display: block;
	margin-inline: auto;
}
#playlist .albumart {
	max-width: 20em;
}
#playlistcheck:checked {
	& ~ #wrapper #playlist {
		display: block;
		position: fixed;
	}
	& ~ .topbarcont #playlisttog::before {
		content: 'Hide playlist';
	}
}
.topbar label span {
	display: block;
	height: 1em;
	width: 1em;
	margin: 0 auto;
	transform: rotate(90deg) translatey(0.0625em);
	transition: transform 0.1s linear;
	text-align: center;
}
#topbartoga:checked ~ .topbar, .topbar:has(#playlisttog:focus-visible) {
	height: 7em;
	& .expleft,.expright {
		transform: unset;
		visibility: unset;
	}
	& #artwork {
		height: 100%;
		border: unset;
		filter: unset;
	}
	
}
.topbar:has(#playlisttog:focus-visible) {
	transition: unset;
}
#topbartoga:checked ~ .topbar #topbartog {
	--col: #0000;
	background: unset;
	& span {
	transform: scale(1,-1) rotate(90deg) translatey(0.0625em);
	color: var(--borw);
	}
	&:hover {
		background: var(--saors);
		border-color: var(--pri);
	}
}
#topbartoga:checked ~ .topbar:has(#topbartog:hover) #artwork {
	height: calc(100% + 0.125em);
	border-bottom: 0.125em solid var(--pri);
}
.topbar, .topbar button, .topbar label {
	color: var(--borw) !important;
}
#topbarcenter {
	width: calc(30% + 9em);
}
#player {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
}
#controls {
	width: calc(30% + 9em);
	display: grid;
	grid-template-columns: 1fr 6fr;
	min-width: 25em;
	height: 2em;
	text-align: center;
	margin: 0 auto;
	position: relative;
	z-index: 999;
	user-select: none;
	cursor: var(--cur-pointer);
}
button,input[type="submit"],#biolongl {
	background: none;
	border: none;
	font-size: 1em;
	font-family: 'interface', sans-serif;
	color: var(--borw);
	cursor: var(--cur-pointer);
}
:is(input[type="submit"],#controls button,button:not(.binnotice button),#biolongl):hover {
	background: var(--saors);
	color: #fff !important;
}
:is(input[type="submit"],#controls button,button,#biolongl,#topbartog):active {
	background: #7d7d7d !important;
	background-clip: padding-box !important;
}
#biolongl {
	margin-block: 1em;
	display: block;
	width: fit-content;
}
#biolongl::after {
	content: 'View full bio';
	display: inline;
}
#biolonga:checked ~ .wincont #biolongl::after {
	content: 'Hide full bio';
}
#biolong {
	top: 40rem;
	left: -1.5rem;
	min-width: 12em;
	width: 10rem;
	height: 7rem;
	z-index: 10;
	transition: font-size 0.3s linear, width 0.3s linear, height 0.3s linear;
	position: relative;
}
.marq1 {
	white-space: nowrap;
}
#biolong img {
	animation: sat 3s steps(4) infinite alternate;
}
#biolong ul {
	margin: 1em;
}
#biolong li {
	font-size: unset;
}
#biolong li + li {
	margin-top: 1em;
}
#website::after {
	display: inline;
	content: 'web site';
	animation: website 3s steps(2) infinite;
}
#page::after {
	content: 'site';
	display: inline;
	animation: blink11 5s steps(1) infinite;
}
.playing {
	color: rgba(0,0,0,0);
}
.playing:hover {
	color: rgba(0,0,0,0) !important;
}
#expanded {
	width: calc(30% + 9em);
	min-width: 25em;
	height: 5em;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 6fr;
}
.expleft {
	max-height: 5em;
	transform: translatey(-2em);
}
.expright {
	padding: 0.5em 0 0.5em 0.5em;
	display: grid;
	grid-template-rows: 1fr 1fr 1fr;
	align-content: space-around;
	transition: transform 0.05s linear;
	transform-origin: top;
}
#trackinfo {
	padding-bottom: 0.25em;
	overflow: hidden;
}
#progouter, #proginner {
	height: 0.75em;
	width: 100%;
}
#progouter {
	background-color: var(--borw10);
	position: relative;
	cursor: var(--cur-pointer);
}
#proginner,#buffer {
	position: absolute;
	top: 0;
	left: 0;
	width: 0%;
	height: 100%;
}
#proginner {
	background-color: var(--saors);
	z-index: 9;
	transition: width 0.2s linear;
	border-right: 0.125em solid var(--pri);
}
#buffer {
	background-color: var(--borw10);
}
#times {
	padding-bottom: 0.5em;
	display: grid;
	grid-template-columns: 1fr 1fr;
	user-select: none;
}
#totaltime {
	text-align: right;
}
.window {
	position: relative;
	width: 30%;
	min-width: 16em;
	max-width: 100vw !important;
	margin: 2rem auto;
	background-color: var(--worb98);
	border: 4.5em solid;
	border-image: var(--windowimg) fill 36;
	box-shadow: 0.375rem 0.375rem 0 var(--borw20);
	animation: appear 0.2s 1 linear, aero 8s 0.5s steps(7) infinite alternate;
	transition: background-color 0.3s steps(4), font-size 0.3s linear, width 0.3s linear, height 0.3s linear, margin 0.3s linear;
}
.grip {
	width: calc(100% + 9em);
	height: 2.375em;
	margin: -4.5em 0 0 -4.5em;
	position: absolute;
	inset: 0;
	touch-action: none;
	cursor: var(--cur-grab);
	&:active {
		cursor: var(--cur-grabbing);
	}
}
.moving {
	position: absolute;
	transition: background-color 0.3s steps(4), font-size 0.3s linear, width 0.3s linear, height 0.3s linear;
}
.home:is(.moving,.bouncing,.resizing,.resized,.shrunk,.grown,.touched) ~ .main:not(.moving,.resizing,.resized,.bouncing) {
	position: absolute;
	top: calc(var(--homeheight) * 1px + 9.185rem);
	left: 0;
	right: 0;
	margin-inline: auto;
}
.home:not(.moving) ~ .main:not(.moving) {
	transition: background-color 0.3s steps(4), font-size 0.3s linear, width 0.3s linear, height 0.3s linear;
}
.main:is(.moving,.resized) {
	transition: background-color 0.3s steps(4), font-size 0.3s linear, width 0.3s linear, height 0.3s linear;
}
.main:is(.resizing) {
	transition: background-color 0.3s steps(4), font-size 0.3s linear;
}

:is(.bodymoving,.bodypeeling) {
	user-select: none;
}
.rescaler-ex {
	display: inline-block;
	height: 1.375em;
	aspect-ratio: 1 / 1;
	background: url('/images/rescaler.png') no-repeat center/cover;
	vertical-align: sub;
	margin-inline: 0.1875em;
}
.rescaler {
	background: var(--saors);
	cursor: var(--cur-pointer);
}
.rescaler,.indicator {
	height: 1.125em;
	width: 1.125em;
	position: absolute;
	top: -3.875em;
	right: -3.25em;	
}
.indicator {
	pointer-events: none;
	opacity: 0;
}
.indicator::after {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	background: var(--pri);
}
.indicator::before {
	content: '';
	display: block;
	position: absolute;
	inset: 0;
	z-index: 5;
	width: 100%;
	height: 100%;
	background: var(--closerimg) no-repeat center/cover var(--worb);
	opacity: 0;
}
.rescaler,.indicator::after {
	mask-image: url('images/rescaler_hover_mask_sprite_alt.png');
	mask-size: cover;
}
.rescaler:hover ~ .indicator,.rescaler:active ~ .indicator::before {
	opacity: 1;
}
.rescaler, .grown > .rescaler:hover ~ .indicator::after {
	mask-position: center center ;
}
.rescaler:hover, .grown > .rescaler, .shrunk > .rescaler:hover ~ .indicator::after {
	mask-position: center bottom;
}
.shrunk > .rescaler, .window:not(.shrunk,.grown) > .rescaler:hover ~ .indicator::after {
	mask-position: center top;
}
.grown {
	font-size: 2em;
	&.main:not(.resized,.resizing) {
		height: calc(100vh - 20em) !important;
	}
}
.closer {
	box-sizing: border-box;
	height: 1.125em;
	width: 1.125em;
	padding: 0.125em;
	position: absolute;
	top: -3.875em;
	left: -3.25em;
	background: var(--closerimg) no-repeat center/cover var(--worb);
	opacity: 0;
	cursor: var(--cur-pointer);
	user-select: none;
}
.closer:hover:not(:active) {
	opacity: 1;
	background: var(--pri);
	background-origin: content-box;
}
.closer:active, .rescaler:active {
	opacity: 1;
}
/*peeling*/
.peeler {
	display: block;
	width: 2em;
	height: 2em;
	position: absolute;
	bottom: -4.5em;
	left: -4.5em;
	background: var(--peelerimg) no-repeat center/cover;
	cursor: var(--cur-grab);
	touch-action: none;
}
.peeler::after {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	mask-image: url('images/peelerhov.png?v=2');
	mask-size: cover;
	background: var(--saors);
	opacity: 0;
	pointer-events: none;
}
.peeler:hover::after {
	opacity: 1;
}
.peeler:active {
	cursor: var(--cur-grabbing);
}
.underside {
	box-sizing: border-box;
	position: absolute;
	border: 0.125em solid var(--borw);
	width: 100%;
	height: 100%;
	z-index: 1;
	display: none;
	cursor: var(--cur-pointer);
	pointer-events: auto;
}
:is(.peeling,.peeled) .underside {
	pointer-events: auto !important;
	touch-action: none;
}
.peeling .underside {
	display: block;
	cursor: var(--cur-grabbing);
}
.underside::after {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	box-sizing: content-box;
	padding: 100vw;
	margin-top: -100vw;
	background: var(--scrollbkgimg);
	background-size: 0.5rem;
	position: absolute;
	z-index: -1;
}
.resettingPeel {
	pointer-events: none !important;
}
#log .underside {
	position: relative;
}
#log .underside::after {
	opacity: 0.75;
	background: url('images/square.png') bottom right;
/*	transform: rotate(calc(var(--angleA) * 1rad));
	transform-origin: bottom right;
	bottom: calc(100% - (var(--pointerY) * 1px));
	right: calc(100% - (var(--pointerX) * 1px));*/
}
.shrunk .underside::after {
	background-size: 0.25rem;
}
#mp3 .underside::after {
	background: var(--mp3img);
	background-size: 2.875em;
}
/*trig madness*/
:is(.peeling,.peeled).window {
	--offsetY: calc(var(--pointerY) - var(--containerY));
	--topOffsetX: calc(
		(var(--pointerX) - (var(--offsetY) / sin(var(--angleA)))) + (tan(var(--angleA)) * var(--containerY))
	);
	clip-path:
		polygon(
			calc(var(--topOffsetX) * 1px) 0,
			calc(var(--topOffsetX) * 1px) -1000em,
			1000em -1000em,
			1000em 1000em,
			calc(
				(var(--pointerX) - (var(--offsetY) / (sin(var(--angleA))))) * 1px
			) 1000em,
			calc(
				(var(--pointerX) - (var(--offsetY) / (sin(var(--angleA))))) * 1px
			) 100%
		);
}
:is(.peeling,.peeled) .underside {
	clip-path: 
		polygon(
			calc(var(--topOffsetX) * 1px) 0,
			calc(
				(var(--topOffsetX) + ((sin(var(--angleA)) * var(--topOffsetX)) / tan(var(--angleA)))) * 1px
			) calc(
				(sin(var(--angleA)) * var(--topOffsetX)) * 1px
			),
			calc(var(--pointerX) * 1px) calc(var(--pointerY) * 1px),
			calc(
				(var(--pointerX) - (var(--offsetY) / (sin(var(--angleA))))) * 1px
			) 100%
		);
	display: block;
}
.window:is(.peeling,.peeled) .window:not(.peeled,.peeling) {
	clip-path: unset;
}
.window:is(.peeling,.peeled) .window:not(.peeled,.peeling) .underside {
	display: none;
}
.bouncer {
	display: block;
	width: 1.75em;
	height: 1.75em;
	position: absolute;
	bottom: -4.375em;
	right: -2.5em;
	background: var(--bouncerimg) no-repeat center/cover;
	box-sizing: content-box;
	border-left: 0.125em solid var(--borw);
	cursor: var(--cur-pointer);
}
.bouncer::before {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: -1;
	background: conic-gradient(from -235deg, var(--sec), #fff, var(--sec), #fff, var(--sec));
	mask-image: url('images/bouncer_hov_mask.png');
	mask-repeat: no-repeat;
	mask-size: cover;
	opacity: 0;
}
.bouncer:hover::before {
	opacity: 1;
}
.bouncing {
	margin: unset !important;
	position: fixed !important;
	pointer-events: none !important;
	will-change: top, left;
	animation-play-state: paused !important;
/*	will-change: transform;*/
}
.bouncing,.bouncing *::after,.bouncing *:not(.bouncer)::before,.bouncing * {
	animation-play-state: paused !important;
}
.bouncing .underside {
	width: 0;
	height: 0;
}
.bouncing .underside::after {
	padding: 0;
}
/*.home {
	will-change: transform;
	transition: transform 2s linear;
	transform: translate3d(0px,0px,0px) !important;
	transform: translate3d(0,500px,0) !important;
}*/
body:has(.bouncing) .realinner {
	background-image: url('images/stereo_beach_alt_rm.png');
}
body:has(.bouncing) .realinner::after {
	background-image: url('images/stereo_beach2_rm.png');
}
.bouncing > .bouncer::before {
	animation: blink11 1.5s infinite steps(1);
}
.bouncing .subouter {
	pointer-events: all;
	cursor: var(--cur-pointer);
}
body:has(.bouncing) :is(.topbar,#footer) {
	opacity: 0.375;	
}
body:has(.bouncing) :is(.topbar,#footer):hover {
	opacity: 1;
}
.bouncing :is(.albumouter,.songs) img[src="images/mudlord_y2k-ver.png"] {
	content-visibility: hidden;
	height: 100%;
	background: url('images/mudlord_y2k-ver_still.png');
	background-size: cover;
	background-position: center;
}
.wincont .bouncer {
	pointer-events: none;
	display: inline-block;
	position: unset;
	vertical-align: bottom;
	height: 1.75em;
	width: 1.75em;
	border: unset;
	&::before {
		content: unset;
	}
}
.resizer {
	display: block;
	width: 1.75em;
	height: 1.75em;
	position: absolute;
	bottom: -4.375em;
	right: -4.375em;
	cursor: var(--cur-grab);
	touch-action: none;
	background: var(--saors);
	mask-image: url('images/resize_hover_mask.png');
	mask-size: cover;
	opacity: 0;
	&:active {
		cursor: var(--cur-grabbing);
	}
}
.resizer:hover {
	opacity: 1;
}
.resizing {
	transition: none !important;
}
.window:is(.initresize,.resized,.grown) {
	min-width: 1em !important;
}
.arrow {
	display: block;
	position: absolute;
	height: 1.875em;
	width: 1.75em;
	cursor: var(--cur-pointer);
	background: var(--arrowYimg) no-repeat center/cover;
}
.arrow::after {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	opacity: 0;
	mask-image: url('images/arrow_mask.png');
	mask-size: cover;
	background: var(--saors);
	pointer-events: none;
}
.arrow:hover::after {
	opacity: 1;
}
.up {
	top: -1.875em;
}
.down {
	bottom: -1.875em;
	transform: scaley(-1);
}
.scrollarea {
	display: block;
	position: absolute;
	width: 1.75em;
	right: -4.375em;
	top: -0.25em;
	height: calc(100% + 0.875em);
	background: var(--scrollbkgimg) top left repeat;
	background-size: calc(100% * (4 / 14));
	animation: scrolltunnel 2s steps(1) infinite alternate;
	user-select: none;
	touch-action: none;
}
:is(.scrollarea, .scrollareaX)::before {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	background: var(--worb75);
	position: absolute;
}
.scrollfader {
	height: 40%;
	border: 0.125em solid var(--borw35);
	cursor: var(--cur-grab);
	z-index: 1;
	position: absolute;
	width: 100%;
	background: var(--worb);
	transform: translatey(calc(150% * var(--scrollpercent)));
	touch-action: none;
	box-sizing: border-box;
}
:is(.scrollfader,.scrollfaderX):active {
	cursor: var(--cur-grabbing);
}
:is(.scrollfader,.scrollfaderX)::after {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	background: var(--fadergripimg) no-repeat center center/contain;
	opacity: 0.35;
}
.scrollfaderX::after {
	transform: rotate(90deg);
}
.scrollfader:hover,.arrow:hover ~ .scrollfader,.scrollfaderX:hover,.arrowX:hover ~ .scrollfaderX {
	border-color: var(--borw75);
}
.scrollfader:hover,.arrow:active ~ .scrollfader,.scrollfaderX:hover,.arrowX:active ~ .scrollfaderX {
	background: var(--saors);
}
.scrollfader:hover::after,.arrow:hover ~ .scrollfader::after,.scrollfaderX:hover::after,.arrowX:hover ~ .scrollfaderX::after{
	opacity: 0.75;
}
.scrollfader:active,.arrow:active ~ .scrollfader,.scrollfaderX:active,.arrowX:active ~ .scrollfaderX {
	border-color: var(--borw);
	background: var(--saors);
}
.scrollfader:active::after,.arrow:active ~ .scrollfader::after,.scrollfaderX:active::after,.arrowX:active ~ .scrollfaderX::after {
	opacity: 1;
}
.scrollareaX {
	display: block;
	position: absolute;
	background: var(--scrollbkgimg) top left repeat;
	background-size: calc(1.75em * (4 / 14));
	width: calc(100% - 0.625em);
	height: 1.75em;
	bottom: -4.375em;
	left: -0.625em;
}
.arrowX {
	display: block;
	position: absolute;
	height: 100%;
	width: 1.75em;
	background: var(--arrowXimg) var(--worb) no-repeat center/cover;
	cursor: var(--cur-pointer);
	&.left {
		left: -1.75em;
	}
	&.right {
		right: -1.75em;
		transform: scalex(-1);
	}
}
.arrowX::after {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	opacity: 0;
	mask-image: url('images/arrowX_mask.png');
	mask-size: cover;
	background: var(--saors);
	pointer-events: none;
}
.arrowX:hover::after {
	opacity: 1;
}
.scrollfaderX {
	position: absolute;
	box-sizing: border-box;
	height: 100%;
	width: 40%;
	border: 0.125em solid var(--borw35);
	cursor: var(--cur-grab);
	z-index: 1;
	background: var(--worb);
	transform: translatex(calc(150% * var(--scrollpercentX)));
	overflow: hidden;
	touch-action: none;
}
.wincont {
	width: calc(100% + 6.875em);
	margin: -2.125em 0 -2.5em -4.375em;
}
.home .wincont {
	will-change: transform;
}
:is(#playlistcheck:checked ~ #wrapper #playlist, #bio:has(#cva:checked) #cv, #bio:has(#biolonga:checked) #biolong) .wincont {
	will-change: transform;
}
#bio .window {
	position: absolute;
	min-width: 5em;
	animation: aero 8s steps(7) infinite alternate;
	display: none;
	z-index: 9;
	margin-block: 0;
}
#bio .window:hover {
	z-index: 10 !important;
}
#bio .window p {
	margin: 1em;
}
.shrunk {
	font-size: 0.5em;
	/*width: 20em;*/
	transition: font-size 0.3s linear, width 0.3s linear, height 0.3s linear;
}
.shrunk > .subouter > .shrunk {
	font-size: 1em;
}
.shrunk > .subouter > .window:not(.shrunk,.grown) {
	font-size: 2em;
}
.shrunk > .subouter > .grown {
	font-size: 4em;
}
.grown > .subouter > .shrunk {
	font-size: 0.25em;
}
.grown > .subouter > .window:not(.shrunk,.grown) {
	font-size: 0.5em;
}
.grown > .subouter > .grown {
	font-size: 1em;
}
.shrunk .gb {
	font-size: 1em !important;
}
.shrunk .gb hr {
	height: 0.125em;
}
.shrunk .gb header {
	border-bottom: 0.125em solid var(--borw);
}
.gb {
	overflow-x: hidden;
}
.gs {
	padding: 1em;
}
.gs hgroup {
	line-height: 2em;
	text-align: center;
}
.gs h3 {
	font-size: 1.5em;
}
.gs h4:first-of-type {
	animation: blink11 0.5s steps(1) infinite alternate;
	margin-top: -0.5em;
	color: var(--neut);
}
.gs h4 + h4 {
	margin-block: 1.125em;
}
.gs > a {
	display: block;
	line-height: 1.5em;
}
.gs p {
	font-size: 0.75em;
	margin-top: 2em;
}
#garagesale iframe {
	min-height: 15em;
}
#garagesalel {
	display: none;
}
.closed {
	display: none !important;
}
#warning {
	text-transform: uppercase;
	text-align: center;
	animation: appear 0.45s 1 steps(15);
	display: block;
	position: absolute;
	right: 10vw;
	top: 5rem;
	z-index: 1;
	transition: font-size 0.3s linear, width 0.3s linear, height 0.3s linear;
	&:not(.grown) {
		width: 14em;
	}
}
#warning:hover {
	z-index: 100;
}
#warning:hover h3 {
	animation: colorshift 2s steps(7,jump-none) infinite alternate;
}
#warning h3 {
	color: var(--worb);
	background: var(--borw20);
	font-size: 2em;
	margin-top: 0.75em;
	padding: 0.75em 0;
	filter: url('#distort');
	margin-inline: -0.5em;
	min-width: max-content;
}
.ex1,.ex2 {
	display: inline-block;
}
#warning p {
	padding-left: 1em;
	padding-right: 1em;
	text-align: justify;
}
#warning p span {
	color: var(--saors);
	word-wrap: break-word;
}
.ex1 {
	animation: flip steps(1) 1s infinite alternate;
}
.ex2 {
	animation: flip steps(1) 1s infinite alternate-reverse;
}
body:has(#cam2a:checked) #palantir, body:has(#cva:checked) #cv, #ref1:checked ~ .subouter #example {
	display: block;
	animation: appear 0.2s 1 linear, aero 8s steps(7) infinite alternate;
}
body:has(#biolonga:checked) #biolong {
	display: block;
	animation: appear 0.2s 1 linear;
}
#cv {
	right: calc(10% + 4.5rem);
	top: 4.75rem;
	height: 7rem;
	min-width: 8em;
	text-transform: uppercase;
}
#cv em {
	display: inline-block;
	border-bottom: 0.125em solid;
	margin-bottom: 0.25em;
}
#example {
	height: 10em;
	bottom: -4rem;
	mix-blend-mode: exclusion;
	left: 6rem;
	& img {
		height: 100%;
	}
	& > .wincont {
		background: #000;
	}
}
.dist {
	filter: url(#distort);
}
.subouter {
	display: block;
	position: absolute;
	inset: 0;
	margin: -4.5em 0 0 -4.5em;
	width: calc(100% + 9em);
	height: calc(100% + 9em);
	pointer-events: none;
}
.subouter .window {
	pointer-events: all;
}
#palantir {
	top: 3.25rem;
	width: 8rem;
	right: calc(50% - 1.5rem);
	mix-blend-mode: luminosity;
	min-width: 6em;
}
#palantir .title span {
	animation: blink13 1s steps(1) infinite alternate;
}
#palantir img {
	max-width: 34em;
}
#bio .window .wincont {
	width: calc(100% + 6.875em);
	height: calc(100% + 4.625em);
	margin-left: -4.375em;
	margin-top: -2.125em;
	overflow: scroll;
}
.wincont::-webkit-scrollbar {
  display: none;
}
#bio .window .wincont img {
	object-fit: cover;
}
figcaption {
	opacity: 0.75;
	text-align: center;
	padding: 1em;
}
.window p,.item h3,:is(#biolong, #log) li,figcaption{
	line-height: 1.5em;
}
#log:not(.resizing,.resized) .wincont {
	max-height: 75vh;
}
#log li {
	margin-bottom: 0.5em;
	max-width: 76ch;
}
li ul {
	padding-block-start: 0.5em;
	margin-inline-start: -0.25em;
}
li li {
	margin-inline-start: 2em;
	font-size: unset !important;
}
ul ul:has(.bouncer) {
	padding-bottom: 0.75em;
}
:is(#log, #biolong) li {
	text-indent: -0.75em;
}
:is(#log, #biolong) li::before {
	display: inline-block;
	content: '◼';
	color: var(--saors);
	width: 0.5em;
	margin-right: 0.25em;
	text-shadow:
		0 0.125em 0 var(--borw),
		0.125em 0.125em 0 var(--borw),
		0.125em -0.125em 0 var(--borw),
		0 -0.125em 0 var(--borw),
		0.125em 0 0 var(--borw),
		-0.125em 0 0 var(--borw),
		-0.125em -0.125em 0 var(--borw),
		-0.125em 0.125em 0 var(--borw);
}
:is(#log, #biolong) li li::before {
	content: '¶';
}
:is(#log,#projects,#contact,#biolong) em {
	font-style: italic;
}
s {
	text-decoration-color: var(--sec);
}
.emcol {
	color: var(--sec);
	filter: url(#distort);
	transform: translatey(-0.375em);
	display: inline-block;
}
.home {
	white-space: nowrap;
	z-index: 50;
	background-origin: border-box;
}
.home::after, .home::before {
	display: block;
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	height: calc(100% + 4.625em);
	width: calc(100% + 6.8em);
	margin: -2.1em 0 0 -4.3em;
	pointer-events: none;
	z-index: -1;
	transition: opacity 0.3s ease-out;
}
.home::before {
	background: url('images/tb2.png') no-repeat center/cover;
	opacity: 0;
}
.home::after {
	background: url('images/tb.png') no-repeat center/cover;
}
html {
	scrollbar-width: none;
}	
h1 .dist {
	animation: rotato 3s steps(4,jump-none) infinite;
}
h1 .title {
	animation: rotato2 3s steps(4,jump-none) infinite;
}
h1 :is(.dist,.title) {
	animation-play-state: paused;
}
h1:hover :is(.dist,.title,.title::before,.title::after) {
	will-change: transform;
	animation-play-state: running;
}
.home .title {
	z-index: 2;
	position: relative;
}
.home .title::after {
	content: 'BFN';
	position: absolute;
	left: 0;
	padding: 0 0.25em;
	background: var(--worb);
	opacity: 0;
	animation: mod1 10s steps(1) infinite alternate;
	pointer-events: none;
}
.home .title::before {
	content: 'bEN lAdEN  ';
	position: absolute;
	left: 0;
	padding: 0 0.25em;
	background: var(--worb);
	opacity: 0;
	animation: mod2 4.5s steps(1) infinite alternate;
	pointer-events: none;
	text-transform: none;
}
.wincont {
	overflow: scroll;
	-ms-overflow-style: none;
	scrollbar-width: none;
}
.window .wincont {
	height: calc(100% + 4.625em);
}
.home .wincont::-webkit-scrollbar {
  display: none;
}
nav {
	margin: 2.125em 2.25em 0;
}
#bio,#projects,#contact,#guestbook,#garagesale,#mp3,#log,#meta {
	z-index: 50;
	height: 0;
	display: none;
}
#projects .item:nth-of-type(1) {
	margin-top: 0.5em;
}
#projects .item + .item {
	padding-block-start: 0;
}
#projects .item:last-of-type {
	margin-bottom: 2em;
}
.latest {
	display: inline-block;
	padding-top: 0.25em;
	color: #959595;
}
.update {
	display: inline-block;
	font-size: 0.5em;
	margin-inline: 0 0.75em;
	padding: 0.75em;
	line-height: 1em;
	color: var(--worb);
	--pri: var(--neut);
	transform: translatey(-0.5em);
	animation: unset;
}
#bioa:checked ~ #bio,
#projectsa:checked ~ #projects,
#contacta:checked ~ #contact,
#garagesalea:checked ~ #garagesale,
#guestbooka:checked ~ #guestbook,
#mp3a:checked ~ #mp3,
#loga:checked ~ #log,
#metaa:checked ~ #meta {
	height: auto;
	animation: appear 0.2s 1 linear, aero 8s steps(7) infinite alternate;
	display: block;
}
#bioa:checked ~ .home #biol .navtxtouter::before,
#projectsa:checked ~ .home #projectsl .navtxtouter::before,
#contacta:checked ~ .home #contactl .navtxtouter::before,
#garagesalea:checked ~ .home #garagesalel .navtxtouter::before,
#guestbooka:checked ~ .home #guestbookl .navtxtouter::before,
#mp3a:checked ~ .home #mp3l .navtxtouter::before,
#loga:checked ~ .home #logl .navtxtouter::before,
#metaa:checked ~ .home #metal .navtxtouter::before {
	background-position-y: bottom;
}
#connectionspeed::before {
	display: inline;
	cursor: text;
	content: counter(bitrate);
	animation: bitrate 4s linear infinite alternate;
	counter-reset: bitrate 1;
}
#servertemp::before {
	display: inline;
	cursor: text;
	content: counter(servertemp);
	animation: servertemp 2s linear infinite alternate;
	counter-reset: servertemp 95;
}
.message {
	background: var(--worb75);
	font-family: '3x3',monospace;
	text-align: center;
	width: 100%;
	margin: 0 auto;
	top: 6em;
	position: absolute;
	display: grid;
	padding-top: 0.5em;
	z-index: 9;
}	
#screen {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	border-bottom: 0.125em solid #000;
}
.spacer {
	background: linear-gradient(var(--worb75), var(--worb75)), url('images/square.png') top center;
	display: grid;
	grid-template-rows: 1fr 1fr;
	justify-content: end;
	.albumouter &:first-of-type {
		min-width: 1em;
	}
}
.spacer label {
	color: var(--borw);
	user-select: none;
	display: grid;
	grid-template-rows: 4em 1fr;
	align-content: end;
	max-width: 10em;
}
.spacer label span {
	padding: 0.375em;
	transform: translatey(0.75em);
}
.spacer label:hover span {
	background: rgba(255,255,255,0.7);
	color: #000;
}
#cam2a:checked ~ .spacer #cam2l span,
#cva:checked ~ .spacer #cvl span,
#grida:checked ~ .albumouter #gridl span,
#lista:checked ~ .albumouter #listl span {
	background: rgba(255,255,255,0.75);
	color: #000;
	outline: 0.125em solid var(--borw);
}
.icon {
	width: 4em;
	display: grid;
	grid-template-columns: 1fr;
	justify-content: center;
	align-content: center;
	text-align: center;
	margin-inline: 1em;
	margin-block-start: -0.625em;
}
#playlist .icon:nth-of-type(2) {
	margin-block-start: -0.75em;
}
#off1, #off2, #off3 {
	position: absolute;
}
#off1 {
	z-index: 30;
	right: 50vw;
	top: 12rem;
	height: 12em;
	animation: appearclear 0.5s 1 steps(15);
	opacity: 0.6;
}
.realinner {
	background: url('images/stereo_beach_alt.gif') no-repeat center/cover;
	height: calc(100% + 4.625em);
	width: calc(100% + 6.875em);
	margin: -2.125em 0 0 -4.375em;
	position: relative;
}
.realinner::after {
	content: "";
	display: block;
	height: 100%;
	background: url('images/stereo_beach2_op.gif') no-repeat center/cover;
	transition: opacity 0.6s steps(6);
	opacity: 0;
}
.realinner,.imgcontainer,#footer {
	image-rendering: pixelated;
	image-rendering: crisp-edges;
}
#off2 {
	width: 13em;
	height: 4em;
	z-index: 0;
	left: calc(50vw + 6rem);
	top: 30rem;
	mix-blend-mode: color-burn;
	animation: appearclear 0.4s 1 steps(7);
	opacity: 0.6;
}
#off2 p {
	opacity: 0.2;
	font-size: 0.8125em;
}
#cube {
	position: absolute;
	height: 3em;
	width: 5em;
	min-width: unset;
	transform: skewY(3.5deg);
	border-image: unset;
	border-color: rgba(0,0,0,0);
	box-shadow: none;
	opacity: 0.625;
	top: 55rem;
	left: 12vw;
	animation: none;
	background-color: rgba(0,0,0,0);
}
#cube::after {
	background: url('images/cube_unmask.png') center top no-repeat;
}
#cube.moving::before {
	animation: colorturn 4s steps(39) infinite alternate;
}
#cube::before {
	background: url('images/cube_ss.png') center top no-repeat;
	opacity: 0;
	transition: opacity 0.5s steps(9);
}
#cube::after,#cube::before {
	content: '';
	display: block;
	pointer-events: none;
	background-size: cover;
	position: absolute;
	top: -26.8em;
	width: 16.75em;
	aspect-ratio: 200 / 407;
	left: -5.6125em;
	transform: skewY(-3.5deg);
}
#cube .rescaler,#cube .indicator::after {
	opacity: 0;
}
.biolower {
	padding-inline: 2.5em;
}
#bioimg {
	width: 15em;
	height: 15em;
	background: url('images/bio.png') center top no-repeat var(--saors);
	background-size: cover;
	animation: glitch 8s steps(1) infinite alternate;
	transition: filter 0.5s steps(3);
	border-inline: 0.125em solid var(--borw);
	opacity: 0.9;
}
.obfus {
	height: 5.625em;
	margin-top: -2em;
	transform: translate(0,2.5em);
}
#warning h3 {
	font-family: 'archaic', monospace;
}
.obfus span {
	cursor: var(--cur-pointer);
}
.obfus nav {
	transform: translateY(75em);
	margin-top: 0em;
	padding-bottom: 1.5em;
}
li::marker {
	display: none;
}
dialog .window {
	margin: 0;
	animation: none;
}
dialog {
	border: none;
	padding: 0;
	outline: none !important;
	overflow: hidden;
}
dialog::backdrop {
	background: var(--borw35);
}
#system {
	position: fixed;
	z-index: 9999;
	display: none;
	justify-content: center;
	align-content: center;
	width: 100lvw;
	height: 100lvh;
	pointer-events: none;
}
#system::before {
	content: '';
	display: block;
	z-index: -1;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--borw35);
	pointer-events: none;
}
#system .wincont {
	padding: 1em 2.25em;
	box-sizing: border-box;
}
#system .window {
	position: absolute;
	min-width: 1em;
	height: 12em;
	animation: none;
	pointer-events: all;
	z-index: 0;
	transition: font-size 0.3s linear, width 0.3s linear, height 0.3s linear;
	&:not(.grown) {
		width: 12em;
	}
}
#system .wincont > h3 {
	margin: 0 0 0.25em 0.125em;
	display: inline-block;
	white-space: nowrap;
}
#sysa:checked ~ #system {
	display: grid !important;
	justify-items: center;
	align-items: center;
}
.bug {
	margin-top: 0.25em;
	color: var(--sec);
}
#system .bug {
	font-size: 0.5em;
	margin: 0.25em auto 1em 0.25em;
	font-family: '3x3', monospace;
}
.status {
	margin: 0 0 0.5em 0;
}
.benos {
	display: inline-block;
	aspect-ratio: 42 / 7;
	height: 0.875em;
	background-image: url('images/benos.png?v=3');
	background-position: center top;
	background-size: cover;
	#system & {
		margin-inline-start: -0.125em;
	}
}
.fineprint {
	margin-top: 8em;
	max-width: 76ch;
	min-width: fit-content;
	& img {
		width: unset;
		margin: unset;
		filter: invert();
		user-select: none;
		pointer-events: none;
	}
	& p{
		text-align: left;
		line-height: 1.5lh;
		margin-inline-start: 10.5em;
		margin-block-end: 1.5lh !important;
	}
	& h3 {
		display: inline-block;
		font-size: 0.5em;
		font-family: 'archaic', monospace;
		padding-block: 0.5625lh;
		margin-inline: 0;
		margin-block: 4em 12em;
		text-transform: uppercase;
		filter: url(#distort);
		transform: translate(-1rem, -1rem) scale(8);
		transform-origin: left;
	}
	& :is(p,h3,span)::selection {
		background: var(--pri);
	}
}
:is(#contact, #biolong) p span:first-of-type {
	font-family: 'archaic', monospace;
	font-size: 2em;
	float: left;
	margin: 0 0.25em 0 0;
	color: var(--worb);
	background: url('images/square.png') no-repeat center;
	padding: 0.625em 0.375em;
	width: 0.75em;
	border: 0.0625em solid var(--borw);
	text-shadow: 0 0 0.5em var(--borw);
}
.window button,input[type="submit"],#biolongl,.linkbutt {
	padding: 0.5em;
	border: 0.125em solid var(--borw);
	box-shadow: 0 0.25em 0 var(--borw20);
	user-select: none;
}
:is(.window button,input[type="submit"],#biolongl,.linkbutt):active {
	transform: translatey(0.25em);
	box-shadow: none;
}
.linkbutt {
	width: fit-content;
	margin-inline: auto;
	margin-top: 1.5em;
	--pri: var(--sec);
}
#stolen {
	display: block;
	width: 4em;
	aspect-ratio: 1 / 1;
	position: relative;
	margin: 0 auto 0.875em 0;
	position: relative;
}
#stolenimg {
	width: 100%;
	height: 100%;
	inset: 0;
	background: url('images/stolen.png') no-repeat top / cover;
}
.stolencool {
	width: 4.125em;
	height: 4.25em;
	position: absolute;
	inset: -0.125em;
	background: url('images/stolencool.png') no-repeat top / cover;
	z-index: calc(infinity);
	opacity: 0;
}
.cover {
	position: fixed;
	inset: 0;
	display: block;
	width: 100vw;
	height: 100vh;
	background: var(--worb);
	opacity: 0;
	z-index: 9999;
	pointer-events: none;
	animation: cursorhand 1.2s linear infinite alternate;
}
#stolencoolcheck:checked ~ div .stolencool {
	opacity: 1;
}
.stolencool::after {
	opacity: 0;
}
#stolen {
	--now: 'NOW\000A\000DSAFE...';
	--not: 'NOT\000A\000DSAFE...';
}
#stolencoolcheck:checked ~ div .stolencool::after {
	content: var(--now);
	display: block;
	font-size: 2em;
	animation: afterscrn 6s 1s steps(1) 1 forwards, wakeup 1 1s 1s steps(3) forwards;
	margin-left: 2.5em;
	margin-top: 1em;
	filter: url('#distort');
	line-height: 1.25em;
}
@keyframes afterscrn {
	0% {content: var(--not);}
	35% {content: var(--now);}
	38% {content: var(--not);}
	77% {content: var(--now);;}
	78% {content: var(--not);}
	79% {content: var(--now);;}
	83% {content: var(--not);}
	100% {content: var(--now);;}
}
#stolencoolcheck:checked ~ div .cover {
	opacity: 1;
	pointer-events: auto;
}
#system .window:has(#stolencoolcheck:checked) {
	clip-path: unset;
}
#spatter {
	display: block;
	aspect-ratio: 36 / 25;
	width: 11.25em;
	margin-block: -2em -4em;
	background: var(--pri);
	mask-image: url('images/spatter.png');
	mask-position: center top;
	mask-size: cover;
	mix-blend-mode: multiply;
	pointer-events: none;
}
#sig {
	display: inline-block;
	height: 1.5lh;
	margin-block-end: 0;
	margin-inline-start: 40ch;
	filter: url(#distort);
}
#mp3 {
	height: 6.5em;
}
#mp3 p {
	margin-bottom: 0;
}
#mp3 a {
	cursor: var(--cur-pointer);
	padding-left: 0;
	position: relative;
}
#mp3 a::before {
	display: inline-block;
	content: '';
	height: 2em;
	width: 2.9em;
	margin-right: 0.5em;
	transform: translatey(0.5em);
	background: var(--mp3img) no-repeat top;
	background-size: cover;
	margin-left: -0.25em;
}
.removed {
	transition-behavior: allow-discrete;
	transition: opacity 0.3s steps(3), height 0.3s linear 0.3s;
	pointer-events: none;
	color: #fff0;
	user-select: none;
}
.removed span {
	display: none !important;
}
.removed::before {
	margin-block: 0.0625em;
	opacity: 0;
}
#mp3 a.removed::before {
	width: 15em;
}
.removed::after {
	content: 'RESTORED to "Trax"';
	color: var(--worb);
	background: var(--neut);
	margin-left: unset;
	padding-inline: 1em;
	position: absolute;
	inset: 0;
	width: fit-content;
	animation: unset;
}
.obfus a {
	opacity: 0.4;
}
.obfus a:hover {
	opacity: 1;
}
.binnotice {
	padding: 2em 3.25em;
	line-height: 1.5em;
	color: var(--worb);
	background: var(--borw35);
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
}
.bin {
	background: var(--worb);
	width: 2.75em;
	font-size: 2em;
	aspect-ratio: 11 / 16;
	mask-image: url('images/bin.png');
	mask-repeat: no-repeat;
	mask-size: cover;
}
.binnotice p {
	padding-left: 2em;
	margin-top: 1em;
}
.binnotice span {
	font-family: 'archaic', monospace;
	font-size: 2em;
	float: left;
	padding: 0.375em;
	margin: 0 0.25em 0 -0.375em;
	border: 0.125em solid #fff;
}
.binnotice button {
	text-align: left;
	line-height: 1.25lh;
}
.binnotice :is(button,button:hover) {
	border-color: var(--worb) !important;
	color: var(--worb);
	margin-top: 1em;
	box-shadow: 0 0.25em 0 #0004 !important;
}
.binnotice button:hover {
	background-color: var(--borw35);
}
.binnotice button:active {
	box-shadow: none !important;
}
#mp3 .item {
	padding-block: 0.25em 1.5em;
	padding-inline: 2.5em 0;
}
#c::after {
	content: 'copy''\A0''\A0''\A0';
	background: var(--worb);
	margin-left: -6.25em;
	opacity: 0;
	animation: mod1 7s steps(1) infinite;
	pointer-events: none;
	padding: 0.125em;
}
#ia::after {
	content: 'ia';
	background: var(--worb);
	margin-left: -2ch;
	opacity: 0;
	animation: mod1 10s steps(1) infinite;
	pointer-events: none;
}
#face {
	display: block;
	cursor: var(--cur-pointer);
	width: 1.125em;
	height: 1.125em;
	position: absolute;
	top: -3.875em;
	left: -3.25em;
}
#face label {
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	inset: 0;
}
.f1 {
	pointer-events: none;
}
.f2,.f3 {
	background: url('images/face.png') no-repeat;
	background-size: 1.125em;
}
.f3 {
	background-position-y: -2.25em;
	animation: strobe 30ms steps(1) infinite alternate;
}
#face:has(.f1 input:checked) :is(.f2,.f3) {
	opacity: 0;
}
#face:has(.f4 input:checked) .f3 {
	opacity: 1;
}
:is(#face, h1 .title) label:has(:checked) {
   & ~ label {
        opacity: 0;
    }
    &:not(:first-child) {
        pointer-events: none;
        ~ label { pointer-events: none; }
    }
    &:first-child {
        ~ label { pointer-events: auto; }
    }
}
.home .closer {
	pointer-events: none;
}
.home:has(#face label:active) .closer {
	opacity: 1;
}
.home:has(#face label:active) #face label {
	opacity: 0;
}
.home:has(.f4 input:checked) #leaf {
	left: -2.75em;
}
.home:has(.f1 input:checked) #face:hover:not(:active) {
	background: var(--pri);
}
.f4 {
	opacity: 0;
}
.sep {
	display: block;
	font-size: 2em;
	text-align: center;
	padding-block: 1em 0.5em;
}
.flutter {
	animation: b2c 0.1s steps(2) infinite alternate;
}
#footer {
	color: var(--bors);
	height: 3em;
	width: 100%;
	display: grid;
	grid-template-columns: 1fr 8fr;
	background: var(--worb75);
	z-index: 1000;
	border-top: 0.125em solid var(--borw20);
	position: fixed;
	bottom: 0;
	font-size: 1em;
	user-select: none;
	line-height: 1.5em;
	transition: height 0.05s linear, background-color 0.3s steps(6), opacity 0.3s linear;
}
#footertop {
	height: 0;
	opacity: 0;
	pointer-events: none;
	transition: height 0.05s linear, background-color 0.3s steps(6);
	margin-block-end: 0.125em;
}
#footerbottom {
	height: 3em;
	display: grid;
	grid-template-columns: auto 1fr auto;
}
#orbouter {
	display: grid;
	align-content: center;
	justify-content: right;
}
#orb {
	display: block;
	background: url('images/orb.png') no-repeat top/cover;
	width: 2.5em;
	height: 2.5em;
	animation: orb 1s steps(8,jump-none) infinite alternate;
	margin: auto 2em;
	position: relative;
}
#orb::after {
	content: '';
	display: block;
	pointer-events: none;
	width: 100%;
	height: 100%;
	background: url('images/orb_face.png') no-repeat top/cover;
	animation: orb 1s steps(8,jump-none) infinite alternate;
	opacity: 0;
	transition: opacity 0.5s steps(2);
}
#orb:hover::after {
	opacity: 1;
}
#orbspeak {
	position: relative;
	box-sizing: border-box;
	height: fit-content;
	width: fit-content;
	display: grid;
	user-select: text;
	line-height: 0.75lh;
	overflow-wrap: anywhere;
	border-width: 0.25em 0.375em 0.625em 0.5em;
	border-image: var(--bubbleimg);
	border-image-slice: 2 3 5 4 fill;
	border-style: solid;
	padding: 0.25em;
	padding-inline-start: 0.125em;
	margin-block-start: -0.125em;
	margin-inline-end: 0.5em;
}
output::after {
	display: inline-block;
	content: "▊";
	padding-left: 0.125em;
	color: var(--saors-clr);
	animation: blink13 0.5s steps(1) infinite alternate;
	transform: translatey(-0.125em);
}
#footertoga:checked ~ #footer,#footer:has(label:focus-visible) {
	height: 9em;
	& :is(#systog,#poltog,#reset) {
		display: grid;
		transform: unset;
		opacity: 1 !important;
		position: relative !important;
		width: unset !important;
	}
}
:is(.topbar,#footer) :is(label, button):focus-visible::before {
	opacity: inherit;
}
#footertoga:checked ~ #footer #lowerreveal,#footer:has(label:focus-visible) #lowerreveal {
	opacity: 1;
}
#footertoga:checked ~ #footer #footertop,#footer:has(label:focus-visible) #footertop {
	height: 6em;
	opacity: 1;
	pointer-events: all;
}
#footertoga:checked ~ #footer #orb,#footer:has(label:focus-visible) #orb {
	transform: scale(2);
}
#footertoga:checked ~ #footer #orb::after,#footer:has(label:focus-visible) #orb::after {
	opacity: 1;
}
.version {
	padding-inline: 1em;
	display: grid;
	align-content: center;
}
#lowerreveal {
	display: flex;
	column-gap: 0.5em;
}
#clock,#lowerreveal label {
	display: grid;
	align-content: center;
}
#lowerreveal label {
	box-sizing: border-box;
	color: var(--worb);
	background: var(--pri);
	padding: 0 1em;
	width: fit-content;
	height: 100%;
	position: relative;
	&::before {
		top: calc(-100% + 1.5em); 
	}
	&#poltog::before {
		top: calc(-100% - 0.5em); 
	}
}
/*styled tooltipz*/
:where(#footer, .topbar) :is(label, button) {
	position: relative;
}
:where(#footer, .topbar) :is(label, button)::before {
	content: attr(data-title);
	white-space: nowrap;
	font-size: 0.5em;
	display: grid;
	align-content: center;
	position: absolute;
	top: -100%;
	left: calc(50% - 0.25em);
	padding-inline: 0.125em;
	font-family: '3x3', monospace;
	color: var(--bors);
	border-style: solid;
	margin-block-start: -0.125rem;
	margin-inline-end: 0.5rem;
	opacity: 0;
	pointer-events: none;
	z-index: calc(infinity);
}
.topbar :is(label, button)::before {
	border-image: var(--bubbleimg-down);
	border-image-slice: 5 3 2 4 fill;
	border-width: 0.625rem 0.375rem 0.25rem 0.5rem;
	bottom: -3.5em;
	top: calc(100% + 0.25em);
}
#playlisttog::before {
	top: calc(100% + 0.6875em);
	padding-block: 1em;
}
.topbar :is(label, button):hover::before {
	opacity: 1 !important;
}
.play #playpause::before {
	content: 'Pause';
}
#footer :is(label, button)::before {
	border-image: var(--bubbleimg);
	border-image-slice: 2 3 5 4 fill;
	border-width: 0.25rem 0.375rem 0.625rem 0.5rem;
}
label#orb::before {
	left: 100%;
	top: calc(-100% + 0.75em);
}
#footer:not(#footertoga:checked ~ div) #orb:hover::before {
	opacity: 1;
}
#lowerreveal label:hover {
	&:not(#orb) {
		background: var(--saors);
	}
	&::before {
		opacity: 1;
	}
}
/*don't scroll when swiping off closer buttons to freeze bounce*/
#systog,#reset,#bio .closer,#bio:has(#palantir.bouncing) #cam2l,#bio:has(#cv.bouncing) #cvl,#biolongl,#playlisttog,#systog {
	touch-action: none;
}
#systog, #poltog, #reset {
	transform: scaley(0);
	transform-origin: bottom;
	transition: transform 0.05s linear, color 0.3s steps(4);
	transition-behavior: allow-discrete;
}
#footertoga:not(:checked,input ~ #footer:has(label:focus-visible)) ~ #footer :is(#systog, #poltog, #reset) {
	opacity: 0;
	position: absolute;
	width: 0;
}
#footertoga:is(:checked, input ~ #footer:has(label:focus-visible)) ~ #footer {
	& .version {
		overflow: hidden;
	}
}
#poltog {
	border-radius: 3em 3em 0 0;
	transition: background-color 0.3s linear, transform 0.05s linear;
	transition-behavior: allow-discrete;
}
#moon {
	display: block;
	margin: auto;
	width: 2em;
	aspect-ratio: 1 / 1;
	background: url('images/moon_phases.png') no-repeat center bottom/cover;
	transition: background-position 0.5s steps(9,jump-none);
	position: relative;
	transform: translatey(-0.5em) scale(2);
}
#moon:hover {
	background-position-y: bottom;
}
#moon::before {
	content: '';
	display: block;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	background-color: var(--pri);
	mask-image: url('images/moon_ring.png');
	mask-repeat: no-repeat;
	mask-size: cover;
	mask-position: center bottom;
	z-index: 1;
	transition: background-color 0.3s linear;
}
#poltog:hover #moon::before {
	background-color: var(--saors);
}
#moon::after {
	content: '';
	display: block;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	background: url('images/moon_face.png') no-repeat center top/cover;
	opacity: 0.5;
}
#poltog:active #moon::after {
	background-position-y: bottom;
}
body:has(#poltoga:checked) #moon {
	background-position-y: top;
}
label#fullscreen {
	margin-left: auto;
	background: #0000;
	box-shadow: unset;
	transition: color 0.3s steps(4);
}
#fullscreen,#poltog {
	font-family: 'archaic';
	width: unset !important;
	padding-inline: 1em;
}
#fullscreen span {
	pointer-events: none;
	display: block;
	width: 1.625em;
	aspect-ratio: 1 / 1;
	background: var(--borw);
	mask-image: url('images/fullscreen.png');
	mask-size: cover;
	mask-position: center top;
	transition: mask-position 1s steps(3,jump-none);
}
#fullscreen.full span {
	mask-position: center bottom;
}
#fullscreen:hover {
	background: var(--borw35) !important;
	& span {
	background: var(--worb);
	}
}
#clock {
	padding: 0 0.5em;
	text-align: right;
	justify-self: end;
	transition: color 0.3s steps(4);
	text-shadow: 
		0.0625em 0.0625em 0 #000,
		0.125em 0.125em 0 var(--worb);
	color: var(--worb);
	filter:
		drop-shadow(0 0.125em 0 var(--bors))
		drop-shadow(0 -0.125em 0 var(--bors))
		drop-shadow(0.125em 0 0 var(--bors))
		drop-shadow(-0.125em 0 0 var(--bors));
}
input[type=checkbox],input[type=radio] {
	display: none;
}
::selection {
	background: var(--saors);
	color: var(--worb);
}
:focus-visible {
	outline: 0.25rem solid var(--sec);
	outline-offset: -0.25rem;
}
nav label:focus-visible {
	outline-offset: 0;
}
#log .notice p {
	font-size: 1em;
}
.notice p::selection {
	background: var(--pri);
}
#fps {
	display: block;
	position: fixed;
	padding: 0.25em;
	z-index: calc(infinity);
	border: 0.125em solid var(--saors);
	color: var(--saors);
	background: #000;
	bottom: 3.125em;
	right: 0;
	opacity: 0.75;
	pointer-events: none;
}
#fakemouse {
	display: none;
	background: url(images/cur_default.png) no-repeat center/contain;
	width: 1.375em;
	height: 2em;
	position: fixed;
	inset: 0;
	z-index: calc(infinity);
	pointer-events: none;
	--x: 50vw;
	--y: 50vh;
	--z: 0.1px;
	transform: translate3d(var(--x),var(--y),var(--z));
	transition: transform 0.25s ease-out, opacity 0.1s linear;
	:is(.bodymoving, .bodypeeling) & {
		transition: unset;
	}
	body:has(#poltoga:checked) & {
		background-image: url(images/cur_default2.png);
	}
/*	body:has(:is(.grip, .resizer, .peeler, .scrollfader, .scrollfaderX):hover) & {
		background: url('images/cur_grab.png') !important;
		width: 2em;
		height: 2em;
		inset: -1em;
		html:has(#poltoga:checked) & {
			background: url('images/cur_grab2.png') !important;
		}
	}*/
	:is(.bodymoving,.bodypeeling) & {
		opacity: 1 !important;
		background: url('images/cur_grabbing.png') !important;
		width: 2em;
		height: 2em;
		inset: -1em;
		html:has(#poltoga:checked) & {
			background: url('images/cur_grabbing2.png') !important;
		}
	}
}
:is(.js-loading, body:has(#stolencoolcheck:checked)) #fakemouse {
	opacity: 0;
}
/*End elements*/

/*Begin keyframes*/
@keyframes wakeup {
	0% {opacity: 0;}
	100% {opacity: 1;}
}
@keyframes appear {
	0% {transform: translate3d(0,3em,0); opacity: 0;}
	100% {transform: translate3d(0,0,0); opacity: 1;}
}
@keyframes appearclear {
	0% {transform: translate3d(0,3em,0); opacity: 0;}
	100% {transform: translate3d(0,0,0); opacity: 0.6;}
}
@keyframes flash {
	0% {background: var(--pri); color: var(--worb); border-color: var(--worb); border-width: 0.25em; margin-left: 0.75em;}
	75% {border-color: var(--worb);}
	100% {background: #0000; color: var(--pri); border-color: #0000; border-width: 0.75em; margin-left: 0.25em;}
}
@keyframes glitch {
	0% {background-position-y: 0;}
	35% {background-position-y: -15em;}
	38% {background-position-y: 0;}
	77% {background-position-y: -30em;}
	78% {background-position-y: 0;}
	79% {background-position-y: -30em;}
	82% {background-position-y: -15em;}
	89% {background-position-y: 0;}
	97% {background-position-y: -15em;}
	100% {background-position-y: 0;}
}
@keyframes scrolltunnel {
	0% {background-position-y: 0;}
	50% {background-position-y: 0.125em;}
}
@keyframes blink11 {
	0% {opacity: 1;}
	50% {opacity: 0;}
}
@keyframes colorfix {
	0% {color: var(--sec)}
	50% {color: var(--worb);}
}
@keyframes blink13 {
	0% {opacity: 1;}
	75% {opacity: 0;}
}
@keyframes flip {
	0% {transform: scale(1,1);}
	50% {transform: scale(1,-1) translatey(0.125em);}
}
@keyframes colorshift {
	0% {background-color: var(--pri);}
	100% {background-color: var(--saors);}
}
@keyframes strobe {
	0% {background-position-y: -1.125em;}
	50% {background-position-y: -2.25em;}
}
@keyframes mod1 {
	0% {opacity: 0;}
	25.5% {opacity: 1;}
	27% {opacity: 0;}
	50% {opacity: 1;}
	50% {opacity: 0;}
	60% {opacity: 1;}
	60.5% {opacity: 0;}
	62% {opacity: 1;}
	64% {opacity: 0;}
	86% {opacity: 1;}
	87% {opacity: 0;}
	95% {opacity: 1;}
	96% {opacity: 0;}
}
@keyframes mod2 {
	0% {opacity: 0;}
	50% {opacity: 1;}
	51.5% {opacity: 0;}
}
@keyframes music {
	0% {content: '♪♫';}
	50% {content: '♫♪';}
}
@keyframes bitrate {
	0% {counter-increment: bitrate 3;}
	33.3% {counter-increment: bitrate 4;}
	66.7% {counter-increment: bitrate 5;}
	87% {counter-increment: bitrate 2;}
}
@keyframes servertemp {
	0% {counter-increment: servertemp 3;}
	33.3% {counter-increment: servertemp 4;}
	66.7% {counter-increment: servertemp 6;}
	87% {counter-increment: servertemp 2;}
}
@keyframes aero {
	0% {background-color: var(--worb95);}
	50% {background-color: var(--worb75);}
	100% {background-color: var(--worb95);}
}
@keyframes orb {
	0% {background-position-y: 0%;}
	100% {background-position-y: bottom;}
}
@keyframes scanlines {
	0% {background-position-y: 0;}
	100% {background-position-y: 191%;}
}

@keyframes strip {
	0% {transform: translatex(0);}
	100% {transform: translatex(-16.25em);}
}
@keyframes upanddown {
	0% {object-position: center;}
	25% {object-position: top;}
	75% {object-position: bottom;}
	100% {object-position: center;}
}
@keyframes colorturn {
	0% {opacity: 0;}
	100% {opacity: 0.5;}
}
@keyframes chrono {
	100% {background-position-y: bottom;}
}
@keyframes fiveoh {
	0% {background: var(--pri);}
	33.3% {background: var(--worb);}
	66.7% {background: var(--sec);}
	100% {background: var(--worb);}
}
@keyframes sat {
	0% {filter: grayscale(0.5);}
	100% {filter: grayscale(0.25);}
}
@keyframes website {
	33% {content: 'web page';}
	66% {content: 'home\00ad page';}
}
@keyframes b2c {
	0% {color: var(--borw)}
	100% {color: var(--sec)}
}	
@keyframes rotato {
	100% { transform: translatex(3rem); }
}
@keyframes rotato2 {
	100% { transform: translatex(-3rem); }
}
@keyframes totop {
	100% { background-position-y: top; }
}
@keyframes totopmask {
	100% { mask-position: center top; }
}
/*End imports & keyframes*/

/*Begin media queries*/
@media (hover: none) {
	.rescaler:not(:active):hover {
		.shrunk & {
			mask-position: center top;
		}
		mask-position: center center;
		.grown & {
			mask-position: center bottom;
		}
		& ~ .indicator {
			opacity: 0;
		}
	}
}
@media (hover: hover) {
	#fakemouse {
		visibility: hidden;
	}
}
@media (prefers-reduced-motion: reduce) {
	#guy::after {
		opacity: 1;
		animation: unset;
	}
	.loading *:not(#l21) {
		animation: unset !important;
	}
	.loading p {
		color: var(--sec);
	}
	@keyframes rotate {}
	#ellipsis::after {
		content: ' . . . ';
		animation: unset;
	}
	*,*::after,*::before {
		transition: unset !important;
	}
	#orb,#orb::after {
		animation: unset;
		background-position-y: -17.5em;
	}
	@keyframes aero {}
	@keyframes appear {}
	@keyframes appearclear {}
	@keyframes flash {}
	@keyframes glitch {}
	@keyframes scrolltunnel {}
	@keyframes blink11 {}
	@keyframes blink13 {}
	@keyframes flip {}
	@keyframes colorshift {}
	@keyframes strobe {}
	@keyframes mod1 {}
	@keyframes mod2 {}
	@keyframes music {}
	@keyframes bitrate {}
	@keyframes servertemp {}
	@keyframes scanlines {}
	@keyframes strip {}
	@keyframes chrono {}
	@keyframes fiveoh {}
	@keyframes sat {}
	@keyframes upanddown {}
	@keyframes website {}
	@keyframes b2c {}
	@keyframes rotato {}
	@keyframes rotato2 {}
	@keyframes totop {}
	@keyframes totopmask {}
	#biolong img {
		filter: grayscale(0.5);
	}
	#cube.moving::before {
		animation: colorturn 0s steps(1) 1 forwards;
	}
	.realinner {
		background-image: url('images/stereo_beach_alt_rm.png');
	}
	.realinner::after {
		background-image: url('images/stereo_beach2_rm.png');
	}
	.ex1 {
		transform: scale(1,-1) translatey(0.125em);
	}
	#palantir .wincont {
		position: relative;
	}
	#palantir .wincont::after {
		content: '';
		width: 100%;
		aspect-ratio: 181 / 136;
		position: absolute;
		top: 0;
		background: url('images/roller_rm.gif') no-repeat center/cover;
	}
	#dis {
		display: inline;
	}
	#ena {
		display: none;
	}
	.innermost #topbartog {
		background: var(--sec);
	}
	.bouncer {
		pointer-events: none;
		opacity: 0.5;
	}
	:is(.expleft,.albumouter,.songs) img[src="images/mudlord_y2k-ver.png"] {
	content-visibility: hidden;
	height: 100%;
	background: url('images/mudlord_y2k-ver_still.png');
	background-size: cover;
	background-position: center;
	background-clip: padding-box;
	}
	#cam2l:hover .icongraphic, #cam2a:checked ~ .spacer #cam2l .icongraphic {
		&::after, &::before {
			opacity: 1;
		}
	}
}
@media only screen and (max-width: 448px) {
	body {
		font-size: 3.5vw;
	}
}
@media only screen and (max-width: 580px) {
	#footertoga:checked ~ #footer {
		& #footerbottom { 
			grid-template-columns: 1fr auto;
		}
		& .version {
			display: none;
		}
	}
}
/*End media queries*/