@import url("https://fonts.googleapis.com/css?family=PT+Mono");
body {
  box-sizing: border-box;
  width: 100vw;
  height: 100vh;
  line-height: 1.5;
  font-family: "PT Mono", "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;
  font-size: 16px;
}
body *,
body *::before,
body *::after {
  box-sizing: inherit;
}

.terminal {
  width: 100vw;
  height: 100vh;
  background: #1e1e1e;
  box-shadow: inset 0 0 1em 0 #141414;
}

.screen {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 96vw;
  height: 96vh;
  padding: 1em;
  overflow: hidden;
  color: #14fdce;
  background: #031e11;
  border-radius: 1em;
  box-shadow: inset 0 0 1em 0 #010b06;
}
.screen::before, .screen::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
}
.screen::before {
  background: linear-gradient(to bottom, rgba(30, 30, 30, 0.2), rgba(30, 30, 30, 0.2) 50%, rgba(30, 30, 30, 0.4) 50%, rgba(30, 30, 30, 0.4));
  background-size: 100% 2px;
}
.screen::after {
  opacity: 0;
  background: rgba(18, 16, 16, 0.1);
  -webkit-animation: flicker 0.2s infinite;
          animation: flicker 0.2s infinite;
}

@-webkit-keyframes flicker {
  0% {
    opacity: 0.7947204493;
  }
  4% {
    opacity: 0.1402644721;
  }
  8% {
    opacity: 0.8809995694;
  }
  12% {
    opacity: 0.1671290289;
  }
  16% {
    opacity: 0.748150403;
  }
  20% {
    opacity: 0.2917454093;
  }
  24% {
    opacity: 0.4199354195;
  }
  28% {
    opacity: 0.5952851443;
  }
  32% {
    opacity: 0.2291534884;
  }
  36% {
    opacity: 0.0049693154;
  }
  40% {
    opacity: 0.0061058078;
  }
  44% {
    opacity: 0.1806973436;
  }
  48% {
    opacity: 0.4337705676;
  }
  52% {
    opacity: 0.3027968466;
  }
  56% {
    opacity: 0.3044761938;
  }
  60% {
    opacity: 0.3059687978;
  }
  64% {
    opacity: 0.7632217113;
  }
  68% {
    opacity: 0.1591876326;
  }
  72% {
    opacity: 0.4178008443;
  }
  76% {
    opacity: 0.3593121887;
  }
  80% {
    opacity: 0.4964881307;
  }
  84% {
    opacity: 0.7601704479;
  }
  88% {
    opacity: 0.2113348896;
  }
  92% {
    opacity: 0.0803294033;
  }
  96% {
    opacity: 0.5209205932;
  }
  100% {
    opacity: 0.8058758227;
  }
}

@keyframes flicker {
  0% {
    opacity: 0.7947204493;
  }
  4% {
    opacity: 0.1402644721;
  }
  8% {
    opacity: 0.8809995694;
  }
  12% {
    opacity: 0.1671290289;
  }
  16% {
    opacity: 0.748150403;
  }
  20% {
    opacity: 0.2917454093;
  }
  24% {
    opacity: 0.4199354195;
  }
  28% {
    opacity: 0.5952851443;
  }
  32% {
    opacity: 0.2291534884;
  }
  36% {
    opacity: 0.0049693154;
  }
  40% {
    opacity: 0.0061058078;
  }
  44% {
    opacity: 0.1806973436;
  }
  48% {
    opacity: 0.4337705676;
  }
  52% {
    opacity: 0.3027968466;
  }
  56% {
    opacity: 0.3044761938;
  }
  60% {
    opacity: 0.3059687978;
  }
  64% {
    opacity: 0.7632217113;
  }
  68% {
    opacity: 0.1591876326;
  }
  72% {
    opacity: 0.4178008443;
  }
  76% {
    opacity: 0.3593121887;
  }
  80% {
    opacity: 0.4964881307;
  }
  84% {
    opacity: 0.7601704479;
  }
  88% {
    opacity: 0.2113348896;
  }
  92% {
    opacity: 0.0803294033;
  }
  96% {
    opacity: 0.5209205932;
  }
  100% {
    opacity: 0.8058758227;
  }
}