.content {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 20vw;
    z-index: 121;
}

#bongo-cat {
    top: 10vh;
    margin: auto;
}

.typing-animation {
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-duration: 1200ms;
    animation-duration: 1200ms;
}

path#f1-l1 {
    -webkit-animation-name: typing-f1-l1;
    animation-name: typing-f1-l1;
}

path#f1-l2 {
    -webkit-animation-name: typing-f1-l2;
    animation-name: typing-f1-l2;
}

path#f1-l3 {
    -webkit-animation-name: typing-f1-l3;
    animation-name: typing-f1-l3;
}

path#f2-l4 {
    -webkit-animation-name: typing-f2-l4;
    animation-name: typing-f2-l4;
}

path#f2-l5 {
    -webkit-animation-name: typing-f2-l5;
    animation-name: typing-f2-l5;
}

path#f2-l6 {
    -webkit-animation-name: typing-f2-l6;
    animation-name: typing-f2-l6;
}

path#f3-l7 {
    -webkit-animation-name: typing-f3-l7;
    animation-name: typing-f3-l7;
}

path#f3-l8 {
    -webkit-animation-name: typing-f3-l8;
    animation-name: typing-f3-l8;
}

path#f3-l9 {
    -webkit-animation-name: typing-f3-l9;
    animation-name: typing-f3-l9;
}

/*屏幕显示代码start*/
@-webkit-keyframes typing-f3-l9 {
    0% {
        d: path("M8,25L8,25");
    }
    82% {
        d: path("M8,25L8,25");
    }
    92% {
        d: path("M8,25L96,25");
    }
    100% {
        d: path("M8,25L96,25");
    }
}

@keyframes typing-f3-l9 {
    0% {
        d: path("M8,25L8,25");
    }
    82% {
        d: path("M8,25L8,25");
    }
    92% {
        d: path("M8,25L96,25");
    }
    100% {
        d: path("M8,25L96,25");
    }
}

@-webkit-keyframes typing-f3-l8 {
    0% {
        d: path("M8,13L8,13");
    }
    68% {
        d: path("M8,13L8,13");
    }
    82% {
        d: path("M8,13L146,13");
    }
    100% {
        d: path("M8,13L146,13");
    }
}

@keyframes typing-f3-l8 {
    0% {
        d: path("M8,13L8,13");
    }
    68% {
        d: path("M8,13L8,13");
    }
    82% {
        d: path("M8,13L146,13");
    }
    100% {
        d: path("M8,13L146,13");
    }
}

@-webkit-keyframes typing-f3-l7 {
    0% {
        d: path("M0,1L0,1");
    }
    60% {
        d: path("M0,1L0,1");
    }
    68% {
        d: path("M0,1L96,1");
    }
    100% {
        d: path("M0,1L96,1");
    }
}

@keyframes typing-f3-l7 {
    0% {
        d: path("M0,1L0,1");
    }
    60% {
        d: path("M0,1L0,1");
    }
    68% {
        d: path("M0,1L96,1");
    }
    100% {
        d: path("M0,1L96,1");
    }
}

@-webkit-keyframes typing-f2-l6 {
    0% {
        d: path("M8,25L8,25");
    }
    54% {
        d: path("M8,25L8,25");
    }
    60% {
        d: path("M8,25L69,25");
    }
    100% {
        d: path("M8,25L69,25");
    }
}

@keyframes typing-f2-l6 {
    0% {
        d: path("M8,25L8,25");
    }
    54% {
        d: path("M8,25L8,25");
    }
    60% {
        d: path("M8,25L69,25");
    }
    100% {
        d: path("M8,25L69,25");
    }
}

@-webkit-keyframes typing-f2-l5 {
    0% {
        d: path("M8,13L8,13");
    }
    44% {
        d: path("M8,13L8,13");
    }
    54% {
        d: path("M8,13L114,13");
    }
    100% {
        d: path("M8,13L114,13");
    }
}

@keyframes typing-f2-l5 {
    0% {
        d: path("M8,13L8,13");
    }
    44% {
        d: path("M8,13L8,13");
    }
    54% {
        d: path("M8,13L114,13");
    }
    100% {
        d: path("M8,13L114,13");
    }
}

@-webkit-keyframes typing-f2-l4 {
    0% {
        d: path("M0,1L0,1");
    }
    30% {
        d: path("M0,1L0,1");
    }
    44% {
        d: path("M0,1L136,1");
    }
    100% {
        d: path("M0,1L136,1");
    }
}

@keyframes typing-f2-l4 {
    0% {
        d: path("M0,1L0,1");
    }
    30% {
        d: path("M0,1L0,1");
    }
    44% {
        d: path("M0,1L136,1");
    }
    100% {
        d: path("M0,1L136,1");
    }
}

@-webkit-keyframes typing-f1-l3 {
    0% {
        d: path("M8,25L8,25");
    }
    24% {
        d: path("M8,25L8,25");
    }
    30% {
        d: path("M8,25L61,25");
    }
    100% {
        d: path("M8,25L61,25");
    }
}

@keyframes typing-f1-l3 {
    0% {
        d: path("M8,25L8,25");
    }
    24% {
        d: path("M8,25L8,25");
    }
    30% {
        d: path("M8,25L61,25");
    }
    100% {
        d: path("M8,25L61,25");
    }
}

@-webkit-keyframes typing-f1-l2 {
    0% {
        d: path("M8,13L8,13");
    }
    14% {
        d: path("M8,13L8,13");
    }
    24% {
        d: path("M8,13L124,13");
    }
    100% {
        d: path("M8,13L124,13");
    }
}

@keyframes typing-f1-l2 {
    0% {
        d: path("M8,13L8,13");
    }
    14% {
        d: path("M8,13L8,13");
    }
    24% {
        d: path("M8,13L124,13");
    }
    100% {
        d: path("M8,13L124,13");
    }
}

@-webkit-keyframes typing-f1-l1 {
    0% {
        d: path("M0,1L0,1");
    }
    14% {
        d: path("M0,1L160,1");
    }
    100% {
        d: path("M0,1L160,1");
    }
}

@keyframes typing-f1-l1 {
    0% {
        d: path("M0,1L0,1");
    }
    14% {
        d: path("M0,1L160,1");
    }
    100% {
        d: path("M0,1L160,1");
    }
}

/*屏幕显示代码end*/
#paw-right--up,
#paw-right--down,
#paw-left--up,
#paw-left--down {
    -webkit-animation: blink 300ms infinite;
    animation: blink 300ms infinite;
}

#paw-right--up,
#paw-left--down {
    -webkit-animation-delay: 150ms;
    animation-delay: 150ms;
}

@-webkit-keyframes blink {
    0% {
        opacity: 0;
    }
    49% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
}

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

#laptop__code {
    -webkit-transform: rotateX(-37deg) rotateY(-46deg) rotateZ(-23deg) translateX(8px) translateY(20px) translateZ(-50px);
    transform: rotateX(-37deg) rotateY(-46deg) rotateZ(-23deg) translateX(8px) translateY(20px) translateZ(-50px);
}