:root {
      --background-color: #0d0d0d;
      --terminal-bg-color: #000000;
      --primary-color: #7f9f7f;
      --secondary-color: lightgray;
      --border-color: var(--primary-color);
      --prompt-color: gray;
      --command-color: gainsboro;
      --output-color: var(--primary-color);
      --link-color: #ff4500;
}

:root[data-theme="dracula"] {
    --background-color: #282a36;
    --terminal-bg-color: #1e1f29;
    --primary-color: #50fa7b;
    --secondary-color: #f8f8f2;
    --border-color: #6272a4;
    --prompt-color: #ff79c6;
    --command-color: #8be9fd;
    --output-color: #f1fa8c;
    --link-color: #bd93f9;
}

:root[data-theme="gruvbox"] {
    --background-color: #282828;
    --terminal-bg-color: #3c3836;
    --primary-color: #b8bb26;
    --secondary-color: #ebdbb2;
    --border-color: #fe8019;
    --prompt-color: #fabd2f;
    --command-color: #d3869b;
    --output-color: #8ec07c;
    --link-color: #fabd2f;
}

:root[data-theme="monokai"] {
    --background-color: #272822;
    --terminal-bg-color: #3e3d32;
    --primary-color: #a6e22e;
    --secondary-color: #f8f8f2;
    --border-color: #f92672;
    --prompt-color: #66d9ef;
    --command-color: #fd971f;
    --output-color: #f8f8f2;
    --link-color: #ae81ff;
}

:root[data-theme="cyberpunk"] {
    --background-color: #120458;
    --terminal-bg-color: #000000;
    --primary-color: #00ff9f;
    --secondary-color: #ff00ff;
    --border-color: #00ff9f;
    --prompt-color: #ff00ff;
    --command-color: #00ffff;
    --output-color: #00ff9f;
    --link-color: #ff00ff;
}

html, body {
      height: 100%;
      margin: 0;
      display: block;
      background-color: var(--background-color);
      color: var(--secondary-color);
      font-family: 'Cutive Mono', monospace;
}

body {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      padding: 20px;
      box-sizing: border-box;
}

.terminal {
      height: 100%;
      background-color: var(--terminal-bg-color);
      padding: 20px;
      box-sizing: border-box;
      overflow-y: auto;
      text-align: left;
}

#terminal-lines {
      margin-bottom: 20px;
      overflow-y: auto;
}

.line {
      margin: 5px 0;
}

.prompt {
      color: var(--prompt-color);
}

.user-command {
      color: var(--command-color);
}

.output-text {
      color: var(--output-color);
}

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

.command-input {
      flex-grow: 1;
      background: transparent;
      border: none;
      color: var(--command-color);
      font-family: 'Cutive Mono', monospace;
      font-size: inherit;
      margin-left: 8px;
      outline: none;
}

a {
      color: var(--link-color);
      text-decoration: none;
}

a:hover {
      text-decoration: underline;
}

.theme-selector {
      margin-bottom: 20px;
}

#terminal-lines {
    margin: 0;
    padding: 0;
    flex-grow: 1;
}