@import 'https://fonts.googleapis.com/css?family=Inconsolata';
html {
  min-height: 100%;
  overflow: hidden;
}

body {
  box-sizing: border-box;
  height: 100%;
  background: radial-gradient(#11581E, #041607), url("https://media.giphy.com/media/oEI9uBYSzLpBK/giphy.gif") no-repeat center center/cover;
  font-family: "Inconsolata", Helvetica, sans-serif;
  font-size: 1.5rem;
  color: rgba(128, 255, 128, 0.8);
  text-shadow: 0 0 1ex rgb(51, 255, 51), 0 0 2px rgba(255, 255, 255, 0.8);
  margin: 0;
  padding: 0;
  overflow: hidden;
}

h1, h4 {
  color: white;
  margin: 0;
  padding: 0;
}

p {
  color: rgba(128, 255, 128, 0.8);
  text-shadow: 0 0 1px rgba(51, 255, 51, 0.4), 0 0 2px rgba(255, 255, 255, 0.8);
}

a {
  color: #fff;
  text-decoration: none;
}
a::before {
  content: "[";
}
a::after {
  content: "]";
}

.noise {
  pointer-events: none;
  position: absolute;
  width: 100vw;
  height: 100vh;
  background: url("https://media.giphy.com/media/oEI9uBYSzLpBK/giphy.gif") no-repeat center center/cover;
  z-index: -1;
  opacity: 0.02;
}

.overlay {
  pointer-events: none;
  position: absolute;
  width: 100vw;
  height: 100vh;
  background: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0) 100%);
  background-size: auto 4px;
  z-index: 1;
}
.overlay::before {
  content: "";
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, transparent 0%, rgba(32, 128, 32, 0.2) 2%, rgba(32, 128, 32, 0.8) 3%, rgba(32, 128, 32, 0.2) 3%, transparent 100%) no-repeat;
}

.screen {
  display: flex;
  height: 100vh;
  width: 75vw;
  align-items: center;
  margin-top: -10vh;
}
.screen .terminal {
  padding: 4rem;
  text-transform: uppercase;
}

@media (max-width: 600px) {
  .screen {
    width: 100vw;
  }
  .screen .terminal {
    padding: 0 2rem;
  }
  .screen p {
    font-size: 20px;
    line-height: 24px;
  }
  .screen h4 {
    max-width: 70vw;
  }
}