.snippet {
    background: #fff;
    background: #1f589a;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    display:flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.stage {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 100px;
    overflow: hidden;
    position: relative;
}
.dot-elastic {
    position: relative;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: var(--f-c-6);
    color: var(--f-c-6);
    animation: dotElastic 1s infinite linear
}

.dot-elastic::before,
.dot-elastic::after {
    content: '';
    display: inline-block;
    position: absolute;
    top: 0;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: var(--f-c-6);
    color: var(--f-c-6)
}

.dot-elastic::before {
    left: -15px;
    animation: dotElasticBefore 1s infinite linear
}

.dot-elastic::after {
    left: 15px;
    animation: dotElasticAfter 1s infinite linear
}

@keyframes dotElasticBefore {
    0% {
        transform: scale(1, 1)
    }

    25% {
        transform: scale(1, 1.5)
    }

    50% {
        transform: scale(1, 0.67)
    }

    75% {
        transform: scale(1, 1)
    }

    100% {
        transform: scale(1, 1)
    }
}

@keyframes dotElastic {
    0% {
        transform: scale(1, 1)
    }

    25% {
        transform: scale(1, 1)
    }

    50% {
        transform: scale(1, 1.5)
    }

    75% {
        transform: scale(1, 1)
    }

    100% {
        transform: scale(1, 1)
    }
}

@keyframes dotElasticAfter {
    0% {
        transform: scale(1, 1)
    }

    25% {
        transform: scale(1, 1)
    }

    50% {
        transform: scale(1, 0.67)
    }

    75% {
        transform: scale(1, 1.5)
    }

    100% {
        transform: scale(1, 1)
    }
}

.dot-pulse {
    position: relative;
    left: -9999px;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: var(--f-c-6);
    color: var(--f-c-6);
    box-shadow: 9984px 0 0 0 var(--f-c-6), 9999px 0 0 0 var(--f-c-6), 10014px 0 0 0 var(--f-c-6);
    animation: dotPulse 1.5s infinite linear
}

@keyframes dotPulse {
    0% {
        box-shadow: 9984px 0 0 -5px var(--f-c-6), 9999px 0 0 0 var(--f-c-6), 10014px 0 0 2px var(--f-c-6)
    }

    25% {
        box-shadow: 9984px 0 0 0 var(--f-c-6), 9999px 0 0 2px var(--f-c-6), 10014px 0 0 0 var(--f-c-6)
    }

    50% {
        box-shadow: 9984px 0 0 2px var(--f-c-6), 9999px 0 0 0 var(--f-c-6), 10014px 0 0 -5px var(--f-c-6)
    }

    75% {
        box-shadow: 9984px 0 0 0 var(--f-c-6), 9999px 0 0 -5px var(--f-c-6), 10014px 0 0 0 var(--f-c-6)
    }

    100% {
        box-shadow: 9984px 0 0 -5px var(--f-c-6), 9999px 0 0 0 var(--f-c-6), 10014px 0 0 2px var(--f-c-6)
    }
}

.dot-flashing {
    position: relative;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: var(--f-c-6);
    color: var(--f-c-6);
    animation: dotFlashing 1s infinite linear alternate;
    animation-delay: .5s
}

.dot-flashing::before,
.dot-flashing::after {
    content: '';
    display: inline-block;
    position: absolute;
    top: 0;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: var(--f-c-6);
    color: var(--f-c-6)
}

.dot-flashing::before {
    left: -15px;
    animation: dotFlashing 1s infinite alternate;
    animation-delay: 0s
}

.dot-flashing::after {
    left: 15px;
    animation: dotFlashing 1s infinite alternate;
    animation-delay: 1s
}

@keyframes dotFlashing {
    0% {
        background-color: var(--f-c-6)
    }

    100% {
        background-color: #ebe6ff
    }
}

.dot-collision {
    position: relative;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: var(--f-c-6);
    color: var(--f-c-6)
}

.dot-collision::before,
.dot-collision::after {
    content: '';
    display: inline-block;
    position: absolute;
    top: 0;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: var(--f-c-6);
    color: var(--f-c-6)
}

.dot-collision::before {
    left: -10px;
    animation: dotCollisionBefore 2s infinite ease-in
}

.dot-collision::after {
    left: 10px;
    animation: dotCollisionAfter 2s infinite ease-in;
    animation-delay: 1s
}

