.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 drop-in {
  from {
    opacity: 0;
    transform: translateY(-12px); } }

@keyframes typing {
  from {
    width: 0; }
  to {
    width: 15ch; } }

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

body > pre {
  animation: drop-in 0.7s ease-out both; }

.intro {
  animation: fade-in 0.7s ease-out 0.4s both; }

.terminal {
  animation: fade-in 0.5s ease-out 0.8s both; }
  .terminal .typed {
    display: inline-block;
    vertical-align: bottom;
    overflow: hidden;
    white-space: nowrap;
    border-right: 8px solid #fff;
    animation: typing 0.9s steps(15) 1.2s both, caret-off 0s linear 2.1s forwards; }
  .terminal ul {
    display: block;
    list-style: none;
    margin: 6px 0;
    padding: 0; }
    .terminal ul li {
      animation: fade-in 0.2s ease-out calc(2.3s + var(--i) * 0.18s) both; }
      .terminal ul li::before {
        content: "drwxr-xr-x  ";
        color: #777; }
    .terminal ul a::after {
      content: "/"; }
  .terminal .last-line {
    animation: fade-in 0.2s ease-out calc(2.3s + var(--count) * 0.18s) both; }

@media (prefers-reduced-motion: reduce) {
  body > pre,
  .intro,
  .terminal,
  .terminal .typed,
  .terminal li,
  .terminal .last-line {
    animation: none; } }