@font-face {
	font-family: "Asai-Analogue";
	src: url(assets/Asai-Analogue.ttf) format("truetype");
}

@font-face {
	font-family: "712_serif";
	src: url(assets/712_serif.woff);
}

@font-face {
    font-family: 'SevenTwelve Serif';
    src: url("assets/pixelvision/7-12-Serif/712_serif.woff");
    word-spacing: 6rem;
}

#phaser-container {
    font-family: 'SevenTwelve Serif', serif;
}

/* Unused keyframe declaration */
@keyframes textShadow {
  0% {
    
  }
}

.crt::after {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(18, 16, 16, 0.1);
  opacity: 0;
  z-index: 2;
  pointer-events: none;
}

.crt::before {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  z-index: 2;
  background-size: 100% 2px, 3px 100%;
  pointer-events: none;
}

.crt {
  text-shadow: 0.4389924193300864px 0 1px rgba(0,30,255,0.2), -3px 0 1px rgba(255,0,80,0.2), 0 0 3px;
	overflow: hidden;
}

body {
	background-color: black;
	color: white;

	margin: 0 0;
	overflow: hidden;
}

main {
	width: 100vw;
	height: 100vh;

	margin: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	
	transition:opacity 0.5s ease;
	overflow:hidden;
}

main.room {
	opacity:0;
	pointer-events:none;
}

main.room[data-loaded="1"] {
	opacity:1;
	pointer-events:all;
}

.intro-element {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	width: calc(100% + 20px);
	height: calc(100% + 20px);
	margin: 0;
	font-family: Consolas, monospace;
	font-weight: bold;
	background-color: black;
	color: #ff00ff;
	text-shadow: 0 0 10px #f9a8ff;
	border: 3px solid #4cffff;
	box-sizing: border-box;
	border-radius: 15px;
	box-shadow: 0 0 0 20px #000000;
	user-select: none;
	/* Adjust when implementing */
	padding: 10vh 20vw;
	font-size: 2.5vh;
}

.intro-element[data-animate="1"] {
	animation: introTransition 1 2s ease forwards;
}

.intro-element::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
	background-size: 20px 20px;
	pointer-events: none;
	animation: gridScroll 1s linear infinite;
	z-index: 5;
	opacity: 0.3;
}

.cursor_blink {
	animation: cursorBlink 1.5s linear forwards infinite;
}

@keyframes gridScroll {
	from {background-position: 0 0;}
	to {background-position: 20px 20px;}
}

@keyframes introTransition {
	1% {color:transparent;text-shadow:none;}
	50% {width:var(--room-width);height:var(--room-height);filter:blur(0px);opacity:1;}
	99.9% {pointer-events:all;}
	100% {width:var(--room-width);height:var(--room-height);filter:blur(30px);opacity:0;color:transparent;text-shadow:none;pointer-events:none;}
}

@keyframes cursorBlink {
	0%, 49.9% {opacity:1;}
	50%, 100% {opacity:0;}
}

.home-button {
	position: absolute;
	left: 0;
	bottom: 0;
	padding: 0.3%;
	height: 2%;
	opacity: 0.03;
	transition: opacity linear 0.1s;
	color: white;
	font-family: monospace;
	font-weight: bold;
	font-size: 150%;
}

.home-button:hover {
	opacity: 0.5;
}

.vignette {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	aspect-ratio: 16/9;

	box-shadow: 0 0 100px rgba(0,0,0,1) inset;
	background: radial-gradient(transparent 75%, black);
	
	pointer-events:none;
}

.frame-room {
	position: absolute;
	display: block;
	margin: auto;
	
	width: 1500px;
	height: 843px;
	overflow: hidden;
	
	/*
	height: 90vh;
	aspect-ratio: 16 / 9;
	*/
}

.frame-computer {
	position: absolute;
	width: 1336px;
	height: 988px;
	/* Dyamic resizing behavior being moved to javascript for ease of implementation
	aspect-ratio: 1336 / 988;
	max-height: min(100vh, 988px);
	height: 100%;
	*/
}