@keyframes dotCollisionBefore {

    0%,
    50%,
    75%,
    100% {
        transform: translateX(0)
    }

    25% {
        transform: translateX(-15px)
    }
}

@keyframes dotCollisionAfter {

    0%,
    50%,
    75%,
    100% {
        transform: translateX(0)
    }

    25% {
        transform: translateX(15px)
    }
}

.dot-revolution {
    position: relative;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: var(--f-c-6);
    color: var(--f-c-6)
}

.dot-revolution::before,
.dot-revolution::after {
    content: '';
    display: inline-block;
    position: absolute;
    top: 0;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: var(--f-c-6);
    color: var(--f-c-6)
}

.dot-revolution::before {
    left: 0;
    top: -15px;
    transform-origin: 5px 20px;
    animation: dotRevolution 1.4s linear infinite
}

.dot-revolution::after {
    left: 0;
    top: -30px;
    transform-origin: 5px 35px;
    animation: dotRevolution 1s linear infinite
}

@keyframes dotRevolution {
    0% {
        transform: rotateZ(0deg) translate3d(0, 0, 0)
    }

    100% {
        transform: rotateZ(360deg) translate3d(0, 0, 0)
    }
}

.dot-carousel {
    position: relative;
    left: -9999px;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: var(--f-c-6);
    color: var(--f-c-6);
    box-shadow: 9984px 0 0 0 var(--f-c-6), 9999px 0 0 0 var(--f-c-6), 10014px 0 0 0 var(--f-c-6);
    animation: dotCarousel 1.5s infinite linear
}

@keyframes dotCarousel {
    0% {
        box-shadow: 9984px 0 0 -1px var(--f-c-6), 9999px 0 0 1px var(--f-c-6), 10014px 0 0 -1px var(--f-c-6)
    }

    50% {
        box-shadow: 10014px 0 0 -1px var(--f-c-6), 9984px 0 0 -1px var(--f-c-6), 9999px 0 0 1px var(--f-c-6)
    }

    100% {
        box-shadow: 9999px 0 0 1px var(--f-c-6), 10014px 0 0 -1px var(--f-c-6), 9984px 0 0 -1px var(--f-c-6)
    }
}

.dot-typing {
    position: relative;
    left: -9999px;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: var(--f-c-6);
    color: var(--f-c-6);
    box-shadow: 9984px 0 0 0 var(--f-c-6), 9999px 0 0 0 var(--f-c-6), 10014px 0 0 0 var(--f-c-6);
    animation: dotTyping 1.5s infinite linear
}

@keyframes dotTyping {
    0% {
        box-shadow: 9984px 0 0 0 var(--f-c-6), 9999px 0 0 0 var(--f-c-6), 10014px 0 0 0 var(--f-c-6)
    }

    16.667% {
        box-shadow: 9984px -10px 0 0 var(--f-c-6), 9999px 0 0 0 var(--f-c-6), 10014px 0 0 0 var(--f-c-6)
    }

    33.333% {
        box-shadow: 9984px 0 0 0 var(--f-c-6), 9999px 0 0 0 var(--f-c-6), 10014px 0 0 0 var(--f-c-6)
    }

    50% {
        box-shadow: 9984px 0 0 0 var(--f-c-6), 9999px -10px 0 0 var(--f-c-6), 10014px 0 0 0 var(--f-c-6)
    }

    66.667% {
        box-shadow: 9984px 0 0 0 var(--f-c-6), 9999px 0 0 0 var(--f-c-6), 10014px 0 0 0 var(--f-c-6)
    }

    83.333% {
        box-shadow: 9984px 0 0 0 var(--f-c-6), 9999px 0 0 0 var(--f-c-6), 10014px -10px 0 0 var(--f-c-6)
    }

    100% {
        box-shadow: 9984px 0 0 0 var(--f-c-6), 9999px 0 0 0 var(--f-c-6), 10014px 0 0 0 var(--f-c-6)
    }
}

.dot-windmill {
    position: relative;
    top: -15px;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: var(--f-c-6);
    color: var(--f-c-6);
    transform-origin: 5px 20px;
    animation: dotWindmill 2s infinite linear
}

.dot-windmill::before,
.dot-windmill::after {
    content: '';
    display: inline-block;
    position: absolute;
    top: 0;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: var(--f-c-6);
    color: var(--f-c-6)
}

.dot-windmill::before {
    left: -12.99px;
    top: 22.5px
}

