:root {
    --time-per-stroke: 0.07s;
    --enter-delay: 0.5s;
    --start-delay: 0.5s;
    --blink-time: 0.7s;

    --prompt-about-appear: 1.5s;
    --prompt-about-start: calc(var(--prompt-about-appear) + var(--start-delay));
    --prompt-about-time: calc(var(--time-per-stroke) * 14);
    --result-about-appear: calc(
        var(--prompt-about-start) + var(--prompt-about-time) +
            var(--enter-delay)
    );

    --prompt-skills-start-1: calc(
        var(--result-about-appear) + var(--start-delay)
    );
    --prompt-skills-time-1: calc(var(--time-per-stroke) * 10);
    --prompt-skills-appear-2: calc(
        var(--prompt-skills-start-1) + var(--prompt-skills-time-1) +
            var(--enter-delay)
    );
    --prompt-skills-start-2: calc(
        var(--prompt-skills-appear-2) + var(--start-delay)
    );
    --prompt-skills-time-2: calc(var(--time-per-stroke) * 2);
    --result-skills-appear: calc(
        var(--prompt-skills-start-2) + var(--prompt-skills-time-2) +
            var(--enter-delay)
    );

    --prompt-project-1-appear-1: 0s;
    --prompt-project-1-start-1: calc(
        var(--prompt-project-1-appear-1) + var(--start-delay)
    );
    --prompt-project-1-time-1: calc(var(--time-per-stroke) * 14);
    --prompt-project-1-appear-2: calc(
        var(--prompt-project-1-start-1) + var(--prompt-project-1-time-1) +
            var(--enter-delay)
    );
    --prompt-project-1-start-2: calc(
        var(--prompt-project-1-appear-2) + var(--start-delay)
    );
    --prompt-project-1-time-2: calc(var(--time-per-stroke) * 16);
    --result-project-1-appear: calc(
        var(--prompt-project-1-start-2) + var(--prompt-project-1-time-2) +
            var(--enter-delay)
    );

    --prompt-project-2-appear-1: 0s;
    --prompt-project-2-start-1: calc(
        var(--prompt-project-2-appear-1) + var(--start-delay)
    );
    --prompt-project-2-time-1: calc(var(--time-per-stroke) * 14);
    --prompt-project-2-appear-2: calc(
        var(--prompt-project-2-start-1) + var(--prompt-project-2-time-1) +
            var(--enter-delay)
    );
    --prompt-project-2-start-2: calc(
        var(--prompt-project-2-appear-2) + var(--start-delay)
    );
    --prompt-project-2-time-2: calc(var(--time-per-stroke) * 20);
    --result-project-2-appear: calc(
        var(--prompt-project-2-start-2) + var(--prompt-project-2-time-2) +
            var(--enter-delay)
    );

    --prompt-project-3-appear-1: 0s;
    --prompt-project-3-start-1: calc(
        var(--prompt-project-3-appear-1) + var(--start-delay)
    );
    --prompt-project-3-time-1: calc(var(--time-per-stroke) * 14);
    --prompt-project-3-appear-2: calc(
        var(--prompt-project-3-start-1) + var(--prompt-project-3-time-1) +
            var(--enter-delay)
    );
    --prompt-project-3-start-2: calc(
        var(--prompt-project-3-appear-2) + var(--start-delay)
    );
    --prompt-project-3-time-2: calc(var(--time-per-stroke) * 19);
    --result-project-3-appear: calc(
        var(--prompt-project-3-start-2) + var(--prompt-project-3-time-2) +
            var(--enter-delay)
    );

    --prompt-project-4-appear-1: 0s;
    --prompt-project-4-start-1: calc(
        var(--prompt-project-4-appear-1) + var(--start-delay)
    );
    --prompt-project-4-time-1: calc(var(--time-per-stroke) * 14);
    --prompt-project-4-appear-2: calc(
        var(--prompt-project-4-start-1) + var(--prompt-project-4-time-1) +
            var(--enter-delay)
    );
    --prompt-project-4-start-2: calc(
        var(--prompt-project-4-appear-2) + var(--start-delay)
    );
    --prompt-project-4-time-2: calc(var(--time-per-stroke) * 22);
    --result-project-4-appear: calc(
        var(--prompt-project-4-start-2) + var(--prompt-project-4-time-2) +
            var(--enter-delay)
    );

    --prompt-project-5-appear-1: 0s;
    --prompt-project-5-start-1: calc(
        var(--prompt-project-5-appear-1) + var(--start-delay)
    );
    --prompt-project-5-time-1: calc(var(--time-per-stroke) * 14);
    --prompt-project-5-appear-2: calc(
        var(--prompt-project-5-start-1) + var(--prompt-project-5-time-1) +
            var(--enter-delay)
    );
    --prompt-project-5-start-2: calc(
        var(--prompt-project-5-appear-2) + var(--start-delay)
    );
    --prompt-project-5-time-2: calc(var(--time-per-stroke) * 23);
    --result-project-5-appear: calc(
        var(--prompt-project-5-start-2) + var(--prompt-project-5-time-2) +
            var(--enter-delay)
    );
}

