:root {
  --background: #F3E9D2;
  --muted: #887880;
  --prompt: #50fa7b;
  --terminal: #282a36;
  --text: #D9D3D7;
}

.terminal {
  background-color: var(--terminal);
  border-radius:3px;
  color: var(--text);
  display: block;
  font-family: 'Fira Mono', Consolas, Menlo, Monaco, 'Courier New', Courier, monospace;
  font-size: 1em;
  font-smooth: antialiased;
  line-height: 1.2em;
  padding: 1em;
  position: relative;
  width: 100%;
  margin: 0 auto;
}

.terminal code {
  display: block;
}

[data-term-replay] {
  bottom: 0px;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.5em;
  padding: 1em 2em;
  position: absolute;
  right: 0px;
}

[data-term-replay]:hover {
  color: var(--text);
}

.shell [data-term-input]:before {
  color: var(--prompt);
  content: '$';
  margin-right: 0.5em;
}

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

[data-term-cursor]:after {
    content: '_';
    animation: blink 1s infinite;
}

@keyframes blink {
  0%{opacity: 0;}
  50%{opacity: .9;}
  100%{opacity: 1;}
}

#myProgress {
  width: 100%;
}

#myBar {
  width: 1%;
  height: 30px;
}