.dot-windmill::after {
    left: 12.99px;
    top: 22.5px
}

@keyframes dotWindmill {
    0% {
        transform: rotateZ(0deg) translate3d(0, 0, 0)
    }

    100% {
        transform: rotateZ(720deg) translate3d(0, 0, 0)
    }
}

.dot-bricks {
    position: relative;
    top: 8px;
    left: -9999px;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: var(--f-c-6);
    color: var(--f-c-6);
    box-shadow: 9991px -16px 0 0 var(--f-c-6), 9991px 0 0 0 var(--f-c-6), 10007px 0 0 0 var(--f-c-6);
    animation: dotBricks 2s infinite ease
}

@keyframes dotBricks {
    0% {
        box-shadow: 9991px -16px 0 0 var(--f-c-6), 9991px 0 0 0 var(--f-c-6), 10007px 0 0 0 var(--f-c-6)
    }

    8.333% {
        box-shadow: 10007px -16px 0 0 var(--f-c-6), 9991px 0 0 0 var(--f-c-6), 10007px 0 0 0 var(--f-c-6)
    }

    16.667% {
        box-shadow: 10007px -16px 0 0 var(--f-c-6), 9991px -16px 0 0 var(--f-c-6), 10007px 0 0 0 var(--f-c-6)
    }

    25% {
        box-shadow: 10007px -16px 0 0 var(--f-c-6), 9991px -16px 0 0 var(--f-c-6), 9991px 0 0 0 var(--f-c-6)
    }

    33.333% {
        box-shadow: 10007px 0 0 0 var(--f-c-6), 9991px -16px 0 0 var(--f-c-6), 9991px 0 0 0 var(--f-c-6)
    }

    41.667% {
        box-shadow: 10007px 0 0 0 var(--f-c-6), 10007px -16px 0 0 var(--f-c-6), 9991px 0 0 0 var(--f-c-6)
    }

    50% {
        box-shadow: 10007px 0 0 0 var(--f-c-6), 10007px -16px 0 0 var(--f-c-6), 9991px -16px 0 0 var(--f-c-6)
    }

    58.333% {
        box-shadow: 9991px 0 0 0 var(--f-c-6), 10007px -16px 0 0 var(--f-c-6), 9991px -16px 0 0 var(--f-c-6)
    }

    66.666% {
        box-shadow: 9991px 0 0 0 var(--f-c-6), 10007px 0 0 0 var(--f-c-6), 9991px -16px 0 0 var(--f-c-6)
    }

    75% {
        box-shadow: 9991px 0 0 0 var(--f-c-6), 10007px 0 0 0 var(--f-c-6), 10007px -16px 0 0 var(--f-c-6)
    }

    83.333% {
        box-shadow: 9991px -16px 0 0 var(--f-c-6), 10007px 0 0 0 var(--f-c-6), 10007px -16px 0 0 var(--f-c-6)
    }

    91.667% {
        box-shadow: 9991px -16px 0 0 var(--f-c-6), 9991px 0 0 0 var(--f-c-6), 10007px -16px 0 0 var(--f-c-6)
    }

    100% {
        box-shadow: 9991px -16px 0 0 var(--f-c-6), 9991px 0 0 0 var(--f-c-6), 10007px 0 0 0 var(--f-c-6)
    }
}

.dot-floating {
    position: relative;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: var(--f-c-6);
    color: var(--f-c-6);
    animation: dotFloating 3s infinite cubic-bezier(0.15, 0.6, 0.9, 0.1)
}

.dot-floating::before,
.dot-floating::after {
    content: '';
    display: inline-block;
    position: absolute;
    top: 0;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: var(--f-c-6);
    color: var(--f-c-6)
}

.dot-floating::before {
    left: -12px;
    animation: dotFloatingBefore 3s infinite ease-in-out
}

.dot-floating::after {
    left: -24px;
    animation: dotFloatingAfter 3s infinite cubic-bezier(0.4, 0, 1, 1)
}

@keyframes dotFloating {
    0% {
        left: calc(-50% - 5px)
    }

    75% {
        left: calc(50% + 105px)
    }

    100% {
        left: calc(50% + 105px)
    }
}

@keyframes dotFloatingBefore {
    0% {
        left: -50px
    }

    50% {
        left: -12px
    }

    75% {
        left: -50px
    }

    100% {
        left: -50px
    }
}

