body {background-image:none;animation:none}
/*
██ ███    ██ ████████ ██████   ██████  
██ ████   ██    ██    ██   ██ ██    ██ 
██ ██ ██  ██    ██    ██████  ██    ██ 
██ ██  ██ ██    ██    ██   ██ ██    ██ 
██ ██   ████    ██    ██   ██  ██████  
*/
/* Preload box - preloads stuff that we need HERE and NOW */
#preload {
	z-index:0;
	position:fixed;
	top:0;
	left:0;
	width:1px;
	height:1px;
	overflow:hidden;
	opacity:0;
	pointer-events:none
}
/* Intro content */
#intro {
	z-index:65536;
	position:absolute;
	background-color:#000;
	top:0;
	left:0;
	display:grid;
	grid-template-rows:auto 1fr 1fr;
	margin:auto;
	align-items:center;
	width:100vw;
	height:100vh;
}
/* Entry buttons */
#desk-link,#button-link {cursor:pointer;user-select:none}
#desk-link {
	display:block;
	margin:auto;
	width:512px;
	height:512px;
	background-image:url("/img/mat/thedeskglow.gif"),url("/img/mat/thedesk.gif");
	background-size:100% 100%;
	&.flicker {animation:desk-flicker 3s step-end infinite alternate}
}
	/* Flicker animation */
	@keyframes desk-flicker {
		0% {background-image:url("/img/mat/thedeskglow.gif"),url("/img/mat/thedesk.gif")}
		44% {background-image:url("/img/mat/thedesk_dark.gif")}
		45% {background-image:url("/img/mat/thedeskglow.gif"),url("/img/mat/thedesk.gif")}
		47% {background-image:url("/img/mat/thedesk_dark.gif")}
		51% {background-image:url("/img/mat/thedeskglow.gif"),url("/img/mat/thedesk.gif")}
		100% {background-image:url("/img/mat/thedeskglow.gif"),url("/img/mat/thedesk.gif")}
	}
	/* Resize desk image on small screens */
	@media screen and (width <= 512px) {#desk-link {width:80%;height:auto;aspect-ratio:1/1;margin-top:24px}}

#button-link {
	display:block;
	width:max-content;
	margin:auto;
	background-image:url("/img/mat/blue.gif");
	padding:10px;
	border-radius:10px;
	font-family:SourceSerif4,serif;
	font-size:1.5em;
	font-weight:bold;
	letter-spacing:5px;
	text-shadow:0 0 2px #fff;
	border:5px solid #000;
	&:hover {border:5px solid #fff;text-shadow:0 0 4px #fff}
	&.loading {filter:brightness(75%)}
}

/* Webcomic box */
#webcomicwebring {
	align-self:self-start;
	border:5px double #a7a7a71f
}