/* ==================== */
/* ANIMATIONS ========= */
/* ==================== */
.terminal-prompt::after {
    content: "";
    border-right: 1ch solid #f8f8f8;
}

.about .terminal-prompt::after {
    animation: prompt-about var(--prompt-about-time) linear
            var(--prompt-about-start) forwards,
        border-blink var(--blink-time) linear 0s infinite,
        border-vanish 0s linear var(--result-about-appear) forwards;
}
.about .terminal-result {
    animation: appear 0s linear var(--result-about-appear) forwards;
}

.skills .terminal-prompt:nth-of-type(1)::after {
    animation: prompt-skills-1 var(--prompt-skills-time-1) linear
            var(--prompt-skills-start-1) forwards,
        border-blink var(--blink-time) linear 0s infinite,
        border-vanish 0s linear var(--prompt-skills-appear-2) forwards;
}
.skills .terminal-prompt:nth-of-type(2) {
    opacity: 0;
    animation: appear 0s linear var(--prompt-skills-appear-2) forwards;
}
.skills .terminal-prompt:nth-of-type(2)::after {
    animation: prompt-skills-2 var(--prompt-skills-time-2) linear
            var(--prompt-skills-start-2) forwards,
        border-blink var(--blink-time) linear 0s infinite,
        border-vanish 0s linear var(--result-skills-appear) forwards;
}
.skills .terminal-result {
    display: flex;
    flex-direction: column;
    gap: 1lh;
    animation: appear 0s linear var(--result-skills-appear) forwards;
}

.project:nth-of-type(1) .terminal-prompt:nth-of-type(1)::after {
    animation: prompt-project-1-1 var(--prompt-project-1-time-1) linear
            var(--prompt-project-1-start-1) forwards,
        border-blink var(--blink-time) linear 0s infinite,
        border-vanish 0s linear var(--prompt-project-1-appear-2) forwards;
}
.project:nth-of-type(1) .terminal-prompt:nth-of-type(2) {
    opacity: 0;
    animation: appear 0s linear var(--prompt-project-1-appear-2) forwards;
}
.project:nth-of-type(1) .terminal-prompt:nth-of-type(2)::after {
    animation: prompt-project-1-2 var(--prompt-project-1-time-2) linear
            var(--prompt-project-1-start-2) forwards,
        border-blink var(--blink-time) linear 0s infinite,
        border-vanish 0s linear var(--result-project-1-appear) forwards;
}
.project:nth-of-type(1) .terminal-result {
    opacity: 0;
    animation: appear 0s linear var(--result-project-1-appear) forwards;
}

