/* style.css */
:root {
  --background: #1a1b26;
  --foreground: #a9b1d6;
  --prompt-color: #bb9af7;
  --command-color: #7dcfff;
  --output-color: #a9b1d6;
  --cursor-color: #c0caf5;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  background-color: var(--background);
  color: var(--foreground);
  font-family: "Fira Code", monospace;
  font-size: 16px;
  line-height: 1.6;
}

#terminal {
  padding: 20px;
  height: calc(100% - 40px);
  overflow-y: auto;
  box-sizing: border-box;
  cursor: text;
}

#output {
  white-space: pre-wrap; /* Allows text to wrap */
  word-break: break-word;
}

.input-line {
  display: flex;
  align-items: center;
}

.prompt {
  color: var(--prompt-color);
  margin-right: 8px;
  font-weight: 700;
}

#command-input {
  background: transparent;
  border: none;
  color: var(--command-color);
  font-family: "Fira Code", monospace;
  font-size: 16px;
  flex-grow: 1;
  padding: 0;
}

#command-input:focus {
  outline: none;
  animation: blink 1s step-end infinite;
}

@keyframes blink {
  from,
  to {
    box-shadow: 1px 0 0 0 var(--cursor-color);
  }
  50% {
    box-shadow: none;
  }
}

/* For links in the output */
a {
  color: #7aa2f7;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

/* For commands output */
.command-output {
  color: var(--command-color);
}