.computer-container {
	max-width: 100%;
	max-height: 100%;
	opacity: 0;
	pointer-events: none;
	transition: opacity 150ms linear;
}

.computer-frame {
	position: absolute;
	top: 51.5%;
	left: 49.6%;
	transform: translate(-50%, -50%);
	aspect-ratio: 1336 / 988;
	height: 92%;
	border: 0;
	background: black;
}

.computer-transition {
	max-width: 100%;
	max-height: 100%;
	pointer-events: none;
	user-select: none;
	position: absolute;
}

.frame-content {
	max-width: 100%;
	max-height: 100%;
	user-select: none;
}

.frame-background {
	position: absolute;
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	aspect-ratio: 16/9;
	top: 0;
	left: 0;
	user-select: none;
}

.frame-click {
	position: absolute;

	display: flex;
	align-items: center;
	justify-content: center;

	width: 100%;
	height: 100%;

	top: 0;
	left: 0;

	background-color: #000000F0;
}

.frame-click h1 {
	margin: 0;
	text-align: center;
}


.clickable {
	/*background-color: #ff00ff33;*/
	position: absolute;
	cursor: pointer;
	user-select: none;
}

.overlay {
	position: absolute;
	pointer-events: none;
	user-select: none;
}

.center-flex {
	margin: 0px;
	padding: 0px;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

@keyframes magicball-display-anim {
	from { transform: rotate(-100deg) scale(0.1); }
	to { transform: rotate(0deg) scale(1.0); }
}
.magicball-display {
	display: none;
	position: absolute;

	animation: magicball-display-anim 1s;
}

@keyframes magicball-text-anim {
	from { color: #b3bbfb00; text-shadow: 1px 1px 20px #b3bbfb00; }
	to { color: #b3bbfb; text-shadow: 1px 1px 20px #b3bbfb; }
}
#magicball-text {
	text-align: center;
	font-size: 0.75vw;
	font-family: Helvetica, Arial, sans-serif;
	color: #b3bbfb00;
	text-shadow: 1px 1px 20px #b3bbfb00;
	font-weight: bold;

	animation-name: magicball-text-anim;
	animation-duration: 1s;
	animation-delay: 1s;
	animation-fill-mode: forwards;
}

.synth {
	fill: #ff00ff33;
}
.synth.fade {
	fill: #ff00ff00;
	transition: 0.5s;
}


#mplayer-text {
	font-family: 'Asai-Analogue';
	white-space: nowrap;
	color: #f28a0a;
	text-shadow: 1px 1px 10px #c63c16;
	user-select: none;
	pointer-events: none;
	
	
	position: absolute;
	width: 2.6%;
	height: 1.6%;
	left: 17.8%;
	top: 77.6%;
	transform-origin:0 0;
	transform: rotate(-20.7deg);
	background: black;
	display: flex;
	align-items: end;
	justify-content: end;
	font-size: 20px;
}

[data-progress="VZT8B"] #mplayer-text {
	color: #fc27e8;
	text-shadow: 1px 1px 10px #94228a;
}

#clock-text {
	font-family: 'Asai-Analogue';
	white-space: nowrap;
	color: #ed1207;
	/*text-shadow: 1px 1px 10px #c63c16;*/
	user-select: none;
	pointer-events: none;
	
	position: absolute;
	width: 3.8%;
	height: 2%;
	left: 50.6%;
	top: 26.6%;
	transform-origin:0 0;
	background: black;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 26.7px;
}

#walkie-talkie-text {
	font-family: 'Asai-Analogue';
	white-space: nowrap;
	color: #00e80a;
	text-shadow: 0px 0px 0px #00e80a;
	user-select: none;
	pointer-events: none;
		
	position: absolute;
	width: 1.3%;
	height: 1.9%;
	left: 37.5%;
	top: 57%;
	transform-origin: 0 0;
	background: #000000;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 9.6px;
	font-weight: bold;
}