.project:nth-of-type(2) .terminal-prompt:nth-of-type(1)::after {
    animation: prompt-project-2-1 var(--prompt-project-2-time-1) linear
            var(--prompt-project-2-start-1) forwards,
        border-blink var(--blink-time) linear 0s infinite,
        border-vanish 0s linear var(--prompt-project-2-appear-2) forwards;
}
.project:nth-of-type(2) .terminal-prompt:nth-of-type(2) {
    opacity: 0;
    animation: appear 0s linear var(--prompt-project-2-appear-2) forwards;
}
.project:nth-of-type(2) .terminal-prompt:nth-of-type(2)::after {
    animation: prompt-project-2-2 var(--prompt-project-2-time-2) linear
            var(--prompt-project-2-start-2) forwards,
        border-blink var(--blink-time) linear 0s infinite,
        border-vanish 0s linear var(--result-project-2-appear) forwards;
}
.project:nth-of-type(2) .terminal-result {
    opacity: 0;
    animation: appear 0s linear var(--result-project-2-appear) forwards;
}

.project:nth-of-type(3) .terminal-prompt:nth-of-type(1)::after {
    animation: prompt-project-3-1 var(--prompt-project-3-time-1) linear
            var(--prompt-project-3-start-1) forwards,
        border-blink var(--blink-time) linear 0s infinite,
        border-vanish 0s linear var(--prompt-project-3-appear-2) forwards;
}
.project:nth-of-type(3) .terminal-prompt:nth-of-type(2) {
    opacity: 0;
    animation: appear 0s linear var(--prompt-project-3-appear-2) forwards;
}
.project:nth-of-type(3) .terminal-prompt:nth-of-type(2)::after {
    animation: prompt-project-3-2 var(--prompt-project-3-time-2) linear
            var(--prompt-project-3-start-2) forwards,
        border-blink var(--blink-time) linear 0s infinite,
        border-vanish 0s linear var(--result-project-3-appear) forwards;
}
.project:nth-of-type(3) .terminal-result {
    opacity: 0;
    animation: appear 0s linear var(--result-project-3-appear) forwards;
}

.project:nth-of-type(4) .terminal-prompt:nth-of-type(1)::after {
    animation: prompt-project-4-1 var(--prompt-project-4-time-1) linear
            var(--prompt-project-4-start-1) forwards,
        border-blink var(--blink-time) linear 0s infinite,
        border-vanish 0s linear var(--prompt-project-4-appear-2) forwards;
}
.project:nth-of-type(4) .terminal-prompt:nth-of-type(2) {
    opacity: 0;
    animation: appear 0s linear var(--prompt-project-4-appear-2) forwards;
}
.project:nth-of-type(4) .terminal-prompt:nth-of-type(2)::after {
    animation: prompt-project-4-2 var(--prompt-project-4-time-2) linear
            var(--prompt-project-4-start-2) forwards,
        border-blink var(--blink-time) linear 0s infinite,
        border-vanish 0s linear var(--result-project-4-appear) forwards;
}
.project:nth-of-type(4) .terminal-result {
    opacity: 0;
    animation: appear 0s linear var(--result-project-4-appear) forwards;
}

.projects .project:nth-of-type(5) .terminal-prompt:nth-of-type(1)::after {
    animation: prompt-project-5-1 var(--prompt-project-5-time-1) linear
            var(--prompt-project-5-start-1) forwards,
        border-blink var(--blink-time) linear 0s infinite,
        border-vanish 0s linear var(--prompt-project-5-appear-2) forwards;
}
.projects .project:nth-of-type(5) .terminal-prompt:nth-of-type(2) {
    opacity: 0;
    animation: appear 0s linear var(--prompt-project-5-appear-2) forwards;
}
.projects .project:nth-of-type(5) .terminal-prompt:nth-of-type(2)::after {
    animation: prompt-project-5-2 var(--prompt-project-5-time-2) linear
            var(--prompt-project-5-start-2) forwards,
        border-blink var(--blink-time) linear 0s infinite,
        border-vanish 0s linear var(--result-project-5-appear) forwards;
}
.projects .project:nth-of-type(5) .terminal-result {
    opacity: 0;
    animation: appear 0s linear var(--result-project-5-appear) forwards;
}

