@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nanum+Brush+Script&display=swap');

@keyframes noise {
  0%   {
		background-position: 0 50%;
	}
	50% {
		background-position: 64% 13%;
	}
  100%  {
		background-position: 38% 87%;
	}
}

@keyframes blink {
  0%   {
		opacity: 0;
	}
	49% {
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	51% {
		opacity: 0;
	}
  100%  {
		opacity: 0;
	}
}

@keyframes flicker {
  0%   {
		opacity: 1;
	}
	49% {
		opacity: 1;
	}
	50% {
		opacity: 0.8;
	}
	51% {
		opacity: 1;
	}
  77%  {
		opacity: 1;
	}
  78%  {
		opacity: 0.2;
	}
  81%  {
		opacity: 0.7;
	}
  83%  {
		opacity: 1;
	}
}

html, body {
	width: 100vw;
	height: 100vh;
	
	margin: 0;
	padding: 0;
	
	overflow: hidden;
}

html {
	background-color: #111111;
	
	font-family: VT323, monospace;
	font-size: 8vmin;
	color: #cfeecf;
	text-shadow: -0.03em 0 rgba(192, 16, 0, 0.6), 0 -0.02em rgba(16, 192, 16, 0.6), 0.03em 0 rgba(0, 16, 192, 0.6), 0 0 0.3em rgba(230, 255, 230, 0.3);
	
	box-shadow: inset 0 0 20vmin black;
}

html:before {
	content: '-.-. .... . . ... . \A ... .- -. -.. .-- .. -.-. ....';
	display: block;
	
	position: absolute;
	left: 50vw;
	width: 50vw;
	
	font-family: 'Nanum Brush Script';
	font-weight: bold;
	font-size: 110%;
	color: #050505;
	text-align: right;
	text-shadow: none;
	
	white-space: pre-wrap;
	
	transform: rotate(6deg);
	
	opacity: 0.25;
}

body {
	animation-name: flicker;
	animation-duration: 8s;
	animation-iteration-count: infinite;
}

body:before, body:after {
	content: '';
	
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	
	z-index: -1;
	
	background-image: url('./noise.png');
	background-repeat: repeat;
	opacity: 0.015;
	
	background-size: auto 200vw;
}

body:before {
	content: '';
	
	animation-name: noise;
	animation-duration: 200ms;
	animation-iteration-count: infinite;
	animation-direction: reverse;
}

body:after {
	z-index: 1;
	
	transform: scale(-1, -1);
	
	animation-name: noise;
  animation-duration: 150ms;
	animation-iteration-count: infinite;
}

#message {
	position: fixed;
	bottom: 20vmin;
	left: 0;
	right: 0;
	text-align: center;
}

#message:before {
	content: 'soon';
	position: absolute;
	
	left: 0.1em;
	right: 0;
	top: 0.02em;
	height: 0.58em;
	
	overflow: hidden;
	
	mix-blend-mode: screen;
	
	animation-name: blink;
  animation-duration: 4s;
	animation-iteration-count: infinite;
}

#message:after {
	content: '≡≡≡≡';
	position: absolute;
	
	left: 0;
	right: 0;
	top: 0.1em;
	
	transform: scaleX(1000);
	filter: blur(0.05em);
	
	mix-blend-mode: screen;
	
	opacity: 0.05;
}