.center-content {
	display: flex;
	align-items: center;
	justify-content: center;
}

.popup-button {
	background: none;
	border: 2px solid white;
	width: 50px;
	height: 50px;
	color: white;
	font-size: 25px;
}

.login-screen {
	background: url("assets/ui/screensaver.png");
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background-size: cover;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: center;
}

.login-header {
  margin: 0;
  margin-bottom: 14px;
	font-size: 32px;
}

.login-text-input {
  width: 75%;
  box-sizing: border-box;
}

.login-button {
  height: 30px;
  width: 75%;
  box-sizing: border-box;
}

.login-shutdown {
	position: absolute;
	left: 0;
	bottom: 0;
	padding: 25px;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 15px;
	font-size: 20px;
}

.login-shutdown > img {
	width: 40px;
	height: 40px;
}

.desktop-icon {
	background-size: cover;
	border: none;
	cursor: pointer;
}

.desktop-icon span {
	/*font-family: Arial;*/
	font-family: '712_serif';
	font-size: 32px;
	display: block;
	text-shadow: 0px 2px 5px black;
}

.desktop-icon:hover {
	background-color: #00ffff44;
	border-style: solid;
	border-width: 2px;
	border-color: #ffffff44;
}


.panel-default {
	border-image: url("assets/ui/window_ninepatch_default.png") 2 2 2 2 fill / 2px 2px 2px 2px;
	padding: 6px 6px 6px 6px;
}

.panel-titlebar {
	border-image: url("assets/ui/window_titlebar_ninepatch_default.png") 2 2 2 2 fill / 2px 2px 2px 2px;
	padding: 2px 2px 2px 2px;
}


.program {
	position: absolute;
	border-image: url("assets/ui/window_ninepatch_default.png") 2 2 2 2 fill / 2px 2px 2px 2px;
	padding: 6px 6px 6px 6px;
}

.program-mediaplayer {
	border-image: url("assets/computer/window_ninepatch_mediaplayer.png") 12 12 12 12 fill / 12px 12px 12px 12px;
	padding: 12px 12px 12px 12px;
}

.program-titlebar {
	border-image: url("assets/ui/window_titlebar_ninepatch_default.png") 2 2 2 2 fill / 2px 2px 2px 2px;
	padding: 2px 2px 2px 2px;	
}

.program-mediaplayer-titlebar {
	border-image: url("assets/ui/window_titlebar_ninepatch_default.png") 2 2 2 2 fill / 2px 2px 2px 2px;
	padding: 2px 2px 2px 2px;
}

.program-mediaplayer-section {
	border-image: url("assets/computer/window_ninepatch_mediaplayer.png") 12 12 12 12 fill / 12px 12px 12px 12px;
	padding: 10px 10px 10px 10px;
	box-sizing: border-box;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 33%;
}


/* Background of the terminal */
.terminal-content-div {
	background-color: #0A0A0A; 
	color: #f0f0f0;
	/*min-height: 100vh;*/
	margin: 0;
	padding: 20px;
	box-sizing: border-box;
	overflow: hidden;
	cursor: text;
}

.terminal-content-div > pre:not(:first-child) {
	display: flex;
}

/* Also background of the terminal */
.crt-container { 
	position: relative; 
	padding: 2em 2.5em;
	overflow: hidden;
}

/* Terminal input area */
.terminal-text-input-field {
	border: none;
	color: white;
	outline: none;
	padding: 0px 0px 0px 0px;
}

/* Terminal text wrap */
#terminal-program .terminal-content-div > pre:not(:first-child) > pre:only-child {
	width: 100%;
	text-wrap: wrap;
}

/* Terminal text (also applies to terminal input area) */

