@charset "utf-8";
@font-face {
	font-family: 'Anger is a Gift';
	src: url('../fonts/aiag.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

* {	color: #ffe824 !important;}

body {
	font-family: 'Anger is a Gift' !important;
	background-color: #000;
	color: #00ff00;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
font-size: 1.5rem;
font-size: clamp(1.5rem, 1.3rem + 1vw, 2.5rem);
	overflow: hidden;
}


#screen {
	position: relative;
	display: block;
	height: 100%;
	width: 100%;
	background: url('../images/raster.webp');
	background-size: 100% 100%;
	background-position: center center;
	background-repeat: no-repeat;
	z-index: 5;
}

#bezel {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 100vh;
	position: relative;
	background: url('../images/bezel.webp');
	background-size: 100% 100%;
	background-position: center center;
	background-repeat: no-repeat;
	z-index: 999;
}

.vhs-message {
	-webkit-animation: track 5ms infinite;
					animation: track 5ms infinite;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 90vh;
	width: 100vw;
	z-index: 10;
}

.inner {
	padding: 0 1rem;
}

.signal {
	-webkit-animation: blur 30ms infinite, flick 50ms infinite, jump 50ms infinite;
					animation: blur 30ms infinite, flick 50ms infinite, jump 50ms infinite;
}

.prompt::after {
	padding-left: 2px;
	content: ".";
	color: #ffe824;
	-webkit-animation: 1s blink step-end infinite;
	-moz-animation: 1s blink step-end infinite;
	-ms-animation: 1s blink step-end infinite;
	-o-animation: 1s blink step-end infinite;
	animation: 1s blink step-end infinite;
}
span.star {
	display: none;
}

.readout {
	padding-bottom: 1rem;
}

.readout, label {
	text-align: left;
	color: #ffd624;
	filter: blur(0.5px);
	text-shadow: 1px 3px green, -2px -3px red;
	/* text-transform: uppercase; */
}
fieldset.login-box {
	border: none;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
}

input.login-input,
input[type="text"],
input:-internal-autofill-selected,
input[type="text" i] {
	appearance: none;
	outline: none;
	color: #ffd624 !important;
	font-family: 'Anger is a Gift';
	margin: 0 0 5px 0;
	background-color: transparent !important;
	background-image: none !important;
	border: none;
	filter: blur(0.5px);
	font: 400 32px 'Anger is a Gift';
	text-shadow: 1px 3px green, -2px -3px red;
	padding: 0;
	max-width: 280px;
}

.btn-login {
	appearance: none;
	outline: none;
	color: #ffd624 !important;
	font-family: 'Anger is a Gift';
	margin: 0 0 20px 0;
	background-color: transparent !important;
	background-image: none !important;
	border: none;
	filter: blur(0.5px);
	text-shadow: 1px 3px green, -2px -3px red;
	padding: 0;
	cursor: pointer;
	text-transform: uppercase;
}

.login-label {
	margin: 0 0 5px;
}

.pagetitle {
	padding: 0 2rem;
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	-webkit-animation: blur 30ms infinite, flick 50ms infinite, jump 50ms infinite;
					animation: blur 30ms infinite, flick 50ms infinite, jump 50ms infinite;
}

.screen-bottom {
  position: fixed;
  bottom: 0;
  width: 99%;
	z-index: 4;
}

.line {
  width: 99%;
  height: 3px;
  position: relative;
  -webkit-animation: appear 1s infinite, flick 1s infinite, big-jump 5ms infinite;
          animation: appear 1s infinite, flick 1s infinite, big-jump 5ms infinite;
	z-index: 4;
}
.line .white {
  background: white;
  position: relative;
  top: 0;
  left: 0;
  height: 4px;
	z-index: 4;
}
.line .red {
  background: blue;
  position: relative;
  top: 0;
  left: 0;
  height: 1px;
	z-index: 4;
}
.line .green {
  background: green;
  position: relative;
  top: 0;
  left: 0;
  height: 1px;
	z-index: 4;
} 


@-webkit-keyframes blur {
	0% {
		filter: blur(1px);
		opacity: 0.8;
	}
	50% {
		filter: blur(1px);
		opacity: 1;
	}
	100% {
		filter: blur(1px);
		opacity: 0.8;
	}
}

@keyframes blur {
	0% {
		filter: blur(1px);
		opacity: 0.8;
	}
	50% {
		filter: blur(1px);
		opacity: 1;
	}
	100% {
		filter: blur(1px);
		opacity: 0.8;
	}
}

@-webkit-keyframes flick {
	50% { left: 2px; }
	51% { left: 0; }
}

@keyframes flick {
	50% { left: 2px; }
	51% { left: 0; }
}

@-webkit-keyframes jump {
	30% { top: 10px; }
	31% { top: 0; }
}

@keyframes jump {
	30% { top: 10px; }
	31% { top: 0; }
}

@-webkit-keyframes track {
	40% {
		opacity: 1;
		top: 0;
		left: 0;
		transform: scale(1, 1);
		transform: skew(0, 0);
	}
	41% {
		opacity: 0.8;
		top: 0px;
		left: -100px;
		transform: scale(1, 1.2);
		transform: skew(50deg, 0);
	}
	42% {
		opacity: 0.8;
		top: 0px;
		left: 100px;
		transform: scale(1, 1.2);
		transform: skew(-80deg, 0);
	}
	43% {
		opacity: 1;
		top: 0;
		left: 0;
		transform: scale(1, 1);
		transform: skew(0, 0);
	}
}

@keyframes track {
	40% {
		opacity: 1;
		top: 0;
		left: 0;
		transform: scale(1, 1);
		transform: skew(0, 0);
	}
	41% {
		opacity: 0.8;
		top: 0px;
		left: -99px;
		transform: scale(1, 1.2);
		transform: skew(50deg, 0);
	}
	42% {
		opacity: 0.8;
		top: 0px;
		left: 99px;
		transform: scale(1, 1.2);
		transform: skew(-80deg, 0);
	}
	43% {
		opacity: 1;
		top: 0;
		left: 0;
		transform: scale(1, 1);
		transform: skew(0, 0);
	}
}

@-webkit-keyframes appear {
	0% {
		filter: blur(5px);
		opacity: 0.85;
	}
	50% {
		filter: blur(3px);
		opacity: 0.85;
	}
	100% {
		filter: blur(4px);
		opacity: 0.85;
	}
}

@keyframes appear {
	0% {
		filter: blur(5px);
		opacity: 0.85;
	}
	50% {
		filter: blur(3px);
		opacity: 0.85;
	}
	100% {
		filter: blur(4px);
		opacity: 0.85;
	}
}

@-webkit-keyframes big-jump {
	0% { top: 0; }
	10% { top: -100px; }
	12% { top: 0; }
	54% { top: 0; }
	55% { top: -300px; }
	56% { top: 0; }
	86% { top: 0; }
	87% { top: -600px; }
	88% { top: 0; }
}

@keyframes big-jump {
	0% { top: 0; }
	10% { top: -100px; }
	12% { top: 0; }
	54% { top: 0; }
	55% { top: -300px; }
	56% { top: 0; }
	86% { top: 0; }
	87% { top: -600px; }
	88% { top: 0; }
}

@keyframes "blink" {
	from, to { opacity:0; }
	50% { opacity:1; }
}

@-moz-keyframes blink {
	from, to { opacity:0; }
	50% { opacity:1; }
}

@-webkit-keyframes "blink" {
	from, to { opacity:0; }
	50% { opacity:1; }
}

@-ms-keyframes "blink" {
	from, to { opacity:0; }
	50% { opacity:1; }
}

@-o-keyframes "blink" {
	from, to { opacity:0; }
	50% { opacity:1; }
}