Final-commit

css/ellipse.css

@@ -0,0 +1,110 @@
+.wrap {
+  width: 50%;
+  height: 50%;
+  margin: 0;
+  position: absolute;
+  -webkit-perspective: 4000px;
+  perspective: 4000px;
+  -webkit-transform-style: preserve-3d;
+  transform-style: preserve-3d;
+  top: 55vh;
+  left: 15vw;
+}
+
+.circle {
+  -webkit-filter: blur(1px);
+          filter: blur(1px);
+  -webkit-transform-style: preserve-3d;
+  transform-style: preserve-3d;
+  box-sizing: border-box;
+  opacity: 0;
+  width: 30vh;
+  height: 30vh;
+  border: 1vh solid green;
+  border-radius: 50%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  -webkit-animation: spin 20s ease-in-out alternate infinite;
+  animation: spin 20s ease-in-out alternate infinite;
+}
+
+.circle:nth-of-type(1) {
+  -webkit-animation-delay: 500ms;
+  animation-delay: 500ms;
+}
+.circle:nth-of-type(2) {
+  -webkit-animation-delay: 1000ms;
+  animation-delay: 1000ms;
+}
+.circle:nth-of-type(3) {
+  -webkit-animation-delay: 1500ms;
+  animation-delay: 1500ms;
+}
+.circle:nth-of-type(4) {
+  -webkit-animation-delay: 2000ms;
+  animation-delay: 2000ms;
+}
+.circle:nth-of-type(5) {
+  -webkit-animation-delay: 2500ms;
+  animation-delay: 2500ms;
+}
+
+@-webkit-keyframes spin {
+  0% {
+    -webkit-transform: rotateY(0deg) rotateX(0deg);
+    opacity: 1;
+  }
+  25% {
+    -webkit-transform: rotateY(180deg) rotateX(360deg);
+  }
+  50% {
+    -webkit-transform: rotateY(540deg) rotateX(540deg);
+  }
+  75% {
+    -webkit-transform: rotateY(720deg) rotateX(900deg);
+  }
+  100% {
+    -webkit-transform: rotateY(900deg) rotateX(1080deg);
+    opacity: 1;
+  }
+}
+@keyframes spin {
+  0% {
+    -webkit-transform: rotateY(0deg) rotateX(0deg);
+    transform: rotateY(0deg) rotateX(0deg);
+    opacity: 1;
+  }
+  25% {
+    -webkit-transform: rotateY(180deg) rotateX(360deg);
+    transform: rotateY(180deg) rotateX(360deg);
+  }
+  50% {
+    -webkit-transform: rotateY(540deg) rotateX(540deg);
+    transform: rotateY(540deg) rotateX(540deg);
+  }
+  75% {
+    -webkit-transform: rotateY(720deg) rotateX(900deg);
+    transform: rotateY(720deg) rotateX(900deg);
+  }
+  100% {
+    -webkit-transform: rotateY(900deg) rotateX(1080deg);
+    transform: rotateY(900deg) rotateX(1080deg);
+    opacity: 1;
+  }
+}
+
+.circle1 {
+  height: 40vh;
+  width: 20vh;
+}
+
+.circle2 {
+  width: 45vh;
+  height: 25vh;
+}
+
+.circle3 {
+  height: 10vh;
+  width: 10vh;
+}

css/main.css

