<!-- start Simple Custom CSS and JS -->
<style type="text/css">
/* Container styling */
#terminal-container {
  background-color: #000;
  color: #0f0;
  font-family: monospace;
  padding: 2vw;          /* Scales with viewport width */
  width: 80%;
  max-width: 1200px;     /* Stops it from getting absurdly wide */
  margin: 2rem auto;
  box-sizing: border-box; /* Include padding in width */
  border-radius: 5px;    /* Optional, looks nicer */
  height: 70vh;          /* Scales with viewport height */
  display: flex;
  flex-direction: column;
}

/* Terminal content */
#terminal {
  display: flex;
  flex-direction: column;
  flex-grow: 1;          /* Fills remaining container height */
  overflow-y: auto;      /* Scrolls if content exceeds height */
}

/* Each printed line */
#terminal .line {
  margin-bottom: 0.5em;
  word-wrap: break-word;  /* Prevent horizontal overflow */
}

/* Input line setup */
#terminal-line {
  display: flex;
  align-items: center;
  margin-top: auto;       /* Pushes input to the bottom */
}

#terminal-line span {
  color: #0f0;
  margin-right: 0.5em;
}

/* Input styling */
#terminal input {
  background-color: transparent;
  border: none;
  color: #0f0;
  outline: none;
  font-family: monospace;
  font-size: 1.2vw;       /* Scales text with viewport width */
  width: 100%;
  caret-color: #0f0;
  padding: 0;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* Highlight text (like in help message) */
.highlight {
  color: #0f0;
  font-weight: bold;
}

/* Make it look good on smaller screens */
@media (max-width: 700px) {
  #terminal-container {
    width: 95%;
    padding: 3vw;
    height: 60vh;
  }
  
  #terminal input {
    font-size: 3vw;  /* Bigger font on tiny screens for readability */
  }
}
</style>
<!-- end Simple Custom CSS and JS -->
