:root {
    --color-background: #2e3440;
    --color-foreground: #d8dee9;
    --color-selection-background: #3f4758;
    --color-selection-foreground: #d8dee9;
    --color-cursor: #d8dee9;
    --color-cursor-text: #2e3440;
    --color-0: #3b4252;
    --color-1: #bf616a;
    --color-2: #a3be8c;
    --color-3: #ebcb8b;
    --color-4: #81a1c1;
    --color-5: #b48ead;
    --color-6: #88c0d0;
    --color-7: #e5e9f0;
    --color-8: #4c566a;
    --color-9: #bf616a;
    --color-10: #a3be8c;
    --color-11: #ebcb8b;
    --color-12: #81a1c1;
    --color-13: #b48ead;
    --color-14: #8fbcbb;
    --color-15: #eceff4;

    --color-bg: #0e1117;
    --color-fg: #82c764;

    --color-fg-secondary: #fff;

    --font-mono: monospace;
    --font-size: 16px;
    --font-line-height: 1.38em;

    --animation-duration: 200ms;
    --animation-stagger-delay: 300ms;
}

@keyframes pulseAnimation {
    0%, 100% {
        background-color: var(--color-cursor);
        color: var(--color-cursor-text);
    }
     50% {
        background-color: var(--color-background);
        color: var(--color-foreground);
    }
}

h1, h2, h3, h4, h5, h6, p {
    font-size: 1em;
    font-weight: normal;
    margin: 0;
}

body {
    font-family: var(--font-mono);
    background-color: var(--color-background);
    color: var(--color-foreground);
    font-size: var(--font-size);
    line-height: var(--font-line-height);
    margin: 1em;
}
::selection {
    color: var(--color-selection-foreground);
    background-color: var(--color-selection-background);
}

body {
    max-width: 82ch;
    margin: 0 auto;
    padding: 1ch;
}

.cursor {
    animation: pulseAnimation 1s infinite;
    background-color: var(--color-cursor);
    color: var(--color-cursor-text);
    line-height: 1em;
    white-space: pre;
}

.output {
    border: 1px solid var(--color-4);
    margin: 1ch 0 var(--font-line-height);
    border-radius: 0.5ch;
    padding: 1ch;
}

.output > header {
    border-bottom: 1px solid var(--color-4);
    margin: -1ch -1ch 1ch;
    padding: 1ch;
}
.output-body {
    color: var(--color-fg-secondary)
}

.output > pre {
    padding: 0 1em
}

a, a:visited {
    color: inherit;
}
code.command::before {
    content: '$ ';
    font-weight: bold;
}
pre.numbered {
    counter-reset: line;
}
pre.numbered *:before {
  counter-increment: line;
  content: counter(line);
  display: inline-block;
  border-right: 1px solid var(--color-8);
  padding: 0 .5em;
  margin-right: .5em;
  color: var(--color-8);
}

.markdown h1,
.markdown h2,
.markdown h3,
.markdown h4,
.markdown h5,
.markdown h6 {
    font-weight: bold;
}

.markdown h1,
.markdown h2,
.markdown h3,
.markdown h4,
.markdown h5,
.markdown h6,
.markdown p {
    margin: var(--font-line-height) 0;
}

.markdown ul {
    padding-left: 2ch;
}


.c0 { color: var(--color-0); }
.c1 { color: var(--color-1); }
.c2 { color: var(--color-2); }
.c3 { color: var(--color-3); }
.c4 { color: var(--color-4); }
.c5 { color: var(--color-5); }
.c6 { color: var(--color-6); }
.c7 { color: var(--color-7); }
.c8 { color: var(--color-8); }
.c9 { color: var(--color-9); }
.c10 { color: var(--color-10); }
.c11 { color: var(--color-11); }
.c12 { color: var(--color-12); }
.c13 { color: var(--color-13); }
.c14 { color: var(--color-14); }
.c15 { color: var(--color-15); }


/* Fade-in animation: slight downward move and fade.
     Stagger purely with CSS: each successive .fade-in sibling
     receives an additional 500ms delay (works when .fade-in
     elements are siblings in the DOM). */
.fade-in {
    opacity: 0;
    transform: translateY(calc(-1 * var(--font-line-height)));
    animation-name: fadeInDown;
    animation-duration: var(--animation-duration);
    animation-timing-function: ease;
    animation-fill-mode: both;
    animation-delay: 0ms;
}

/* Staggered delays (500ms between consecutive .fade-in siblings) */
.fade-in:nth-child(1)  { animation-delay: calc(var(--animation-stagger-delay) * 1); }
.fade-in:nth-child(2)  { animation-delay: calc(var(--animation-stagger-delay) * 2); }
.fade-in:nth-child(3)  { animation-delay: calc(var(--animation-stagger-delay) * 3); }
.fade-in:nth-child(4)  { animation-delay: calc(var(--animation-stagger-delay) * 4); }
.fade-in:nth-child(5)  { animation-delay: calc(var(--animation-stagger-delay) * 5); }
.fade-in:nth-child(6)  { animation-delay: calc(var(--animation-stagger-delay) * 6); }
.fade-in:nth-child(7)  { animation-delay: calc(var(--animation-stagger-delay) * 7); }
.fade-in:nth-child(8)  { animation-delay: calc(var(--animation-stagger-delay) * 8); }
.fade-in:nth-child(9)  { animation-delay: calc(var(--animation-stagger-delay) * 9); }
.fade-in:nth-child(10) { animation-delay: calc(var(--animation-stagger-delay) * 10); }
.fade-in:nth-child(11) { animation-delay: calc(var(--animation-stagger-delay) * 11); }
.fade-in:nth-child(12) { animation-delay: calc(var(--animation-stagger-delay) * 12); }

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(calc(-1 * var(--font-line-height)));
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .fade-in {
        transition: none;
        animation: none;
        opacity: 1;
        transform: none;
    }
}

@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

.command {
    display: flex;
    gap: 1ch;
    flex-wrap: wrap;
}

.typewriter {
    height: var(--font-line-height);
    line-height: var(--font-line-height);
    width: attr(data-length ch);
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    animation: typewriter 300ms steps(attr(data-length type(<number>))) 1ms 1 normal both;
}


@keyframes typewriter{
  from {
    width: 0;
  }
  to {
    width: attr(data-length ch);
  }
}