@keyframes dotFloatingAfter {
    0% {
        left: -100px
    }

    50% {
        left: -24px
    }

    75% {
        left: -100px
    }

    100% {
        left: -100px
    }
}

.dot-fire {
    position: relative;
    left: -9999px;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: var(--f-c-6);
    color: var(--f-c-6);
    box-shadow: 9999px -15px 0 0;
    animation: dotFire 1s infinite linear
}

.dot-fire::before,
.dot-fire::after {
    content: '';
    display: inline-block;
    position: absolute;
    top: 0;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: var(--f-c-6);
    color: var(--f-c-6)
}

.dot-fire::before {
    box-shadow: 9999px -5px 0 0;
    animation: dotFireBefore 1s infinite linear
}

.dot-fire::after {
    box-shadow: 9999px 15px 0 0;
    animation: dotFireAfter 1s infinite linear
}

@keyframes dotFire {
    0% {
        box-shadow: 9999px -15px 0 -3px
    }

    1%,
    50% {
        box-shadow: 9999px 15px 0 -5px
    }

    100% {
        box-shadow: 9999px -5px 0 2px
    }
}

@keyframes dotFireBefore {
    0% {
        box-shadow: 9999px -5px 0 2px
    }

    50% {
        box-shadow: 9999px -15px 0 -3px
    }

    51%,
    100% {
        box-shadow: 9999px 15px 0 -5px
    }
}

@keyframes dotFireAfter {
    1% {
        box-shadow: 9999px 15px 0 -5px
    }

    50% {
        box-shadow: 9999px -5px 0 2px
    }

    100%,
    0% {
        box-shadow: 9999px -15px 0 -3px
    }
}

.dot-spin {
    position: relative;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: transparent;
    color: transparent;
    box-shadow: 0 -18px 0 0 var(--f-c-6), 12.72984px -12.72984px 0 0 var(--f-c-6), 18px 0 0 0 var(--f-c-6), 12.72984px 12.72984px 0 0 rgba(152, 128, 255, 0), 0 18px 0 0 rgba(152, 128, 255, 0), -12.72984px 12.72984px 0 0 rgba(152, 128, 255, 0), -18px 0 0 0 rgba(152, 128, 255, 0), -12.72984px -12.72984px 0 0 rgba(152, 128, 255, 0);
    animation: dotSpin 1.5s infinite linear
}

@keyframes dotSpin {

    0%,
    100% {
        box-shadow: 0 -18px 0 0 var(--f-c-6), 12.72984px -12.72984px 0 0 var(--f-c-6), 18px 0 0 0 var(--f-c-6), 12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0), 0 18px 0 -5px rgba(152, 128, 255, 0), -12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0), -18px 0 0 -5px rgba(152, 128, 255, 0), -12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0)
    }

    12.5% {
        box-shadow: 0 -18px 0 -5px rgba(152, 128, 255, 0), 12.72984px -12.72984px 0 0 var(--f-c-6), 18px 0 0 0 var(--f-c-6), 12.72984px 12.72984px 0 0 var(--f-c-6), 0 18px 0 -5px rgba(152, 128, 255, 0), -12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0), -18px 0 0 -5px rgba(152, 128, 255, 0), -12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0)
    }

    25% {
        box-shadow: 0 -18px 0 -5px rgba(152, 128, 255, 0), 12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0), 18px 0 0 0 var(--f-c-6), 12.72984px 12.72984px 0 0 var(--f-c-6), 0 18px 0 0 var(--f-c-6), -12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0), -18px 0 0 -5px rgba(152, 128, 255, 0), -12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0)
    }

    37.5% {
        box-shadow: 0 -18px 0 -5px rgba(152, 128, 255, 0), 12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0), 18px 0 0 -5px rgba(152, 128, 255, 0), 12.72984px 12.72984px 0 0 var(--f-c-6), 0 18px 0 0 var(--f-c-6), -12.72984px 12.72984px 0 0 var(--f-c-6), -18px 0 0 -5px rgba(152, 128, 255, 0), -12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0)
    }

    50% {
        box-shadow: 0 -18px 0 -5px rgba(152, 128, 255, 0), 12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0), 18px 0 0 -5px rgba(152, 128, 255, 0), 12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0), 0 18px 0 0 var(--f-c-6), -12.72984px 12.72984px 0 0 var(--f-c-6), -18px 0 0 0 var(--f-c-6), -12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0)
    }

    62.5% {
        box-shadow: 0 -18px 0 -5px rgba(152, 128, 255, 0), 12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0), 18px 0 0 -5px rgba(152, 128, 255, 0), 12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0), 0 18px 0 -5px rgba(152, 128, 255, 0), -12.72984px 12.72984px 0 0 var(--f-c-6), -18px 0 0 0 var(--f-c-6), -12.72984px -12.72984px 0 0 var(--f-c-6)
    }

    75% {
        box-shadow: 0 -18px 0 0 var(--f-c-6), 12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0), 18px 0 0 -5px rgba(152, 128, 255, 0), 12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0), 0 18px 0 -5px rgba(152, 128, 255, 0), -12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0), -18px 0 0 0 var(--f-c-6), -12.72984px -12.72984px 0 0 var(--f-c-6)
    }

    87.5% {
        box-shadow: 0 -18px 0 0 var(--f-c-6), 12.72984px -12.72984px 0 0 var(--f-c-6), 18px 0 0 -5px rgba(152, 128, 255, 0), 12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0), 0 18px 0 -5px rgba(152, 128, 255, 0), -12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0), -18px 0 0 -5px rgba(152, 128, 255, 0), -12.72984px -12.72984px 0 0 var(--f-c-6)
    }
}