#terminal-program pre, .terminal-text-input {
	font-family: "Consolas", "Monaco", "Lucida Console", "Courier New", monospace;
	white-space: pre;
	font-size: 15px;
	line-height: 1.2;
	margin: 0;

	-webkit-font-smoothing: none;
	-moz-osx-font-smoothing: grayscale;
	image-rendering: pixelated;

	/* Text color */
	background-image: linear-gradient(
		45deg,
		#FFFF99,
		#FFEE77,
		#FFD700,
		#FFFF00,
		#FADA5E
	);
	-webkit-background-clip: text;
	-moz-background-clip: text;
	background-clip: text;
	color: transparent;
	caret-color: #FFFF99;

	/* Glow */
	text-shadow:
		0 0 2px rgba(255, 255, 180, 0.5),
		0 0 5px rgba(255, 255, 100, 0.7),
		0 0 10px rgba(255, 215, 0, 0.5),
		0 0 20px rgba(255, 165, 0, 0.2);

	/* Flicker */
	animation: subtleGlowPulse 8s infinite alternate ease-in-out,
						 crtFlicker 0.15s infinite alternate;
}

.terminal-secret {
	display:inline-block;
	width:2ch;
	text-align:center;
}

/* Scanlines */
.crt-container::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/* pointer-events: none;  */
	z-index: 1; 
	animation: scanlineMove 10s linear infinite;
}

/* ANIMTIONS */
@keyframes scanlineMove {
	0% { background-position-y: 0px; }
	100% { background-position-y: 60px; } 
}


@keyframes subtleGlowPulse {
0% {
	text-shadow:
		0 0 2px rgba(255, 255, 180, 0.4),
		0 0 5px rgba(255, 255, 100, 0.6),
		0 0 10px rgba(255, 215, 0, 0.4),
		0 0 20px rgba(255, 165, 0, 0.15);
}
100% {
	text-shadow:
		0 0 3px rgba(255, 255, 180, 0.6),
		0 0 7px rgba(255, 255, 100, 0.8),
		0 0 15px rgba(255, 215, 0, 0.6),
		0 0 25px rgba(255, 165, 0, 0.25);
}
}

/* CRT  */
@keyframes crtFlicker {
	0% { opacity: 0.97; } 
	50% { opacity: 1; }
	100% { opacity: 0.97; }
}




.email-tab {
	position: absolute;

	background-color: #dfdede;
	color: #201e1e;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 20px;

	padding-top: 2%;
	padding-left: 1%;
	padding-right: 1%;

	width: 20%;
	height: 100%;
}

.email-buttons {
	position: absolute;
	
	background-color: #dfdede;
	color: #201e1e;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 20px;

	margin-left: 25%;

	padding-top: 2%;
	padding-left: 1%;

	width: 74%;
	height: 100%;
}

.email-text {
	position: absolute;
	
	background-color: #dfdede;
	color: #201e1e;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 17px;

	margin-left: 25%;

	padding-left: 1%;
	padding-right: 1%;

	width: 73%;
	height: 100%;

	overflow-y: scroll;
}

.email-text sup {
	vertical-align: super;
	font-size: 0.75em;
}

.email-button {
	color: #201e1e;
	display: flex;
	cursor: pointer;
}

.email-button:hover {
	color: #4d4d4d;
}

.email-button-selected {
	color: #00FF0066;
}

.email-button-selected:hover {
	color: #00FF0066;
}

hb {
	cursor: pointer;
}

#popup_sfx {
	display: none;
}

.fancybox__container {
	--fancybox-bg: rgba(0, 0, 0, 0.5) !important;
	--fancybox-content-bg: rgba(0, 0, 0, 0.0) !important;
	--fancybox-content-color: #ffffff !important;
	backdrop-filter: blur(10px);
	animation-name: fancy__container-backdrop-blur;
	animation-duration: 0.5s;
}

.fancybox__content {
	align-self: center !important;
	/* box-shadow: inset 0 0 500px #000 !important; */
}

@keyframes fancy__container-backdrop-blur {
	from { backdrop-filter: blur(0px); }
	to { backdrop-filter: blur(10px); }
}