/* ==================== */
/* KEYFRAMES ========== */
/* ==================== */
@keyframes appear {
    0.00% {
        opacity: 0;
    }
    100.00% {
        opacity: 1;
    }
}
@keyframes border-vanish {
    100.00% {
        border: none;
    }
}
@keyframes border-appear {
    100.00% {
        border-color: transparent;
    }
}
@keyframes border-blink {
    50.00% {
        border-color: transparent;
    }
}
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes wave {
    0% {
        transform: rotate(0deg);
    }
    10% {
        transform: rotate(14deg);
    }
    20% {
        transform: rotate(-8deg);
    }
    30% {
        transform: rotate(14deg);
    }
    40% {
        transform: rotate(-4deg);
    }
    50% {
        transform: rotate(10deg);
    }
    60% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

@keyframes prompt-about {
    /*14*/
    0.00% {
        content: "";
    }
    7.69% {
        content: "c";
    }
    15.38% {
        content: "ca";
    }
    23.08% {
        content: "cat";
    }
    30.77% {
        content: "cat ";
    }
    38.46% {
        content: "cat a";
    }
    46.15% {
        content: "cat ab";
    }
    53.85% {
        content: "cat abo";
    }
    61.54% {
        content: "cat abou";
    }
    69.23% {
        content: "cat about";
    }
    76.92% {
        content: "cat about.";
    }
    84.62% {
        content: "cat about.\200B t";
    }
    92.31% {
        content: "cat about.\200B tx";
    }
    100.00% {
        content: "cat about.\200B txt";
    }
}

@keyframes prompt-skills-1 {
    /*10*/
    10.00% {
        content: "";
    }
    20.00% {
        content: "c";
    }
    30.00% {
        content: "cd";
    }
    40.00% {
        content: "cd ";
    }
    50.00% {
        content: "cd s";
    }
    60.00% {
        content: "cd sk";
    }
    70.00% {
        content: "cd ski";
    }
    80.00% {
        content: "cd skil";
    }
    90.00% {
        content: "cd skill";
    }
    100.00% {
        content: "cd skills";
    }
}
@keyframes prompt-skills-2 {
    /*3*/
    0.00% {
        content: "";
    }
    50.00% {
        content: "l";
    }
    100.00% {
        content: "ls";
    }
}

@keyframes prompt-project-3-1 {
    /*14*/
    0.00% {
        content: "";
    }
    7.69% {
        content: "g";
    }
    15.38% {
        content: "gi";
    }
    23.08% {
        content: "git";
    }
    30.77% {
        content: "git ";
    }
    38.46% {
        content: "git c";
    }
    46.15% {
        content: "git cl";
    }
    53.85% {
        content: "git clo";
    }
    61.54% {
        content: "git clon";
    }
    69.23% {
        content: "git clone";
    }
    76.92% {
        content: "git clone ";
    }
    84.62% {
        content: "git clone ";
    }
    92.31% {
        content: "git clone ";
    }
    100.00% {
        content: "git clone git@\200B github.com:\200B flavioschenker/\200B llm.git";
    }
}
@keyframes prompt-project-1-1 {
    /*14*/
    0.00% {
        content: "";
    }
    7.69% {
        content: "g";
    }
    15.38% {
        content: "gi";
    }
    23.08% {
        content: "git";
    }
    30.77% {
        content: "git ";
    }
    38.46% {
        content: "git c";
    }
    46.15% {
        content: "git cl";
    }
    53.85% {
        content: "git clo";
    }
    61.54% {
        content: "git clon";
    }
    69.23% {
        content: "git clone";
    }
    76.92% {
        content: "git clone ";
    }
    84.62% {
        content: "git clone ";
    }
    92.31% {
        content: "git clone ";
    }
    100.00% {
        content: "git clone git@\200B github.com:\200B flavioschenker/\200B integer.git";
    }
}
@keyframes prompt-project-2-1 {
    /*14*/
    0.00% {
        content: "";
    }
    7.69% {
        content: "g";
    }
    15.38% {
        content: "gi";
    }
    23.08% {
        content: "git";
    }
    30.77% {
        content: "git ";
    }
    38.46% {
        content: "git c";
    }
    46.15% {
        content: "git cl";
    }
    53.85% {
        content: "git clo";
    }
    61.54% {
        content: "git clon";
    }
    69.23% {
        content: "git clone";
    }
    76.92% {
        content: "git clone ";
    }
    84.62% {
        content: "git clone ";
    }
    92.31% {
        content: "git clone ";
    }
    100.00% {
        content: "git clone git@\200B github.com:\200B flavioschenker/\200B functa.git";
    }
}
@keyframes prompt-project-4-1 {
    /*14*/
    0.00% {
        content: "";
    }
    7.69% {
        content: "g";
    }
    15.38% {
        content: "gi";
    }
    23.08% {
        content: "git";
    }
    30.77% {
        content: "git ";
    }
    38.46% {
        content: "git c";
    }
    46.15% {
        content: "git cl";
    }
    53.85% {
        content: "git clo";
    }
    61.54% {
        content: "git clon";
    }
    69.23% {
        content: "git clone";
    }
    76.92% {
        content: "git clone ";
    }
    84.62% {
        content: "git clone ";
    }
    92.31% {
        content: "git clone ";
    }
    100.00% {
        content: "git clone git@\200B github.com:\200B flavioschenker/\200B webdesign.git";
    }
}
@keyframes prompt-project-5-1 {
    /*14*/
    0.00% {
        content: "";
    }
    7.69% {
        content: "g";
    }
    15.38% {
        content: "gi";
    }
    23.08% {
        content: "git";
    }
    30.77% {
        content: "git ";
    }
    38.46% {
        content: "git c";
    }
    46.15% {
        content: "git cl";
    }
    53.85% {
        content: "git clo";
    }
    61.54% {
        content: "git clon";
    }
    69.23% {
        content: "git clone";
    }
    76.92% {
        content: "git clone ";
    }
    84.62% {
        content: "git clone ";
    }
    92.31% {
        content: "git clone ";
    }
    100.00% {
        content: "git clone git@\200B github.com:\200B flavioschenker/\200B blockchain.git";
    }
}

@keyframes prompt-project-3-2 {
    /*16*/
    0.00% {
        content: "";
    }
    6.67% {
        content: "c";
    }
    13.33% {
        content: "co";
    }
    20.00% {
        content: "cod";
    }
    26.67% {
        content: "code";
    }
    33.33% {
        content: "code ";
    }
    40.00% {
        content: "code .";
    }
    46.67% {
        content: "code ./";
    }
    53.33% {
        content: "code ./\200B l";
    }
    60.00% {
        content: "code ./\200B ll";
    }
    66.67% {
        content: "code ./\200B llm";
    }
    73.33% {
        content: "code ./\200B llm/";
    }
    80.00% {
        content: "code ./\200B llm/\200B r";
    }
    86.67% {
        content: "code ./\200B llm/\200B r";
    }
    93.33% {
        content: "code ./\200B llm/\200B r";
    }
    100.00% {
        content: "code ./\200B llm/\200B readme.md";
    }
}
@keyframes prompt-project-1-2 {
    /*20*/
    0.00% {
        content: "";
    }
    5.26% {
        content: "c";
    }
    10.53% {
        content: "co";
    }
    15.79% {
        content: "cod";
    }
    21.05% {
        content: "code";
    }
    26.32% {
        content: "code ";
    }
    31.58% {
        content: "code .";
    }
    36.84% {
        content: "code ./";
    }
    42.11% {
        content: "code ./\200B i";
    }
    47.37% {
        content: "code ./\200B in";
    }
    52.63% {
        content: "code ./\200B int";
    }
    57.89% {
        content: "code ./\200B inte";
    }
    63.16% {
        content: "code ./\200B integ";
    }
    68.42% {
        content: "code ./\200B intege";
    }
    73.68% {
        content: "code ./\200B integer";
    }
    78.95% {
        content: "code ./\200B integer/";
    }
    84.21% {
        content: "code ./\200B integer/\200B r";
    }
    89.47% {
        content: "code ./\200B integer/\200B r";
    }
    97.74% {
        content: "code ./\200B integer/\200B r";
    }
    100.00% {
        content: "code ./\200B integer/\200B readme.md";
    }
}
@keyframes prompt-project-2-2 {
    /*19*/
    0.00% {
        content: "";
    }
    5.56% {
        content: "c";
    }
    11.11% {
        content: "co";
    }
    16.67% {
        content: "cod";
    }
    22.22% {
        content: "code";
    }
    27.78% {
        content: "code ";
    }
    33.33% {
        content: "code .";
    }
    38.89% {
        content: "code ./";
    }
    44.44% {
        content: "code ./\200B f";
    }
    50.00% {
        content: "code ./\200B fu";
    }
    55.56% {
        content: "code ./\200B fun";
    }
    61.11% {
        content: "code ./\200B func";
    }
    66.67% {
        content: "code ./\200B funct";
    }
    72.22% {
        content: "code ./\200B functa";
    }
    77.78% {
        content: "code ./\200B functa/";
    }
    83.33% {
        content: "code ./\200B functa/\200B r";
    }
    88.89% {
        content: "code ./\200B functa/\200B r";
    }
    94.44% {
        content: "code ./\200B functa/\200B r";
    }
    100.00% {
        content: "code ./\200B functa/\200B readme.md";
    }
}
@keyframes prompt-project-4-2 {
    /*22*/
    0.00% {
        content: "";
    }
    4.76% {
        content: "c";
    }
    9.52% {
        content: "co";
    }
    14.29% {
        content: "cod";
    }
    19.05% {
        content: "code";
    }
    23.81% {
        content: "code ";
    }
    28.57% {
        content: "code .";
    }
    33.33% {
        content: "code ./";
    }
    38.10% {
        content: "code ./\200B w";
    }
    42.86% {
        content: "code ./\200B we";
    }
    47.62% {
        content: "code ./\200B web";
    }
    52.38% {
        content: "code ./\200B webd";
    }
    57.14% {
        content: "code ./\200B webde";
    }
    61.90% {
        content: "code ./\200B webdes";
    }
    66.67% {
        content: "code ./\200B webdesi";
    }
    71.43% {
        content: "code ./\200B webdesig";
    }
    76.19% {
        content: "code ./\200B webdesign";
    }
    80.95% {
        content: "code ./\200B webdesign/";
    }
    85.71% {
        content: "code ./\200B webdesign/\200B r";
    }
    90.48% {
        content: "code ./\200B webdesign/\200B r";
    }
    95.24% {
        content: "code ./\200B webdesign/\200B r";
    }
    100.00% {
        content: "code ./\200B webdesign/\200B readme.md";
    }
}
@keyframes prompt-project-5-2 {
    /*23*/
    0.00% {
        content: "";
    }
    4.55% {
        content: "c";
    }
    9.09% {
        content: "co";
    }
    13.64% {
        content: "cod";
    }
    18.18% {
        content: "code";
    }
    22.73% {
        content: "code ";
    }
    27.27% {
        content: "code .";
    }
    31.82% {
        content: "code ./";
    }
    36.36% {
        content: "code ./\200B b";
    }
    40.91% {
        content: "code ./\200B bl";
    }
    45.45% {
        content: "code ./\200B blo";
    }
    50.00% {
        content: "code ./\200B bloc";
    }
    54.55% {
        content: "code ./\200B block";
    }
    59.09% {
        content: "code ./\200B blockc";
    }
    63.64% {
        content: "code ./\200B blockch";
    }
    68.18% {
        content: "code ./\200B blockcha";
    }
    72.73% {
        content: "code ./\200B blockchai";
    }
    77.27% {
        content: "code ./\200B blockchain";
    }
    81.82% {
        content: "code ./\200B blockchain/";
    }
    86.36% {
        content: "code ./\200B blockchain/\200B r";
    }
    90.91% {
        content: "code ./\200B blockchain/\200B r";
    }
    95.45% {
        content: "code ./\200B blockchain/\200B r";
    }
    100.00% {
        content: "code ./\200B blockchain/\200B readme.md";
    }
}