.dot-falling {
    position: relative;
    left: -9999px;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: var(--f-c-6);
    color: var(--f-c-6);
    box-shadow: 9999px 0 0 0 var(--f-c-6);
    animation: dotFalling 1s infinite linear;
    animation-delay: .1s
}

.dot-falling::before,
.dot-falling::after {
    content: '';
    display: inline-block;
    position: absolute;
    top: 0;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: var(--f-c-6);
    color: var(--f-c-6)
}

.dot-falling::before {
    animation: dotFallingBefore 1s infinite linear;
    animation-delay: 0s
}

.dot-falling::after {
    animation: dotFallingAfter 1s infinite linear;
    animation-delay: .2s
}

@keyframes dotFalling {
    0% {
        box-shadow: 9999px -15px 0 0 rgba(152, 128, 255, 0)
    }

    25%,
    50%,
    75% {
        box-shadow: 9999px 0 0 0 var(--f-c-6)
    }

    100% {
        box-shadow: 9999px 15px 0 0 rgba(152, 128, 255, 0)
    }
}

@keyframes dotFallingBefore {
    0% {
        box-shadow: 9984px -15px 0 0 rgba(152, 128, 255, 0)
    }

    25%,
    50%,
    75% {
        box-shadow: 9984px 0 0 0 var(--f-c-6)
    }

    100% {
        box-shadow: 9984px 15px 0 0 rgba(152, 128, 255, 0)
    }
}

@keyframes dotFallingAfter {
    0% {
        box-shadow: 10014px -15px 0 0 rgba(152, 128, 255, 0)
    }

    25%,
    50%,
    75% {
        box-shadow: 10014px 0 0 0 var(--f-c-6)
    }

    100% {
        box-shadow: 10014px 15px 0 0 rgba(152, 128, 255, 0)
    }
}

.dot-stretching {
    position: relative;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: var(--f-c-6);
    color: var(--f-c-6);
    animation: dotStretching 2s infinite ease-in;
    transform: scale(1.25, 1.25)
}

.dot-stretching::before,
.dot-stretching::after {
    content: '';
    display: inline-block;
    position: absolute;
    top: 0;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: var(--f-c-6);
    color: var(--f-c-6)
}

.dot-stretching::before {
    animation: dotStretchingBefore 2s infinite ease-in
}

.dot-stretching::after {
    animation: dotStretchingAfter 2s infinite ease-in
}

@keyframes dotStretching {
    0% {
        transform: scale(1.25, 1.25)
    }

    50%,
    60% {
        transform: scale(.8, .8)
    }

    100% {
        transform: scale(1.25, 1.25)
    }
}

@keyframes dotStretchingBefore {
    0% {
        transform: translate(0) scale(.7, .7)
    }

    50%,
    60% {
        transform: translate(-20px) scale(1, 1)
    }

    100% {
        transform: translate(0) scale(.7, .7)
    }
}

@keyframes dotStretchingAfter {
    0% {
        transform: translate(0) scale(.7, .7)
    }

    50%,
    60% {
        transform: translate(20px) scale(1, 1)
    }

    100% {
        transform: translate(0) scale(.7, .7)
    }
}

