@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap");

html,
body {
  background-color: black;
  margin: 0;
  font-size: 20px;
}

#screen {
  position: relative;
  box-sizing: border-box;
  padding: 30px;
  width: 100vw;
  min-height: 100dvh;
  color: lightgreen;
  font-family: "Roboto Mono", monospace;
  font-optical-sizing: auto;
  border: 30px solid #003300;
  line-height: 1.4em;
  overflow-wrap: normal;
  width: 100%;
  word-wrap: break-word;
  white-space: normal;
}

#screen div {
  line-height: 1.4em; /* space between lines */
  min-height: 1.2em; /* ensures even empty divs take up space */
  white-space: pre-wrap; /* preserve spaces if you want */
}

#scanlines {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.5) 1px,
    rgba(0, 0, 0, 0.5) 2px,
    transparent 3px,
    transparent 4px
  );
  z-index: 9999;
}

@media (max-width: 480px) {
  body {
    font-size: 14px;
  }
  #screen {
    border: none;
    padding: 15px;
  }
}