:root {
  --background: black;
  --color: white;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.terminal {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  background-color: var(--background);
  color: var(--color);
  font-family: "Inconsolata", "Courier New", Courier, monospace;
  font-weight: bold;
  font-size: 1.2em;
  overflow-y: auto;
}

::selection {
  background-color: var(--color);
  color: var(--background);
}

.terminal .output div, .terminal .typeArea, .terminal .text {
  padding: 2px 8px;
  display: flex;
}
.terminal .suffix {
  margin: 0 10px;
}
.terminal .text {
  font-weight: normal;
}

.terminal .input {
  width: 100%;
  border: none;
  outline: none;
/*   border: 1px solid red; */
  background-color: inherit;
  color: inherit;
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
/*   overflow-wrap: normal; */
  resize: none;
/*   line-height: 1; */
}



/* mein Shix */
.canvas-hidden {
  visibility: hidden;
}

canvas {
    position:absolute;
    top:0;
    left:0;
}
.bars-and-stuff{
    left:66.6%;
}

.output-console {
    position:fixed;
    overflow:hidden;
}
p{margin:0}

  .text.typing {
    animation: typing 0.05s steps(10, end), colorChange 1s forwards;
  }

  @keyframes typing {
    from {
      width: 0;
    }
    to {
      width: auto;
    }
  }

  @keyframes colorChange {
    from {
      color: white; /* Startfarbe (falls unterschiedlich von weiß) */
    }
    to {
      color: lime; /* Endfarbe */
    }
  }