.dot-shuttle {
    position: relative;
    width: 12px;
    height: 12px;
    border-radius: 6px;
    background-color: #000;
    color: transparent;
    margin: -1px 0;
    filter: blur(2px)
}

.dot-shuttle::before,
.dot-shuttle::after {
    content: '';
    display: inline-block;
    position: absolute;
    top: 0;
    left: -50px;
    width: 12px;
    height: 12px;
    border-radius: 6px;
    background-color: #000;
    color: transparent;
    opacity: 0;
    filter: blur(2px);
    animation: dotShuttle 2s infinite ease-in
}

.dot-shuttle::after {
    animation-delay: 1s
}

@keyframes dotShuttle {
    0% {
        opacity: 0;
        transform: translateX(0)
    }

    50% {
        opacity: 1;
        transform: translateX(50px)
    }

    100% {
        opacity: 0;
        transform: translateX(100px)
    }
}

.dot-hourglass {
    position: relative;
    top: -15px;
    width: 12px;
    height: 12px;
    border-radius: 6px;
    background-color: #000;
    color: transparent;
    margin: -1px 0;
    filter: blur(2px);
    transform-origin: 5px 20px;
    animation: dotHourglass 2.4s infinite ease-in-out;
    animation-delay: .6s
}

.dot-hourglass::before,
.dot-hourglass::after {
    content: '';
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    width: 12px;
    height: 12px;
    border-radius: 6px;
    background-color: #000;
    color: transparent;
    filter: blur(2px)
}

.dot-hourglass::before {
    top: 30px
}

.dot-hourglass::after {
    animation: dotHourglassAfter 2.4s infinite cubic-bezier(0.65, 0.05, 0.36, 1)
}

@keyframes dotHourglass {
    0% {
        transform: rotateZ(0deg)
    }

    25% {
        transform: rotateZ(180deg)
    }

    50% {
        transform: rotateZ(180deg)
    }

    75% {
        transform: rotateZ(360deg)
    }

    100% {
        transform: rotateZ(360deg)
    }
}

@keyframes dotHourglassAfter {
    0% {
        transform: translateY(0)
    }

    25% {
        transform: translateY(30px)
    }

    50% {
        transform: translateY(30px)
    }

    75% {
        transform: translateY(0)
    }

    100% {
        transform: translateY(0)
    }
}

.dot-overtaking {
    position: relative;
    width: 12px;
    height: 12px;
    border-radius: 6px;
    background-color: transparent;
    color: #000;
    margin: -1px 0;
    box-shadow: 0 -20px 0 0;
    filter: blur(2px);
    animation: dotOvertaking 2s infinite cubic-bezier(0.2, 0.6, 0.8, 0.2)
}

.dot-overtaking::before,
.dot-overtaking::after {
    content: '';
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    width: 12px;
    height: 12px;
    border-radius: 6px;
    background-color: transparent;
    color: #000;
    box-shadow: 0 -20px 0 0;
    filter: blur(2px)
}

.dot-overtaking::before {
    animation: dotOvertaking 2s infinite cubic-bezier(0.2, 0.6, 0.8, 0.2);
    animation-delay: .3s
}

.dot-overtaking::after {
    animation: dotOvertaking 1.5s infinite cubic-bezier(0.2, 0.6, 0.8, 0.2);
    animation-delay: .6s
}

@keyframes dotOvertaking {
    0% {
        transform: rotateZ(0deg)
    }

    100% {
        transform: rotateZ(360deg)
    }
}

.dot-emoji {
    position: relative;
    height: 10px;
    font-size: 10px
}

.dot-emoji::before {
    content: '⚽🏀🏐';
    display: inline-block;
    position: relative;
    animation: dotEmoji 1s infinite
}

@keyframes dotEmoji {
    0% {
        top: -20px;
        animation-timing-function: ease-in
    }

    34% {
        transform: scale(1, 1)
    }

    35% {
        top: 20px;
        animation-timing-function: ease-out;
        transform: scale(1.5, 0.5)
    }

    45% {
        transform: scale(1, 1)
    }

    90% {
        top: -20px
    }

    100% {
        top: -20px
    }
}

.l-str{
    color: var(--f-c-6);
    /*color: rgb(138,183,252);*/
    font-size: .3rem;
    position: absolute;
    left: 50%;
    bottom: 0.3rem;
    transform: translateX(-50%);
}