html, body {
  margin: 0;
  min-height: 100%;
  background: #020202;
}
@font-face {
  font-family: "DOS VGA";
  src: url("fonts/PxPlus_IBM_VGA_8x16.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: "DOS VGA", "Courier New", monospace;
  color: #C0C0C0;
}
}

#screen {
  box-sizing: border-box;
  min-height: 100vh;
  padding: 22px 26px;
  background:
    radial-gradient(circle at center, rgba(255,255,255,0.035), transparent 58%),
    linear-gradient(rgba(255,255,255,0.025) 50%, rgba(0,0,0,0.035) 50%),
    #020202;
  background-size: auto, 100% 4px, auto;
  text-shadow: 0 0 4px rgba(255,255,255,0.25);
  font-size: 18px;
  line-height: 1.32;
  letter-spacing: 0.3px;
}

#terminal {
  white-space: pre-wrap;
}

#input-line {
  display: inline-flex;
  align-items: baseline;
}

#prompt {
  white-space: pre;
}

#cmd {
  flex: none;
  width: 1ch;
  min-width: 1ch;
  max-width: none;
  border: 0;
  outline: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  color: #d6d6d6;
  font: inherit;
  letter-spacing: inherit;
  caret-color: transparent;
}

#input-line::after {
  content: "";
  width: 10px;
  height: 19px;
  background: #d6d6d6;
  box-shadow: 0 0 6px rgba(255,255,255,0.35);
  animation: blink 1s steps(1) infinite;
  margin-left: 2px;
  transform: translateY(3px);
}

a {
  color: #17d7d7;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.cyan { color: #17d7d7; }
.dim { color: #8f8f8f; }

@keyframes blink {
  50% { opacity: 0; }
}

@media (max-width: 700px) {
  #screen {
    font-size: 14px;
    padding: 14px;
  }
}