.terminal {
  display: inline-block;
  min-width: 320px;
  margin: 10px auto;
  text-align: left;
  background-color: #0d0d0d;
  border: 2px solid #444;
  font-family: monospace;
  font-size: 15px; }
  .terminal .terminal-bar {
    padding: 4px 8px;
    border-bottom: 2px solid #444;
    color: #aaa; }
  .terminal .terminal-body {
    padding: 10px 14px; }
  .terminal .prompt {
    color: #8ae68a; }
    .terminal .prompt::after {
      content: " $ ";
      color: #fff; }
  .terminal a:hover {
    background-color: #d3a4e8;
    color: #0d0d0d; }
  .terminal .cursor {
    display: inline-block;
    width: 8px;
    height: 1em;
    vertical-align: text-bottom;
    background-color: #fff;
    animation: blink 1s step-end infinite; }

@keyframes blink {
  50% {
    opacity: 0; } }

@keyframes fade-in {
  from {
    opacity: 0; } }

@keyframes typing {
  from {
    width: 0; }
  to {
    width: calc(var(--chars) * 1ch); } }

@keyframes caret-off {
  to {
    border-color: transparent; } }

.terminal {
  max-width: 520px;
  animation: fade-in 0.5s ease-out 0.2s both; }
  .terminal .line {
    animation: fade-in 0.01s linear both; }
  .terminal .cat-line {
    animation-delay: 0.6s; }
  .terminal .ls-line {
    animation-delay: 2.78s; }
  .terminal .end-line {
    animation-delay: 3.8s; }
  .terminal .typed {
    display: inline-block;
    vertical-align: bottom;
    overflow: hidden;
    white-space: nowrap;
    border-right: 8px solid #fff; }
  .terminal .cat-cmd {
    --chars: 13;
    animation: typing 0.78s steps(13) 0.9s both, caret-off 0s linear 1.68s forwards; }
  .terminal .ls-cmd {
    --chars: 2;
    animation: typing 0.12s steps(2) 3.08s both, caret-off 0s linear 3.2s forwards; }
  .terminal .readme {
    margin: 6px 0 12px;
    white-space: normal; }
    .terminal .readme h2 {
      margin: 0 0 6px;
      color: #d3a4e8;
      font-weight: bold;
      animation: fade-in 0.3s ease-out 1.88s both; }
      .terminal .readme h2::before {
        content: "# ";
        color: #777; }
    .terminal .readme p {
      margin: 0;
      line-height: 1.5;
      animation: fade-in 0.4s ease-out 2.08s both; }
  .terminal .actions {
    margin: 6px 0 12px;
    animation: fade-in 0.3s ease-out 3.4s both; }
    .terminal .actions a {
      display: inline-block;
      padding: 2px 8px;
      margin-right: 8px;
      border: 1px solid #d3a4e8; }

@media (prefers-reduced-motion: reduce) {
  .terminal,
  .terminal .line,
  .terminal .typed,
  .terminal .readme h2,
  .terminal .readme p,
  .terminal .actions {
    animation: none; }
  .terminal .typed {
    border-right-color: transparent; } }