/*
██   ██ ██    ██ ███████ ██    ██ 
██   ██ ██    ██ ██       ██  ██  
███████ ██    ██ █████     ████   
██   ██ ██    ██ ██         ██    
██   ██  ██████  ███████    ██    
*/
/* Host */
#HUEY {
	display:grid;
	grid-template-rows:56px 1fr;
	height:100vh;
	overflow:hidden;
	&.animate {animation:fade-in 1s cubic-bezier(0.00, 0.73, 0.19, 0.94);}
}
	@keyframes fade-in {
		0% {filter:brightness(0%) contrast(1000%)}
		100% {filter:brightness(100%) contrast(100%)}
	}
	/* Failsafe to make HUEY uninteractable while the intro element is alive */
	html:has(#intro) #HUEY {pointer-events:none}

	/* Controller */
	#controller {
		position:relative;
		display:grid;
		grid-template-columns:auto auto auto 1fr;
		height:56px;
		width:100vw;
		background-image:url("/img/mat/hueyframe.png");
		background-position:center;
		background-size:100% 100%;
		& > #title { /* "HUEY" title plate */
			position:absolute;
			right:1em;
			height:50px;
			aspect-ratio:25/11;
			background-image:url("/img/mat/hueytitle.png");
			background-size:100% 100%;
			transform:rotate(20deg);
		}
		/* Themes */
		&[theme="waking"] {
			background-image:url("/img/mat/hueyframe_waking.png");
			& #power-off {background-image:url("/img/mat/hueyoffswitcha.png")}
			& #audio {background-image:url("/img/mat/hueyaudioswitcha.png")}
			& #load-indicator {background-image:url("/img/mat/hueyloadinglightb.png")}
			& #title {background-image:url("/img/mat/hueytitle.png")}
		}
		&[theme="headspace"] {
			background-image:url("/img/mat/hueyframe_headspace.png");
			& #power-off {background-image:url("/img/mat/hueyoffswitcha_headspace.png")}
			& #audio {background-image:url("/img/mat/hueyaudioswitcha_headspace.png")}
			& #load-indicator {background-image:url("/img/mat/hueyloadinglightb.png")}
			& #title {background-image:url("/img/mat/hueytitle1.png")}
		}
		&[theme="red"] {
			background-image:url("/img/mat/hueyframe_red.png");
			& #power-off {background-image:url("/img/mat/hueyoffswitcha1.png")}
			& #audio {background-image:url("/img/mat/hueyaudioswitcha1.png")}
			& #load-indicator {background-image:url("/img/mat/hueyloadinglightb.png")}
			& #title {background-image:url("/img/mat/hueytitle1.png")}
		}
		&[theme="black"] {
			background-image:url("/img/mat/hueyframe_black.png");
			& #power-off {background-image:url("/img/mat/hueyoffswitcha1.png")}
			& #audio {background-image:url("/img/mat/hueyaudioswitcha1.png")}
			& #load-indicator {background-image:url("/img/mat/hueyloadinglightb.png")}
			& #title {background-image:url("/img/mat/hueytitle1.png")}
		}
		&[theme="snow1"] {
			background-image:url("/img/mat/hueyframe_snow1.png");
			& #power-off {background-image:url("/img/mat/hueyoffswitcha1.png")}
			& #audio {background-image:url("/img/mat/hueyaudioswitcha1.png")}
			& #load-indicator {background-image:url("/img/mat/hueyloadinglightb.png")}
			& #title {background-image:url("/img/mat/hueytitle.png1")}
		}
		&[theme="snow2"] {
			background-image:url("/img/mat/hueyframe_snow2.png");
			& #power-off {background-image:url("/img/mat/hueyoffswitcha1.png")}
			& #audio {background-image:url("/img/mat/hueyaudioswitcha1.png")}
			& #load-indicator {background-image:url("/img/mat/hueyloadinglightb.png")}
			& #title {background-image:url("/img/mat/hueytitle1.png")}
		}
		&[theme="snow3"] {
			background-image:url("/img/mat/hueyframe_snow3.png");
			& #power-off {background-image:url("/img/mat/hueyoffswitcha1.png")}
			& #audio {background-image:url("/img/mat/hueyaudioswitcha1.png")}
			& #load-indicator {background-image:url("/img/mat/hueyloadinglightb.png")}
			& #title {background-image:url("/img/mat/hueytitle1.png")}
		}
		&[theme="rot"] {
			background-image:url("/img/mat/hueyframe_rot.png");
			& #power-off {background-image:url("/img/mat/hueyoffswitcha1.png")}
			& #audio {background-image:url("/img/mat/hueyaudioswitcha1.png")}
			& #load-indicator {background-image:url("/img/mat/hueyloadinglightb.png")}
			& #title {background-image:url("/img/mat/hueytitle1.png")}
		}
		&[theme="rot2"] {
			background-image:url("/img/mat/hueyframe_rot2.png");
			& #power-off {background-image:url("/img/mat/hueyoffswitcha1.png")}
			& #audio {background-image:url("/img/mat/hueyaudioswitcha1.png")}
			& #load-indicator {background-image:url("/img/mat/hueyloadinglightb.png")}
			& #title {background-image:url("/img/mat/hueytitle1.png")}
		}
		&[theme="rot3"] {
			background-image:url("/img/mat/hueyframe_rot3.png");
			& #power-off {background-image:url("/img/mat/hueyoffswitcha1.png")}
			& #audio {background-image:url("/img/mat/hueyaudioswitcha1.png")}
			& #load-indicator {background-image:url("/img/mat/hueyloadinglightb.png")}
			& #title {background-image:url("/img/mat/hueytitle1.png")}
		}
		&[theme="blood"] {
			background-image:url("/img/mat/hueyframe_blood.png");
			& #power-off {background-image:url("/img/mat/hueyoffswitcha1.png")}
			& #audio {background-image:url("/img/mat/hueyaudioswitcha1.png")}
			& #load-indicator {background-image:url("/img/mat/hueyloadinglightb.png")}
			& #title {background-image:url("/img/mat/hueytitle1.png")}
		}
	}
		/* ON SMALL SCREENS: Enable alternate background sizing for the HUEY top bar and disable HUEY plate */
		@media only screen and (width<=960px) {
			#controller {background-size:auto 100%;background-position:0%;background-repeat:no-repeat}
			#controller > img {display:none}
		}

		/* Controller buttons and other elements */
		#power-off { /* Power-off switch */
			display:block;
			background-image:url("/img/mat/hueyoffswitcha.png");
			background-size:100% 100%;
			background-position:center;
			height:50px;
			width:fit-content;
			cursor:pointer;
			&.active img {opacity:0;animation:none}
			& img {
				height:50px;
				width:fit-content;
				animation:poweroff-flicker 7s ease infinite alternate-reverse}
		}
			@keyframes poweroff-flicker {
			0%  {opacity: .8 }
			10% {opacity: .77}
			19% {opacity:  .7}
			26% {opacity: .75}
			56% {opacity: .6 }
			57% {opacity: .5 }
			60% {opacity: .5 }
			61% {opacity: .8 }
			62% {opacity: .6 }
			63% {opacity: .8 }
			70% {opacity: .7 }
			100%{opacity: .8 }}
		#audio { /* Audio switch --- PLACEHOLDER IMAGE (I just replaced the image I'm leaving the placeholder in the holder because I'm too lazy to change file names, lmao.) */
			display:none; /*CHANGE THIS TO BLOCK WHEN AUDIO IS READY!*/
			background-image:url("/img/mat/hueyaudioswitcha.png");
			background-size:100% 100%;
			background-position:center;
			height:50px;
			width:fit-content;
			cursor:pointer;
			& img {
				height:50px;
				width:fit-content;
				opacity:0
			}
			&.quiet img {
				opacity:0.5
			}
			&.on img {
				opacity:1
			}
		}
		#load-indicator { /* Loading indicator --- PLACEHOLDER STYLING */
			display:block;
			background-image:url("/img/mat/hueyloadinglightb.png");
			background-size:100% 100%;
			background-position:center;
			height:50px;
			width:fit-content;
			& img {
				height:50px;
				width:fit-content}
			&.active img {animation:huey-loading 2s step-end infinite alternate}
		}
			@keyframes huey-loading {
				0% {opacity:0}
				10% {opacity:1}
				15% {opacity:0}
				60% {opacity:1}
				61% {opacity:0}
				65% {opacity:1}
				67% {opacity:0}
				95% {opacity:1}
				99% {opacity:0}
			}

	/* Viewport */
	#viewport {
		width:100%;
		height:100%;
		border:none;
		&.buffer{opacity:0.5}}