* {
    padding: 0;
    margin: 0;
}

@keyframes ringA {
    0%,4% {
        stroke-dasharray: 0 660;
        stroke-width: 20;
        stroke-dashoffset: -330
    }

    12% {
        stroke-dasharray: 60 600;
        stroke-width: 30;
        stroke-dashoffset: -335
    }

    32% {
        stroke-dasharray: 60 600;
        stroke-width: 30;
        stroke-dashoffset: -595
    }

    40%,54% {
        stroke-dasharray: 0 660;
        stroke-width: 20;
        stroke-dashoffset: -660
    }

    62% {
        stroke-dasharray: 60 600;
        stroke-width: 30;
        stroke-dashoffset: -665
    }

    82% {
        stroke-dasharray: 60 600;
        stroke-width: 30;
        stroke-dashoffset: -925
    }

    90%,to {
        stroke-dasharray: 0 660;
        stroke-width: 20;
        stroke-dashoffset: -990
    }
}

@keyframes ringB {
    0%,12% {
        stroke-dasharray: 0 220;
        stroke-width: 20;
        stroke-dashoffset: -110
    }

    20% {
        stroke-dasharray: 20 200;
        stroke-width: 30;
        stroke-dashoffset: -115
    }

    40% {
        stroke-dasharray: 20 200;
        stroke-width: 30;
        stroke-dashoffset: -195
    }

    48%,62% {
        stroke-dasharray: 0 220;
        stroke-width: 20;
        stroke-dashoffset: -220
    }

    70% {
        stroke-dasharray: 20 200;
        stroke-width: 30;
        stroke-dashoffset: -225
    }

    90% {
        stroke-dasharray: 20 200;
        stroke-width: 30;
        stroke-dashoffset: -305
    }

    98%,to {
        stroke-dasharray: 0 220;
        stroke-width: 20;
        stroke-dashoffset: -330
    }
}

@keyframes ringC {
    0% {
        stroke-dasharray: 0 440;
        stroke-width: 20;
        stroke-dashoffset: 0
    }

    8% {
        stroke-dasharray: 40 400;
        stroke-width: 30;
        stroke-dashoffset: -5
    }

    28% {
        stroke-dasharray: 40 400;
        stroke-width: 30;
        stroke-dashoffset: -175
    }

    36%,58% {
        stroke-dasharray: 0 440;
        stroke-width: 20;
        stroke-dashoffset: -220
    }

    66% {
        stroke-dasharray: 40 400;
        stroke-width: 30;
        stroke-dashoffset: -225
    }

    86% {
        stroke-dasharray: 40 400;
        stroke-width: 30;
        stroke-dashoffset: -395
    }

    94%,to {
        stroke-dasharray: 0 440;
        stroke-width: 20;
        stroke-dashoffset: -440
    }
}

@keyframes ringD {
    0%,8% {
        stroke-dasharray: 0 440;
        stroke-width: 20;
        stroke-dashoffset: 0
    }

    16% {
        stroke-dasharray: 40 400;
        stroke-width: 30;
        stroke-dashoffset: -5
    }

    36% {
        stroke-dasharray: 40 400;
        stroke-width: 30;
        stroke-dashoffset: -175
    }

    44%,50% {
        stroke-dasharray: 0 440;
        stroke-width: 20;
        stroke-dashoffset: -220
    }

    58% {
        stroke-dasharray: 40 400;
        stroke-width: 30;
        stroke-dashoffset: -225
    }

    78% {
        stroke-dasharray: 40 400;
        stroke-width: 30;
        stroke-dashoffset: -395
    }

    86%,to {
        stroke-dasharray: 0 440;
        stroke-width: 20;
        stroke-dashoffset: -440
    }
}


.body-loading{
    overflow: hidden;
}
#app-loading {
    background: #000000;
    position: fixed;
    left: 0;
    right: 0;
    height: 100vh;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center
}

.pl {
    width: 6em;
    height: 6em
}

.pl__ring {
    animation: ringA 2s linear infinite
}

.pl__ring--a {
    stroke: #f42f25
}

.pl__ring--b {
    animation-name: ringB;
    stroke: #f49725
}

.pl__ring--c {
    animation-name: ringC;
    stroke: #255ff4
}

.pl__ring--d {
    animation-name: ringD;
    stroke: #f42582
}