@@ -0,0 +1,228 @@
+@import url('https://fonts.googleapis.com/css?family=VT323');
+
+body {
+  pointer-events: none;
+  cursor: none;
+  padding: 0;
+  margin: 0;
+  text-align: center;
+  overflow: hidden;
+}
+
+.crt {
+ letter-spacing: 1px;
+ font-family: 'VT323', monospace;
+ color: #95e208;
+ -webkit-filter: blur(0.5px);
+          filter: blur(0.5px);
+ text-transform: uppercase;
+ font-size: 3vw;
+}
+
+#monitor {
+  z-index: 2;
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 100vw;
+  height: 100vh;
+}
+
+.content {
+  white-space: nowrap;
+  text-align: center;
+  display: inline-block;
+}
+
+.background {
+  pointer-events: none;
+  position: absolute;
+  left: 0;
+  top: 0;
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.background {
+  opacity: .01;
+}
+
+.enter-text {
+  -webkit-filter: blur(0.6px);
+  background: black;
+  padding: 10px 20px 10px 20px;
+  border: 5px double #95e208;
+  box-shadow: 1px 1px 1px #95e208;
+}
+
+.background-image {
+  right: -10px;
+  bottom: -10px;
+  top: -10px;
+  left: -10px;
+  background-image: url(../assets/space.jpg), radial-gradient(#0F0, #000), repeating-linear-gradient(transparent 0, rgba(0, 0, 0, 0.1) 2.5px, transparent 5px);
+  background-size: cover;
+  background-position: center;
+  background-blend-mode: overlay;
+  position: fixed;
+  -webkit-filter: blur(5px);
+  display: block;
+  z-index: 1;
+}
+
+.content {
+  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
+  left: 0;
+  position: fixed;
+  right: 0;
+  z-index: 2;
+}
+
+.line {
+  height: 0.9vh;
+  background: green;
+  position: fixed;
+  transform-origin: 50%;
+  -webkit-filter: blur(0.15vh);
+}
+
+.vline {
+  transform: rotate(90deg);
+  width: 91vh;
+}
+
+.hline {
+  width: 100vw;
+  top: 45vh;
+}
+
+.hline1 {
+  width: 100vw;
+  top: 4%;
+}
+
+.hline2 {
+  width: 100vw;
+  top: 95%;
+}
+
+.prompt {
+  font-size: 4.5vh;
+  position: fixed;
+  bottom: -0.5vh;
+  left: 1vw;
+  filter: blur(0.15vh);
+  font-family: 'VT323', monospace;
+  animation:pulse 0.55s infinite alternate
+}
+
+@keyframes pulse {
+  from { color: green; }
+  to { color: yellow; }
+}
+
+.prompt-key {
+  color: red;
+  font-weight: 700;
+}
+
+.sending, .receiving {
+  position: fixed;
+  top: 5vh;
+  filter: blur(0.15vh);
+}
+
+.sending {
+  left: 5vw;
+}
+
+.receiving {
+  left: 55vw;
+}
+
+.sea {
+  position: fixed;
+  top: 5.5vh;
+}
+
+.sea-left {
+  transform: rotateX(67deg) rotateZ(-223deg) rotateY(0deg);
+  left: 10vw;
+}
+
+.sea-right {
+  transform: rotateX(67deg) rotateZ(-57deg) rotateY(0deg);
+  left: 60vw;
+}
+
+.header {
+  position: fixed;
+  top: 0;
+  right: 1vh;
+  text-transform: none;
+  font-size: 4vh;
+  filter: blur(0.15vh);
+}
+
+a {
+  text-decoration: none;
+  color: #95e208;
+  cursor: hand;
+  pointer-events: all;
+}
+
+a:hover {
+  background-color: #95e208;
+  color: #161913;
+}
+
+.radar {
+  width:50%;
+  height:6px;
+  background:green;
+  position: absolute;
+  top:50%;
+  transform-origin: 100%;
+  transition: all 0.05s;
+  transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
+}
+
+.radar1 {
+  transform: rotate(-30deg);
+}
+
+.radar2 {
+  transform: rotate(90deg);
+}
+
+.radar3 {
+  transform: rotate(210deg);
+}
+
+.garbage {
+  filter: blur(0.15vh);
+  position: fixed;
+  top: 53vh;
+  text-align: justify;
+  margin: 0;
+}
+
+.garbage-left {
+  left: 50vw;
+  font-size: 4.5vh;
+}
+
+.garbage-right  {
+  right: 0vw;
+  font-size: 5vh;
+}
+
+pre {
+  font-family: 'VT323', monospace;
+}
+
+.nodisplay {
+  display: none;
+}