style.css

/*=================
Basic style
==================*/
html, body{
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #DE5D83
    ;
}

body{
    margin: 0;
    background-image: url("./bg.gif.gif");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

body::before{
    content: "";
    display: block;
    /*background-color: rgba(255,182,193,0.70);*/
    background-color: rgba(255,255,255,0.60);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
}
    
img{
    vertical-align:bottom;
    max-width:100%;
    width: 100%;
}
h1,h2,p{
    margin: 0;
}
/*===================
animation01
====================*/
.animation01{
    position: absolute;
    width: 100%;
    height: 100%;
}
.border_box{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 15vw;
    height: 15vw;
}
.line{
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    background-color: #DE5D83
    ;
    opacity: 0;
}
.line01{
    top: 0;
    left: 100%;
    width: 0.15vw;
    height: 15.15vw;
    transform-origin: bottom;
    animation: animation01_line01 0.2s linear 0.3s forwards;
}
.line03{
    top: 0;
    left: 0;
    width: 0.15vw;
    height: 15.15vw;
    transform-origin: bottom;
    animation: animation01_line01 0.2s linear 0.6s forwards;
}
@keyframes animation01_line01{
    0%{
        transform: scale3d(1,0,1);
        opacity: 1;
    }
    100%{
        transform: scale3d(1,1,1);
        opacity: 1;
    }
}
.line02{
    top: 100%;
    left: 0;
    width: 15.15vw;
    height: 0.15vw;
    transform-origin: right;
    animation: animation01_line02 0.2s linear 0.4s forwards;
}
.line04{
    top: 0;
    left: 0;
    width: 15.15vw;
    height: 0.15vw;
    transform-origin: left;
    animation: animation01_line02 0.2s linear 0.8s forwards;
}
@keyframes animation01_line02{
    0%{
        transform: scale3d(0,1,1);
        opacity: 1;
    }
    100%{
        transform: scale3d(1,1,1);
        opacity: 1;
    }
}
.circle{
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    width: 1.2vw;
    height: 1.2vw;
    border: 0.1vw solid #FFF5EE;
    border-radius: 50%;
    opacity: 0;
}
.circle01{
    top: 96%;
    left: 96%;
    margin: 0 auto;
    animation: animation01_circle 0.3s linear 0.3s forwards;
}
.circle02{
    top: 96%;
    left: -99%;
    margin: 0 auto;
    animation: animation01_circle 0.3s linear 0.45s forwards;
}
.circle03{
    top: -4%;
    left: -99%;
    margin: 0 auto;
    animation: animation01_circle 0.3s linear 0.65s forwards;
}
.circle04{
    top: -4%;
    left: 96%;
    margin: 0 auto;
    animation: animation01_circle 0.3s linear 0.85s forwards;
}
@keyframes animation01_circle{
    0%{
        transform: scale3d(0,0,1);
        opacity: 1;
    }
    40%{
        transform: scale3d(1,1,1);
        opacity: 1;
    }
    60%{
        transform: scale3d(1,1,1);
        opacity: 1;
    }
    100%{
        transform: scale3d(0,0,1);
        opacity: 1;
    }
}

.wave{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 13.5vw;
    height: 13.5vw;
    overflow: hidden;
}
.wave_wrapper{
    width: 200%;
    height: 150%;
    position: absolute;
    top: -25%;
    right: 0;
    bottom: 0;
    left: -50%;
    margin: 0 auto;
    animation: animation01_wave_wrapper 1s linear 1s forwards;
}
@keyframes animation01_wave_wrapper{
    0%{
        transform: rotate(0);
    }
    25%{
        transform: rotate(15deg);
    }
    50%{
        transform: rotate(0);
    }
    75%{
        transform: rotate(-15deg);
    }
    100%{
        transform: rotate(0);
    }
}
.wave_box{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    background-color: #DE5D83;
    transform-origin: bottom;
    animation: animation01_wave_box 1s linear 1s forwards;
    opacity: 0;
}
@keyframes animation01_wave_box{
    0%{
        transform: scale3d(1,0,1);
        opacity: 1;
    }
    100%{
        transform: scale3d(1,1,1);
        opacity: 1;
    }
}
.animation_line{
    position: absolute;
    right: 0;
    bottom: 0;
    margin: 0 auto;
    background-color: #DE5D83;
    opacity: 0;
}
.animation_line_wrapper{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 0 auto;
    width: 100%;
    height: 100%;
}
.animation_line01{
    top: -15%;
    left: 0;
    width: 0.2vw;
    height: 0.7vw;
    animation: animation_line01 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 1.9s;
    transform-origin: top;
}
.animation_line02_wrapper{
    transform: rotate(45deg)
}
.animation_line02{
    top: -35%;
    left: 0;
    width: 0.2vw;
    height: 0.7vw;
    animation: animation_line01 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 1.9s;
    transform-origin: top;
}
@keyframes animation_line01{
    0%{
        transform: translateY(0);
        opacity: 1;
    }
    100%{
        transform: translateY(-1.5vw);
        opacity: 1;
    }
}
.animation_line03{
    top: 50%;
    left: 110%;
    width: 0.7vw;
    height: 0.2vw;
    animation: animation_line03 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 1.9s;
    transform-origin: right;
}
.animation_line04_wrapper{
    transform: rotate(45deg)
}
.animation_line04{
    top: 50%;
    left: 128%;
    width: 0.7vw;
    height: 0.2vw;
    animation: animation_line03 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 1.9s;
    transform-origin: right;
}
@keyframes animation_line03{
    0%{
        transform: translateX(0);
        opacity: 1;
    }
    100%{
        transform: translateX(1.5vw);
        opacity: 1;
    }
}
.animation_line05{
    top: 110%;
    left: 0;
    width: 0.2vw;
    height: 0.7vw;
    animation: animation_line05 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 1.9s;
    transform-origin: bottom;
}
.animation_line06_wrapper{
    transform: rotate(45deg)
}
.animation_line06{
    top: 128%;
    left: 0;
    width: 0.2vw;
    height: 0.7vw;
    animation: animation_line05 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 1.9s;
    transform-origin: bottom;
}
@keyframes animation_line05{
    0%{
        transform: translateY(0);
        opacity: 1;
    }
    100%{
        transform: translateY(1.5vw);
        opacity: 1;
    }
}
.animation_line07{
    top: 50%;
    left: -130%;
    width: 0.7vw;
    height: 0.2vw;
    animation: animation_line07 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 1.9s;
    transform-origin: left;
}
.animation_line08_wrapper{
    transform: rotate(45deg)
}
.animation_line08{
    top: 50%;
    left: -162%;
    width: 0.7vw;
    height: 0.2vw;
    animation: animation_line07 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 1.9s;
    transform-origin: left;
}
@keyframes animation_line07{
    0%{
        transform: translateX(0);
        opacity: 1;
    }
    100%{
        transform: translateX(-1.5vw);
        opacity: 1;
    }
}

.rhombus{
    position: absolute;
    width: 100%;
    height: 100%;
    animation: rhombus 0.2s linear 2.2s forwards;
}
@keyframes rhombus {
    0%{
        transform: rotate(0)
    }
    100%{
        transform: rotate(45deg)
    }
}
.rhombus_small{
    position: absolute;
    width: 100%;
    height: 100%;
    animation: rhombus_small 0.4s linear 2.55s forwards;
}
@keyframes rhombus_small {
    0%{
        transform: scale3d(1,1,1);
        opacity: 1;
    }
    99%{
        transform: scale3d(0.15,0.15,0.15);
        opacity: 1;
    }
    100%{
        transform: scale3d(0.15,0.15,0.15);
        opacity: 0;
    }
}

/*===================
animation02
====================*/
.animation02{
    position: absolute;
    width: 100%;
    height: 100%;
}
.rhombus_box{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 40vw;
    height: 40vw;
    animation: rhombus_box 0.4s linear 3.55s forwards;
}
.rhombus_item_wrapper{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 2.1vw;
    height: 2.1vw;
    opacity: 0;
}
.rhombus_item{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 2.1vw;
    height: 2.1vw;
    background-color:#DE5D83;
    transform: rotate(45deg)
}
.rhombus_item01_wrapper{
    animation: rhombus_item01 0.5s linear 2.95s forwards;
}

.rhombus_item02_wrapper{
    animation: rhombus_item02 0.5s linear 2.95s forwards;
}
@keyframes rhombus_item01{
    0%{
        transform: translateX(0);
        opacity: 1;
    }
    100%{
        transform: translateX(-18.5vw);
        opacity: 1;
    }
}
@keyframes rhombus_item02{
    0%{
        transform: translateX(0);
        opacity: 1;
    }
    100%{
        transform: translateX(18.5vw);
        opacity: 1;
    }
}
@keyframes rhombus_box{
    0%{
        transform: rotate(0)
    }
    100%{
        transform: rotate(360deg)
    }
}

.double_content{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
}
.double_wrapper02{
    position: relative;
    width: 100%;
    height: 100%;
    animation: double_content forwards;
    opacity: 0;
}
.double_wrapper01{
    display: block;
    position: absolute;
    border-radius: 50%;
    overflow: hidden;
}
.double_wrapper01::before {
    content: "";
    display: block;
    position: absolute;
    background: #FFF5EE;
    z-index: 2;
}
.double_wrapper01::after {
    content: "";
    display: block;
    position: absolute;
    background: #FFF5EE;
    z-index: 3;
}

/*============
dotted circle
============*/
.dotted02{
    top: 0;
    animation-delay: 4.2s;
}
.dotted_hide{
    position: absolute;
    width: 31vw;
    height: 31vw;
    z-index: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    overflow: hidden;
}
.dotted01{
    width: 30vw;
    height: 30vw;
    border: dotted 0.5vw #DE5D83;
    z-index: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: visible;
}
.dotted_right::before{
    content: "";
    display: block;
    position: absolute;
    background: #FFF5EE;
    z-index: 3;
}
.dotted_right::before{
    top: 0;
    left: 0;
    width: 32vw;
    height: 32vw;
    transform-origin: left 16vw;
    animation: rotate-circle-right 0.5s linear 4.2s forwards;
}
.dotted_right{
    position: absolute;
    width: 16vw;
    height: 32vw;
    z-index: 1;
    top: 50%;
    left: 75%;
    transform: translate(-50%, -50%);
    overflow: hidden;
}
.dotted01::after{
    top: -1vw;
    left: -17vw;
    width: 32vw;
    height: 32vw;
    transform-origin: right 16vw;
    animation: rotate-circle-left01 0.5s linear 4.2s forwards;
}
@keyframes rotate-circle-left01 {
    0%   {
        transform: rotate(0deg);
        background: #FFF5EE;
        opacity: 1;
    }
    50%  {
        transform: rotate(-180deg);
        background: #DE5D83;
        opacity: 1;
    }
    50.01% {
        transform: rotate(0deg);
        opacity: 0;
    }
    100% {
        transform: rotate(0deg);
        opacity: 0;
    }
}
/*============
white circle
============*/
.white02{
    top: -100%;
    animation-delay: 4.7s;
}
.white01{
    width: 29vw;
    height: 29vw;
    background:#DE5D83;
    z-index: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.white01::before{
    top: 0;
    left: 14.5vw;
    width: 29vw;
    height: 29vw;
    transform-origin: left 14.5vw;
    animation: rotate-circle-right 0.3s linear 4.7s forwards;

}
.white01::after{
    top: 0;
    left: -14.5vw;
    width: 29vw;
    height: 29vw;
    transform-origin: right 14.5vw;
    animation: rotate-circle-left 0.3s linear 4.7s forwards;
}
@keyframes rotate-circle-left {
    0%   {
        transform: rotate(0deg);
        background: #FFF5EE;
    }
    50%  {
        transform: rotate(-180deg);
        background:#FFF5EE;
    }
    50.01% {
        transform: rotate(-360deg);
        background:#FFF5EE;
    }
    100% {
        transform: rotate(-360deg);
        background:#DE5D83;
    }
}
/*============
gray circle
============*/
.gray02{
    top: -200%;
    animation-delay: 4.8s;
}
.gray01{
    width: 8vw;
    height: 8vw;
    background: #FFF5EE;
    z-index: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.gray01::before{
    top: 0;
    left: 4vw;
    width: 8vw;
    height: 8vw;
    background:#DE5D83;
    transform-origin: left 4vw;
    animation: rotate-circle-right 0.5s linear 4.8s forwards;

}
.gray01::after{
    top: 0;
    left: -4vw;
    width: 8vw;
    height: 8vw;
    background:#DE5D83;
    transform-origin: right 4vw;
    animation: rotate-circle-left03 0.5s linear 4.8s forwards;
}
@keyframes rotate-circle-left03 {
    0%   {
        transform: rotate(0deg);
        background:#DE5D83;
    }
    50%  {
        transform: rotate(-180deg);
        background:#FFF5EE;
    }
    50.01% {
        transform: rotate(-360deg);
        background: #FFF5EE;
    }
    100% {
        transform: rotate(-360deg);
        background: #FFF5EE;
    }
}
/*============
orange circle
============*/
.orange02{
    top: -300%;
    animation-delay: 5.3s;
}
.orange01{
    width: 27vw;
    height: 27vw;
    background: #f7c8c2;
    z-index: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.orange01::before{
    top: 0;
    left: 13.5vw;
    width: 27vw;
    height: 27vw;
    background:#FFF5EE;
    transform-origin: left 13.5vw;
    animation: rotate-circle-right 0.5s linear 5.3s forwards;

}
.orange01::after{
    top: 0;
    left: -13.5vw;
    width: 27vw;
    height: 27vw;
    background:#FFF5EE;
    transform-origin: right 13.5vw;
    animation: rotate-circle-left02 0.5s linear 5.3s forwards;
}

@keyframes rotate-circle-left02 {
    0%   {
        transform: rotate(0deg);
        background: #FFF5EE;
    }
    50%  {
        transform: rotate(-180deg);
        background:#DE5D83;
    }
    50.01% {
        transform: rotate(-360deg);
        background:#DE5D83;
    }
    100% {
        transform: rotate(-360deg);
        background:#f7c8c2;
    }
}

@keyframes double_content{
    0%{
    opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
@keyframes rotate-circle-right {
    0%   { transform: rotate(0deg); }
    50%  { transform: rotate(0deg); }
    100% { transform: rotate(-180deg); }
}

.name{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30vw;
    height: 30vw;
    animation: name 1.0s cubic-bezier(0.165, 0.84, 0.44, 1) 5.9s forwards;
    opacity: 0;
    text-align: center;

}
.name p a{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color:#DE5D83;
    font-size: 2rem;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    letter-spacing: 0.1em;
    text-decoration: none;
}

.name_circle01{
    position: absolute;
    top: 50%;
    left: 20%;
    transform: translate(-50%, -50%);
    background-color: #DE5D83;
    width: 2vw;
    height: 2vw;
    border-radius: 50%;
}
.name_circle02{
    position: absolute;
    top: 50%;
    left: 80%;
    transform: translate(-50%, -50%);
    background-color: #DE5D83;
    width: 2vw;
    height: 2vw;
    border-radius: 50%;
}
@keyframes name {
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}









body {
    background:#9b415c(20, 5, 5, 1);
    height: 100vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    color:#FFF5EE;
    perspective: 800px;
}
div {
    transform-style: preserve-3d;
}
#ui .text {
    position: absolute;
    font-size: 8rem;
    color:#DE5D83; 
    line-height: 8rem;
    opacity: 0;
    font-family: 'Anton', sans-serif;
    transform: translate(-50%, -50%);
    mix-blend-mode: screen;
}
@media (max-width:800px) {
    #ui .text {
        font-size: 7rem;
    }
}
@media (max-width:700px) {
    #ui .text {
        font-size: 6rem;
    }
}
@media (max-width:600px) {
    #ui .text {
        font-size: 5rem;
    }
}
@media (max-width:500px) {
    #ui .text {
        font-size: 4rem;
    }
}
@media (max-width:400px) {
    #ui .text {
        font-size: 3rem;
    }
}
#ui .text:nth-child(1) {
    color:#FFF5EE(253, 50, 3, 1);
    clip-path: polygon(0% 0%, 0% 50%, 10% 50%);
    transform-origin: 48% 16%;
    animation: fly1 5000ms 0ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@keyframes fly1 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(92deg) rotateY(-25deg) rotateZ(-346deg) translateZ(-2100px);
   }
    10% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(92deg) rotateY(-25deg) rotateZ(-346deg) translateZ(-2100px);
   }
    90% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
}
#ui .text:nth-child(2) {
    color:#FFF5EE(251, 6, 26);
    clip-path: polygon(0% 0%, 10% 0%, 10% 50%);
    transform-origin: -26% -47%;
    animation: fly2 5000ms 40ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@keyframes fly2 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(-261deg) rotateY(-116deg) rotateZ(-357deg) translateZ(-429px);
   }
    10% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(-261deg) rotateY(-116deg) rotateZ(-357deg) translateZ(-429px);
   }
    90% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
}
#ui .text:nth-child(3) {
    color:#9b415c(249, 49, 9, 1);
    clip-path: polygon(10% 0%, 10% 50%, 20% 50%);
    transform-origin: -12% -37%;
    animation: fly3 5000ms 80ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@keyframes fly3 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(-175deg) rotateY(-122deg) rotateZ(-483deg) translateZ(-66px);
   }
    10% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(-175deg) rotateY(-122deg) rotateZ(-483deg) translateZ(-66px);
   }
    90% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
}
#ui .text:nth-child(4) {
    color:#592534(247, 48, 12, 1);
    clip-path: polygon(10% 0%, 20% 0%, 20% 50%);
    transform-origin: -13% -47%;
    animation: fly4 5000ms 120ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@keyframes fly4 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(-21deg) rotateY(112deg) rotateZ(44deg) translateZ(-872px);
   }
    10% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(-21deg) rotateY(112deg) rotateZ(44deg) translateZ(-872px);
   }
    90% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
}
#ui .text:nth-child(5) {
    color: #592534(245, 48, 15, 1);
    clip-path: polygon(20% 0%, 20% 50%, 30% 50%);
    transform-origin: -14% -3%;
    animation: fly5 5000ms 160ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@keyframes fly5 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(460deg) rotateY(-458deg) rotateZ(128deg) translateZ(-2059px);
   }
    10% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(460deg) rotateY(-458deg) rotateZ(128deg) translateZ(-2059px);
   }
    90% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
}
#ui .text:nth-child(6) {
    color: #592534(243, 47, 18, 1);
    clip-path: polygon(20% 0%, 30% 0%, 30% 50%);
    transform-origin: 67% -11%;
    animation: fly6 5000ms 200ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@keyframes fly6 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(122deg) rotateY(500deg) rotateZ(-279deg) translateZ(-1875px);
   }
    10% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(122deg) rotateY(500deg) rotateZ(-279deg) translateZ(-1875px);
   }
    90% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
}
#ui .text:nth-child(7) {
    color:#592534(241, 47, 21, 1);
    clip-path: polygon(30% 0%, 30% 50%, 40% 50%);
    transform-origin: 2% 5%;
    animation: fly7 5000ms 240ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@keyframes fly7 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(-321deg) rotateY(282deg) rotateZ(-223deg) translateZ(475px);
   }
    10% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(-321deg) rotateY(282deg) rotateZ(-223deg) translateZ(475px);
   }
    90% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
}
#ui .text:nth-child(8) {
    color:#FFF5EE(239, 46, 24, 1);
    clip-path: polygon(30% 0%, 40% 0%, 40% 50%);
    transform-origin: 40% -5%;
    animation: fly8 5000ms 280ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@keyframes fly8 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(-222deg) rotateY(-155deg) rotateZ(-111deg) translateZ(-2447px);
   }
    10% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(-222deg) rotateY(-155deg) rotateZ(-111deg) translateZ(-2447px);
   }
    90% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
}
#ui .text:nth-child(9) {
    color: #FFF5EE(237, 46, 27, 1);
    clip-path: polygon(40% 0%, 40% 50%, 50% 50%);
    transform-origin: 53% 50%;
    animation: fly9 5000ms 320ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@keyframes fly9 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(450deg) rotateY(167deg) rotateZ(-449deg) translateZ(-1019px);
   }
    10% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(450deg) rotateY(167deg) rotateZ(-449deg) translateZ(-1019px);
   }
    90% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
}
#ui .text:nth-child(10) {
    color: #FFF5EE(235, 45, 30, 1);
    clip-path: polygon(40% 0%, 50% 0%, 50% 50%);
    transform-origin: -5% -37%;
    animation: fly10 5000ms 360ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@keyframes fly10 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(-56deg) rotateY(498deg) rotateZ(-1deg) translateZ(-37px);
   }
    10% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(-56deg) rotateY(498deg) rotateZ(-1deg) translateZ(-37px);
   }
    90% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
}
#ui .text:nth-child(11) {
    color:#FFF5EE(97, 87, 87);
    clip-path: polygon(50% 0%, 50% 50%, 60% 50%);
    transform-origin: 51% -9%;
    animation: fly11 5000ms 400ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@keyframes fly11 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(353deg) rotateY(-312deg) rotateZ(394deg) translateZ(-575px);
   }
    10% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(353deg) rotateY(-312deg) rotateZ(394deg) translateZ(-575px);
   }
    90% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
}
#ui .text:nth-child(12) {
    color: #FFF5EE(231, 44, 36, 1);
    clip-path: polygon(50% 0%, 60% 0%, 60% 50%);
    transform-origin: 87% 27%;
    animation: fly12 5000ms 440ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@keyframes fly12 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(-157deg) rotateY(219deg) rotateZ(-244deg) translateZ(-1579px);
   }
    10% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(-157deg) rotateY(219deg) rotateZ(-244deg) translateZ(-1579px);
   }
    90% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
}
#ui .text:nth-child(13) {
    color:#FFF5EE(229, 44, 39, 1);
    clip-path: polygon(60% 0%, 60% 50%, 70% 50%);
    transform-origin: 62% 27%;
    animation: fly13 5000ms 480ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@keyframes fly13 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(127deg) rotateY(-192deg) rotateZ(-484deg) translateZ(-1917px);
   }
    10% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(127deg) rotateY(-192deg) rotateZ(-484deg) translateZ(-1917px);
   }
    90% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
}
#ui .text:nth-child(14) {
    color: #FFF5EE(227, 43, 42, 1);
    clip-path: polygon(60% 0%, 70% 0%, 70% 50%);
    transform-origin: 41% 11%;
    animation: fly14 5000ms 520ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@keyframes fly14 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(-322deg) rotateY(249deg) rotateZ(-381deg) translateZ(-325px);
   }
    10% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(-322deg) rotateY(249deg) rotateZ(-381deg) translateZ(-325px);
   }
    90% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
}
#ui .text:nth-child(15) {
    color: #FFF5EE(225, 43, 45, 1);
    clip-path: polygon(70% 0%, 70% 50%, 80% 50%);
    transform-origin: 110% 3%;
    animation: fly15 5000ms 560ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@keyframes fly15 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(-476deg) rotateY(-290deg) rotateZ(325deg) translateZ(-1805px);
   }
    10% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(-476deg) rotateY(-290deg) rotateZ(325deg) translateZ(-1805px);
   }
    90% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
}
#ui .text:nth-child(16) {
    color: #FFF5EE(223, 42, 48, 1);
    clip-path: polygon(70% 0%, 80% 0%, 80% 50%);
    transform-origin: 41% -27%;
    animation: fly16 5000ms 600ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@keyframes fly16 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(-282deg) rotateY(2deg) rotateZ(54deg) translateZ(411px);
   }
    10% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(-282deg) rotateY(2deg) rotateZ(54deg) translateZ(411px);
   }
    90% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
}
#ui .text:nth-child(17) {
    color: #FFF5EE(221, 42, 51, 1);
    clip-path: polygon(80% 0%, 80% 50%, 90% 50%);
    transform-origin: 39% -32%;
    animation: fly17 5000ms 640ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@keyframes fly17 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(-345deg) rotateY(-166deg) rotateZ(190deg) translateZ(-754px);
   }
    10% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(-345deg) rotateY(-166deg) rotateZ(190deg) translateZ(-754px);
   }
    90% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
}
#ui .text:nth-child(18) {
    color: #FFF5EE(219, 41, 54, 1);
    clip-path: polygon(80% 0%, 90% 0%, 90% 50%);
    transform-origin: 71% -11%;
    animation: fly18 5000ms 680ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@keyframes fly18 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(50deg) rotateY(-38deg) rotateZ(337deg) translateZ(-2116px);
   }
    10% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(50deg) rotateY(-38deg) rotateZ(337deg) translateZ(-2116px);
   }
    90% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
}
#ui .text:nth-child(19) {
    color: #FFF5EE(217, 41, 57, 1);
    clip-path: polygon(90% 0%, 90% 50%, 100% 50%);
    transform-origin: 135% -44%;
    animation: fly19 5000ms 720ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@keyframes fly19 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(-299deg) rotateY(-57deg) rotateZ(-13deg) translateZ(-2447px);
   }
    10% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(-299deg) rotateY(-57deg) rotateZ(-13deg) translateZ(-2447px);
   }
    90% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
}
#ui .text:nth-child(20) {
    color:#FFF5EE(215, 40, 60, 1);
    clip-path: polygon(90% 0%, 100% 0%, 100% 50%);
    transform-origin: 91% 5%;
    animation: fly20 5000ms 760ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@keyframes fly20 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(-487deg) rotateY(-320deg) rotateZ(-308deg) translateZ(-1849px);
   }
    10% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(-487deg) rotateY(-320deg) rotateZ(-308deg) translateZ(-1849px);
   }
    90% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
}
#ui .text:nth-child(21) {
    color: #FFF5EE(213, 40, 63, 1);
    clip-path: polygon(0% 50%, 0% 100%, 10% 100%);
    transform-origin: -25% 44%;
    animation: fly21 5000ms 800ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@keyframes fly21 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(104deg) rotateY(2deg) rotateZ(391deg) translateZ(-1914px);
   }
    10% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(104deg) rotateY(2deg) rotateZ(391deg) translateZ(-1914px);
   }
    90% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
}
#ui .text:nth-child(22) {
    color: #FFF5EE(211, 39, 66, 1);
    clip-path: polygon(0% 50%, 10% 50%, 10% 100%);
    transform-origin: -28% 51%;
    animation: fly22 5000ms 840ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@keyframes fly22 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(-275deg) rotateY(-403deg) rotateZ(133deg) translateZ(-2224px);
   }
    10% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(-275deg) rotateY(-403deg) rotateZ(133deg) translateZ(-2224px);
   }
    90% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
}
#ui .text:nth-child(23) {
    color: #FFF5EE(209, 39, 69, 1);
    clip-path: polygon(10% 50%, 10% 100%, 20% 100%);
    transform-origin: 31% 33%;
    animation: fly23 5000ms 880ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@keyframes fly23 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(-144deg) rotateY(408deg) rotateZ(-191deg) translateZ(291px);
   }
    10% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(-144deg) rotateY(408deg) rotateZ(-191deg) translateZ(291px);
   }
    90% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
}
#ui .text:nth-child(24) {
    color: #FFF5EE(207, 38, 72, 1);
    clip-path: polygon(10% 50%, 20% 50%, 20% 100%);
    transform-origin: 4% 40%;
    animation: fly24 5000ms 920ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@keyframes fly24 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(364deg) rotateY(315deg) rotateZ(23deg) translateZ(-1177px);
   }
    10% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(364deg) rotateY(315deg) rotateZ(23deg) translateZ(-1177px);
   }
    90% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
}
#ui .text:nth-child(25) {
    color:#FFF5EE(205, 38, 75, 1);
    clip-path: polygon(20% 50%, 20% 100%, 30% 100%);
    transform-origin: 64% 28%;
    animation: fly25 5000ms 960ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@keyframes fly25 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(390deg) rotateY(389deg) rotateZ(396deg) translateZ(-2452px);
   }
    10% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(390deg) rotateY(389deg) rotateZ(396deg) translateZ(-2452px);
   }
    90% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
}
#ui .text:nth-child(26) {
    color:#FFF5EE(203, 37, 78, 1);
    clip-path: polygon(20% 50%, 30% 50%, 30% 100%);
    transform-origin: 33% 2%;
    animation: fly26 5000ms 1000ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@keyframes fly26 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(-182deg) rotateY(323deg) rotateZ(-259deg) translateZ(-2040px);
   }
    10% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(-182deg) rotateY(323deg) rotateZ(-259deg) translateZ(-2040px);
   }
    90% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
}
#ui .text:nth-child(27) {
    color: #FFF5EE(201, 37, 81, 1);
    clip-path: polygon(30% 50%, 30% 100%, 40% 100%);
    transform-origin: 10% 51%;
    animation: fly27 5000ms 1040ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@keyframes fly27 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(115deg) rotateY(-55deg) rotateZ(-52deg) translateZ(-1370px);
   }
    10% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(115deg) rotateY(-55deg) rotateZ(-52deg) translateZ(-1370px);
   }
    90% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
}
#ui .text:nth-child(28) {
    color: #FFF5EE(199, 36, 84, 1);
    clip-path: polygon(30% 50%, 40% 50%, 40% 100%);
    transform-origin: -3% 72%;
    animation: fly28 5000ms 1080ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@keyframes fly28 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(12deg) rotateY(-332deg) rotateZ(494deg) translateZ(-87px);
   }
    10% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(12deg) rotateY(-332deg) rotateZ(494deg) translateZ(-87px);
   }
    90% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
}
#ui .text:nth-child(29) {
    color:#FFF5EE(197, 36, 87, 1);
    clip-path: polygon(40% 50%, 40% 100%, 50% 100%);
    transform-origin: 28% 40%;
    animation: fly29 5000ms 1120ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@keyframes fly29 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(-397deg) rotateY(409deg) rotateZ(-465deg) translateZ(-1144px);
   }
    10% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(-397deg) rotateY(409deg) rotateZ(-465deg) translateZ(-1144px);
   }
    90% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
}
#ui .text:nth-child(30) {
    color:#FFF5EE(195, 35, 90, 1);
    clip-path: polygon(40% 50%, 50% 50%, 50% 100%);
    transform-origin: 88% 67%;
    animation: fly30 5000ms 1160ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@keyframes fly30 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(201deg) rotateY(-480deg) rotateZ(-374deg) translateZ(-359px);
   }
    10% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(201deg) rotateY(-480deg) rotateZ(-374deg) translateZ(-359px);
   }
    90% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
}
#ui .text:nth-child(31) {
    color:#FFF5EE(193, 35, 93, 1);
    clip-path: polygon(50% 50%, 50% 100%, 60% 100%);
    transform-origin: 67% 89%;
    animation: fly31 5000ms 1200ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@keyframes fly31 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(252deg) rotateY(398deg) rotateZ(-209deg) translateZ(-2395px);
   }
    10% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(252deg) rotateY(398deg) rotateZ(-209deg) translateZ(-2395px);
   }
    90% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
}
#ui .text:nth-child(32) {
    color: #FFF5EE(191, 34, 96, 1);
    clip-path: polygon(50% 50%, 60% 50%, 60% 100%);
    transform-origin: 58% 52%;
    animation: fly32 5000ms 1240ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@keyframes fly32 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(-126deg) rotateY(-473deg) rotateZ(345deg) translateZ(-913px);
   }
    10% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(-126deg) rotateY(-473deg) rotateZ(345deg) translateZ(-913px);
   }
    90% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
}
#ui .text:nth-child(33) {
    color: #FFF5EE(189, 34, 99, 1);
    clip-path: polygon(60% 50%, 60% 100%, 70% 100%);
    transform-origin: 35% 75%;
    animation: fly33 5000ms 1280ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@keyframes fly33 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(459deg) rotateY(482deg) rotateZ(459deg) translateZ(-1123px);
   }
    10% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(459deg) rotateY(482deg) rotateZ(459deg) translateZ(-1123px);
   }
    90% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
}
#ui .text:nth-child(34) {
    color:#FFF5EE(187, 33, 102, 1);
    clip-path: polygon(60% 50%, 70% 50%, 70% 100%);
    transform-origin: 101% 83%;
    animation: fly34 5000ms 1320ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@keyframes fly34 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(437deg) rotateY(-353deg) rotateZ(-271deg) translateZ(-1903px);
   }
    10% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(437deg) rotateY(-353deg) rotateZ(-271deg) translateZ(-1903px);
   }
    90% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
}
#ui .text:nth-child(35) {
    color: #FFF5EE(185, 33, 105, 1);
    clip-path: polygon(70% 50%, 70% 100%, 80% 100%);
    transform-origin: 44% 94%;
    animation: fly35 5000ms 1360ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@keyframes fly35 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(271deg) rotateY(-205deg) rotateZ(-252deg) translateZ(264px);
   }
    10% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(271deg) rotateY(-205deg) rotateZ(-252deg) translateZ(264px);
   }
    90% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
}
#ui .text:nth-child(36) {
    color:#FFF5EE(183, 32, 108, 1);
    clip-path: polygon(70% 50%, 80% 50%, 80% 100%);
    transform-origin: 95% 66%;
    animation: fly36 5000ms 1400ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@keyframes fly36 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(177deg) rotateY(-58deg) rotateZ(274deg) translateZ(243px);
   }
    10% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(177deg) rotateY(-58deg) rotateZ(274deg) translateZ(243px);
   }
    90% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
}
#ui .text:nth-child(37) {
    color:#FFF5EE(181, 32, 111, 1);
    clip-path: polygon(80% 50%, 80% 100%, 90% 100%);
    transform-origin: 95% 10%;
    animation: fly37 5000ms 1440ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@keyframes fly37 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(-438deg) rotateY(439deg) rotateZ(-459deg) translateZ(220px);
   }
    10% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(-438deg) rotateY(439deg) rotateZ(-459deg) translateZ(220px);
   }
    90% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
}
#ui .text:nth-child(38) {
    color:#FFF5EE(179, 31, 114, 1);
    clip-path: polygon(80% 50%, 90% 50%, 90% 100%);
    transform-origin: 41% 8%;
    animation: fly38 5000ms 1480ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@keyframes fly38 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(-41deg) rotateY(-224deg) rotateZ(-83deg) translateZ(64px);
   }
    10% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(-41deg) rotateY(-224deg) rotateZ(-83deg) translateZ(64px);
   }
    90% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
}
#ui .text:nth-child(39) {
    color: #FFF5EE(177, 31, 117, 1);
    clip-path: polygon(90% 50%, 90% 100%, 100% 100%);
    transform-origin: 87% 81%;
    animation: fly39 5000ms 1520ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@keyframes fly39 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(233deg) rotateY(311deg) rotateZ(380deg) translateZ(-683px);
   }
    10% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(233deg) rotateY(311deg) rotateZ(380deg) translateZ(-683px);
   }
    90% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
}
#ui .text:nth-child(40) {
    color: #FFF5EE(175, 30, 120, 1);
    clip-path: polygon(90% 50%, 100% 50%, 100% 100%);
    transform-origin: 63% 41%;
    animation: fly40 5000ms 1560ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@keyframes fly40 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(-33deg) rotateY(178deg) rotateZ(220deg) translateZ(-1339px);
   }
    10% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(-33deg) rotateY(178deg) rotateZ(220deg) translateZ(-1339px);
   }
    90% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
}
#ui .text:nth-child(41) {
    color: #FFF5EE(173, 30, 123, 1);
    clip-path: polygon(0% 100%, 0% 150%, 10% 150%);
    transform-origin: -43% 58%;
    animation: fly41 5000ms 1600ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@keyframes fly41 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(382deg) rotateY(306deg) rotateZ(-38deg) translateZ(-2311px);
   }
    10% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(382deg) rotateY(306deg) rotateZ(-38deg) translateZ(-2311px);
   }
    90% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
}
#ui .text:nth-child(42) {
    color:#FFF5EE(171, 29, 126, 1);
    clip-path: polygon(0% 100%, 10% 100%, 10% 150%);
    transform-origin: -37% 132%;
    animation: fly42 5000ms 1640ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@keyframes fly42 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(380deg) rotateY(-265deg) rotateZ(406deg) translateZ(-1740px);
   }
    10% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(380deg) rotateY(-265deg) rotateZ(406deg) translateZ(-1740px);
   }
    90% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
}
#ui .text:nth-child(43) {
    color: rgba(169, 29, 129, 1);
    clip-path: polygon(10% 100%, 10% 150%, 20% 150%);
    transform-origin: 38% 103%;
    animation: fly43 5000ms 1680ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@keyframes fly43 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(318deg) rotateY(-141deg) rotateZ(-44deg) translateZ(-1153px);
   }
    10% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(318deg) rotateY(-141deg) rotateZ(-44deg) translateZ(-1153px);
   }
    90% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
}
#ui .text:nth-child(44) {
    color: rgba(167, 28, 132, 1);
    clip-path: polygon(10% 100%, 20% 100%, 20% 150%);
    transform-origin: 48% 61%;
    animation: fly44 5000ms 1720ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@keyframes fly44 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(224deg) rotateY(-147deg) rotateZ(-161deg) translateZ(-1362px);
   }
    10% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(224deg) rotateY(-147deg) rotateZ(-161deg) translateZ(-1362px);
   }
    90% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
}
#ui .text:nth-child(45) {
    color: rgba(165, 28, 135, 1);
    clip-path: polygon(20% 100%, 20% 150%, 30% 150%);
    transform-origin: 13% 73%;
    animation: fly45 5000ms 1760ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@keyframes fly45 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(152deg) rotateY(372deg) rotateZ(275deg) translateZ(310px);
   }
    10% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(152deg) rotateY(372deg) rotateZ(275deg) translateZ(310px);
   }
    90% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
}
#ui .text:nth-child(46) {
    color: rgba(163, 27, 138, 1);
    clip-path: polygon(20% 100%, 30% 100%, 30% 150%);
    transform-origin: 60% 70%;
    animation: fly46 5000ms 1800ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@keyframes fly46 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(-170deg) rotateY(-13deg) rotateZ(-176deg) translateZ(486px);
   }
    10% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(-170deg) rotateY(-13deg) rotateZ(-176deg) translateZ(486px);
   }
    90% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
}
#ui .text:nth-child(47) {
    color: rgba(161, 27, 141, 1);
    clip-path: polygon(30% 100%, 30% 150%, 40% 150%);
    transform-origin: 20% 149%;
    animation: fly47 5000ms 1840ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@keyframes fly47 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(339deg) rotateY(372deg) rotateZ(-348deg) translateZ(219px);
   }
    10% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(339deg) rotateY(372deg) rotateZ(-348deg) translateZ(219px);
   }
    90% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
}
#ui .text:nth-child(48) {
    color: rgba(159, 26, 144, 1);
    clip-path: polygon(30% 100%, 40% 100%, 40% 150%);
    transform-origin: 0% 75%;
    animation: fly48 5000ms 1880ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@keyframes fly48 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(-390deg) rotateY(159deg) rotateZ(489deg) translateZ(-1772px);
   }
    10% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(-390deg) rotateY(159deg) rotateZ(489deg) translateZ(-1772px);
   }
    90% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
}
#ui .text:nth-child(49) {
    color: rgba(157, 26, 147, 1);
    clip-path: polygon(40% 100%, 40% 150%, 50% 150%);
    transform-origin: 49% 119%;
    animation: fly49 5000ms 1920ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@keyframes fly49 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(420deg) rotateY(256deg) rotateZ(-193deg) translateZ(-2454px);
   }
    10% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(420deg) rotateY(256deg) rotateZ(-193deg) translateZ(-2454px);
   }
    90% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
}
#ui .text:nth-child(50) {
    color: rgba(155, 25, 150, 1);
    clip-path: polygon(40% 100%, 50% 100%, 50% 150%);
    transform-origin: 23% 122%;
    animation: fly50 5000ms 1960ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@keyframes fly50 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(436deg) rotateY(420deg) rotateZ(12deg) translateZ(222px);
   }
    10% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(436deg) rotateY(420deg) rotateZ(12deg) translateZ(222px);
   }
    90% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
}
#ui .text:nth-child(51) {
    color: rgba(153, 25, 153, 1);
    clip-path: polygon(50% 100%, 50% 150%, 60% 150%);
    transform-origin: 85% 107%;
    animation: fly51 5000ms 2000ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@keyframes fly51 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(461deg) rotateY(-136deg) rotateZ(-122deg) translateZ(-58px);
   }
    10% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(461deg) rotateY(-136deg) rotateZ(-122deg) translateZ(-58px);
   }
    90% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
}
#ui .text:nth-child(52) {
    color: rgba(151, 24, 156, 1);
    clip-path: polygon(50% 100%, 60% 100%, 60% 150%);
    transform-origin: 75% 109%;
    animation: fly52 5000ms 2040ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@keyframes fly52 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(156deg) rotateY(-442deg) rotateZ(-406deg) translateZ(-1623px);
   }
    10% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(156deg) rotateY(-442deg) rotateZ(-406deg) translateZ(-1623px);
   }
    90% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
}
#ui .text:nth-child(53) {
    color: rgba(149, 24, 159, 1);
    clip-path: polygon(60% 100%, 60% 150%, 70% 150%);
    transform-origin: 14% 142%;
    animation: fly53 5000ms 2080ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@keyframes fly53 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(468deg) rotateY(63deg) rotateZ(240deg) translateZ(-500px);
   }
    10% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(468deg) rotateY(63deg) rotateZ(240deg) translateZ(-500px);
   }
    90% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
}
#ui .text:nth-child(54) {
    color: rgba(147, 23, 162, 1);
    clip-path: polygon(60% 100%, 70% 100%, 70% 150%);
    transform-origin: 84% 110%;
    animation: fly54 5000ms 2120ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@keyframes fly54 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(-464deg) rotateY(-339deg) rotateZ(-42deg) translateZ(-530px);
   }
    10% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(-464deg) rotateY(-339deg) rotateZ(-42deg) translateZ(-530px);
   }
    90% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
}
#ui .text:nth-child(55) {
    color: rgba(145, 23, 165, 1);
    clip-path: polygon(70% 100%, 70% 150%, 80% 150%);
    transform-origin: 63% 149%;
    animation: fly55 5000ms 2160ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@keyframes fly55 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(444deg) rotateY(119deg) rotateZ(-367deg) translateZ(-2138px);
   }
    10% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(444deg) rotateY(119deg) rotateZ(-367deg) translateZ(-2138px);
   }
    90% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
}
#ui .text:nth-child(56) {
    color: rgba(143, 22, 168, 1);
    clip-path: polygon(70% 100%, 80% 100%, 80% 150%);
    transform-origin: 49% 98%;
    animation: fly56 5000ms 2200ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@keyframes fly56 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(236deg) rotateY(-368deg) rotateZ(418deg) translateZ(-1154px);
   }
    10% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(236deg) rotateY(-368deg) rotateZ(418deg) translateZ(-1154px);
   }
    90% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
}
#ui .text:nth-child(57) {
    color: rgba(141, 22, 171, 1);
    clip-path: polygon(80% 100%, 80% 150%, 90% 150%);
    transform-origin: 77% 119%;
    animation: fly57 5000ms 2240ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@keyframes fly57 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(40deg) rotateY(453deg) rotateZ(-40deg) translateZ(-1251px);
   }
    10% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(40deg) rotateY(453deg) rotateZ(-40deg) translateZ(-1251px);
   }
    90% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
}
#ui .text:nth-child(58) {
    color: rgba(139, 21, 174, 1);
    clip-path: polygon(80% 100%, 90% 100%, 90% 150%);
    transform-origin: 73% 60%;
    animation: fly58 5000ms 2280ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@keyframes fly58 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(7deg) rotateY(173deg) rotateZ(-471deg) translateZ(-499px);
   }
    10% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(7deg) rotateY(173deg) rotateZ(-471deg) translateZ(-499px);
   }
    90% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
}
#ui .text:nth-child(59) {
    color: rgba(137, 21, 177, 1);
    clip-path: polygon(90% 100%, 90% 150%, 100% 150%);
    transform-origin: 85% 55%;
    animation: fly59 5000ms 2320ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@keyframes fly59 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(-145deg) rotateY(-127deg) rotateZ(74deg) translateZ(-1214px);
   }
    10% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(-145deg) rotateY(-127deg) rotateZ(74deg) translateZ(-1214px);
   }
    90% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
}
#ui .text:nth-child(60) {
    color: rgba(135, 20, 180, 1);
    clip-path: polygon(90% 100%, 100% 100%, 100% 150%);
    transform-origin: 63% 53%;
    animation: fly60 5000ms 2360ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@keyframes fly60 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(-170deg) rotateY(392deg) rotateZ(471deg) translateZ(-2007px);
   }
    10% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(-170deg) rotateY(392deg) rotateZ(471deg) translateZ(-2007px);
   }
    90% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
}
#ui .text:nth-child(61) {
    color: rgba(133, 20, 183, 1);
    clip-path: polygon(0% 150%, 0% 200%, 10% 200%);
    transform-origin: 11% 152%;
    animation: fly61 5000ms 2400ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@keyframes fly61 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(-437deg) rotateY(287deg) rotateZ(193deg) translateZ(-2467px);
   }
    10% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(-437deg) rotateY(287deg) rotateZ(193deg) translateZ(-2467px);
   }
    90% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
}
#ui .text:nth-child(62) {
    color: rgba(131, 19, 186, 1);
    clip-path: polygon(0% 150%, 10% 150%, 10% 200%);
    transform-origin: -2% 103%;
    animation: fly62 5000ms 2440ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@keyframes fly62 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(-314deg) rotateY(-462deg) rotateZ(316deg) translateZ(-1807px);
   }
    10% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(-314deg) rotateY(-462deg) rotateZ(316deg) translateZ(-1807px);
   }
    90% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
}
#ui .text:nth-child(63) {
    color: rgba(129, 19, 189, 1);
    clip-path: polygon(10% 150%, 10% 200%, 20% 200%);
    transform-origin: 25% 135%;
    animation: fly63 5000ms 2480ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@keyframes fly63 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(397deg) rotateY(-474deg) rotateZ(189deg) translateZ(-8px);
   }
    10% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(397deg) rotateY(-474deg) rotateZ(189deg) translateZ(-8px);
   }
    90% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
}
#ui .text:nth-child(64) {
    color: rgba(127, 18, 192, 1);
    clip-path: polygon(10% 150%, 20% 150%, 20% 200%);
    transform-origin: -9% 131%;
    animation: fly64 5000ms 2520ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@keyframes fly64 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(262deg) rotateY(272deg) rotateZ(459deg) translateZ(-948px);
   }
    10% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(262deg) rotateY(272deg) rotateZ(459deg) translateZ(-948px);
   }
    90% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
}
#ui .text:nth-child(65) {
    color: rgba(125, 18, 195, 1);
    clip-path: polygon(20% 150%, 20% 200%, 30% 200%);
    transform-origin: 60% 144%;
    animation: fly65 5000ms 2560ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@keyframes fly65 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(-244deg) rotateY(288deg) rotateZ(-27deg) translateZ(-748px);
   }
    10% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(-244deg) rotateY(288deg) rotateZ(-27deg) translateZ(-748px);
   }
    90% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
}
#ui .text:nth-child(66) {
    color: rgba(123, 17, 198, 1);
    clip-path: polygon(20% 150%, 30% 150%, 30% 200%);
    transform-origin: -17% 199%;
    animation: fly66 5000ms 2600ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@keyframes fly66 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(270deg) rotateY(-227deg) rotateZ(-129deg) translateZ(124px);
   }
    10% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(270deg) rotateY(-227deg) rotateZ(-129deg) translateZ(124px);
   }
    90% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
}
#ui .text:nth-child(67) {
    color: rgba(121, 17, 201, 1);
    clip-path: polygon(30% 150%, 30% 200%, 40% 200%);
    transform-origin: 78% 191%;
    animation: fly67 5000ms 2640ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@keyframes fly67 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(-482deg) rotateY(-296deg) rotateZ(60deg) translateZ(-1262px);
   }
    10% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(-482deg) rotateY(-296deg) rotateZ(60deg) translateZ(-1262px);
   }
    90% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
}
#ui .text:nth-child(68) {
    color: rgba(119, 16, 204, 1);
    clip-path: polygon(30% 150%, 40% 150%, 40% 200%);
    transform-origin: 24% 121%;
    animation: fly68 5000ms 2680ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@keyframes fly68 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(-59deg) rotateY(-234deg) rotateZ(127deg) translateZ(-1511px);
   }
    10% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(-59deg) rotateY(-234deg) rotateZ(127deg) translateZ(-1511px);
   }
    90% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
}
#ui .text:nth-child(69) {
    color: rgba(117, 16, 207, 1);
    clip-path: polygon(40% 150%, 40% 200%, 50% 200%);
    transform-origin: 50% 102%;
    animation: fly69 5000ms 2720ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@keyframes fly69 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(-382deg) rotateY(-175deg) rotateZ(297deg) translateZ(-350px);
   }
    10% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(-382deg) rotateY(-175deg) rotateZ(297deg) translateZ(-350px);
   }
    90% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
}
#ui .text:nth-child(70) {
    color: rgba(115, 15, 210, 1);
    clip-path: polygon(40% 150%, 50% 150%, 50% 200%);
    transform-origin: 24% 160%;
    animation: fly70 5000ms 2760ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@keyframes fly70 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(-170deg) rotateY(-338deg) rotateZ(38deg) translateZ(-2299px);
   }
    10% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(-170deg) rotateY(-338deg) rotateZ(38deg) translateZ(-2299px);
   }
    90% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
}
#ui .text:nth-child(71) {
    color: rgba(113, 15, 213, 1);
    clip-path: polygon(50% 150%, 50% 200%, 60% 200%);
    transform-origin: 11% 195%;
    animation: fly71 5000ms 2800ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@keyframes fly71 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(-102deg) rotateY(-104deg) rotateZ(269deg) translateZ(-820px);
   }
    10% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(-102deg) rotateY(-104deg) rotateZ(269deg) translateZ(-820px);
   }
    90% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
}
#ui .text:nth-child(72) {
    color: rgba(111, 14, 216, 1);
    clip-path: polygon(50% 150%, 60% 150%, 60% 200%);
    transform-origin: 70% 116%;
    animation: fly72 5000ms 2840ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@keyframes fly72 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(382deg) rotateY(-228deg) rotateZ(355deg) translateZ(-489px);
   }
    10% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(382deg) rotateY(-228deg) rotateZ(355deg) translateZ(-489px);
   }
    90% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
}
#ui .text:nth-child(73) {
    color: rgba(109, 14, 219, 1);
    clip-path: polygon(60% 150%, 60% 200%, 70% 200%);
    transform-origin: 53% 113%;
    animation: fly73 5000ms 2880ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@keyframes fly73 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(-83deg) rotateY(497deg) rotateZ(-361deg) translateZ(-2081px);
   }
    10% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(-83deg) rotateY(497deg) rotateZ(-361deg) translateZ(-2081px);
   }
    90% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
}
#ui .text:nth-child(74) {
    color: rgba(107, 13, 222, 1);
    clip-path: polygon(60% 150%, 70% 150%, 70% 200%);
    transform-origin: 23% 104%;
    animation: fly74 5000ms 2920ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@keyframes fly74 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(411deg) rotateY(-184deg) rotateZ(-411deg) translateZ(-2427px);
   }
    10% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(411deg) rotateY(-184deg) rotateZ(-411deg) translateZ(-2427px);
   }
    90% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
}
#ui .text:nth-child(75) {
    color: rgba(105, 13, 225, 1);
    clip-path: polygon(70% 150%, 70% 200%, 80% 200%);
    transform-origin: 95% 190%;
    animation: fly75 5000ms 2960ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@keyframes fly75 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(-95deg) rotateY(-296deg) rotateZ(156deg) translateZ(-984px);
   }
    10% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(-95deg) rotateY(-296deg) rotateZ(156deg) translateZ(-984px);
   }
    90% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
}
#ui .text:nth-child(76) {
    color: rgba(103, 12, 228, 1);
    clip-path: polygon(70% 150%, 80% 150%, 80% 200%);
    transform-origin: 96% 129%;
    animation: fly76 5000ms 3000ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@keyframes fly76 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(-276deg) rotateY(476deg) rotateZ(-93deg) translateZ(-2043px);
   }
    10% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(-276deg) rotateY(476deg) rotateZ(-93deg) translateZ(-2043px);
   }
    90% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
}
#ui .text:nth-child(77) {
    color: rgba(101, 12, 231, 1);
    clip-path: polygon(80% 150%, 80% 200%, 90% 200%);
    transform-origin: 95% 184%;
    animation: fly77 5000ms 3040ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@keyframes fly77 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(-275deg) rotateY(-250deg) rotateZ(-142deg) translateZ(-322px);
   }
    10% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(-275deg) rotateY(-250deg) rotateZ(-142deg) translateZ(-322px);
   }
    90% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
}
#ui .text:nth-child(78) {
    color: rgba(99, 11, 234, 1);
    clip-path: polygon(80% 150%, 90% 150%, 90% 200%);
    transform-origin: 81% 197%;
    animation: fly78 5000ms 3080ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@keyframes fly78 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(-490deg) rotateY(-211deg) rotateZ(-376deg) translateZ(133px);
   }
    10% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(-490deg) rotateY(-211deg) rotateZ(-376deg) translateZ(133px);
   }
    90% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
}
#ui .text:nth-child(79) {
    color: rgba(97, 11, 237, 1);
    clip-path: polygon(90% 150%, 90% 200%, 100% 200%);
    transform-origin: 101% 131%;
    animation: fly79 5000ms 3120ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@keyframes fly79 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(424deg) rotateY(302deg) rotateZ(-224deg) translateZ(37px);
   }
    10% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(424deg) rotateY(302deg) rotateZ(-224deg) translateZ(37px);
   }
    90% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
}
#ui .text:nth-child(80) {
    color: rgba(95, 10, 240, 1);
    clip-path: polygon(90% 150%, 100% 150%, 100% 200%);
    transform-origin: 81% 185%;
    animation: fly80 5000ms 3160ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@keyframes fly80 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(371deg) rotateY(418deg) rotateZ(-184deg) translateZ(-1833px);
   }
    10% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(371deg) rotateY(418deg) rotateZ(-184deg) translateZ(-1833px);
   }
    90% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
}
#ui .text:nth-child(81) {
    color: rgba(93, 10, 243, 1);
    clip-path: polygon(0% 200%, 0% 250%, 10% 250%);
    transform-origin: 36% 243%;
    animation: fly81 5000ms 3200ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@keyframes fly81 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(183deg) rotateY(189deg) rotateZ(95deg) translateZ(-567px);
   }
    10% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(183deg) rotateY(189deg) rotateZ(95deg) translateZ(-567px);
   }
    90% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
}
#ui .text:nth-child(82) {
    color: rgba(91, 9, 246, 1);
    clip-path: polygon(0% 200%, 10% 200%, 10% 250%);
    transform-origin: -36% 222%;
    animation: fly82 5000ms 3240ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@keyframes fly82 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(309deg) rotateY(-428deg) rotateZ(54deg) translateZ(-1021px);
   }
    10% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(309deg) rotateY(-428deg) rotateZ(54deg) translateZ(-1021px);
   }
    90% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
}
#ui .text:nth-child(83) {
    color: rgba(89, 9, 249, 1);
    clip-path: polygon(10% 200%, 10% 250%, 20% 250%);
    transform-origin: -21% 227%;
    animation: fly83 5000ms 3280ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@keyframes fly83 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(-168deg) rotateY(245deg) rotateZ(-343deg) translateZ(-1143px);
   }
    10% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(-168deg) rotateY(245deg) rotateZ(-343deg) translateZ(-1143px);
   }
    90% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
}
#ui .text:nth-child(84) {
    color: rgba(87, 8, 252, 1);
    clip-path: polygon(10% 200%, 20% 200%, 20% 250%);
    transform-origin: 24% 203%;
    animation: fly84 5000ms 3320ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@keyframes fly84 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(-422deg) rotateY(-306deg) rotateZ(-340deg) translateZ(-1919px);
   }
    10% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(-422deg) rotateY(-306deg) rotateZ(-340deg) translateZ(-1919px);
   }
    90% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
}
#ui .text:nth-child(85) {
    color: #FFF5EE(85, 8, 255, 1);
    clip-path: polygon(20% 200%, 20% 250%, 30% 250%);
    transform-origin: 26% 242%;
    animation: fly85 5000ms 3360ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@keyframes fly85 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(-159deg) rotateY(318deg) rotateZ(382deg) translateZ(210px);
   }
    10% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(-159deg) rotateY(318deg) rotateZ(382deg) translateZ(210px);
   }
    90% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
}
#ui .text:nth-child(86) {
    color: rgba(83, 7, 258, 1);
    clip-path: polygon(20% 200%, 30% 200%, 30% 250%);
    transform-origin: -23% 205%;
    animation: fly86 5000ms 3400ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@keyframes fly86 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(375deg) rotateY(172deg) rotateZ(-197deg) translateZ(136px);
   }
    10% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(375deg) rotateY(172deg) rotateZ(-197deg) translateZ(136px);
   }
    90% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
}
#ui .text:nth-child(87) {
    color: rgba(81, 7, 261, 1);
    clip-path: polygon(30% 200%, 30% 250%, 40% 250%);
    transform-origin: 10% 242%;
    animation: fly87 5000ms 3440ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@keyframes fly87 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(260deg) rotateY(242deg) rotateZ(350deg) translateZ(-822px);
   }
    10% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(260deg) rotateY(242deg) rotateZ(350deg) translateZ(-822px);
   }
    90% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
}
#ui .text:nth-child(88) {
    color: rgba(79, 6, 264, 1);
    clip-path: polygon(30% 200%, 40% 200%, 40% 250%);
    transform-origin: 62% 210%;
    animation: fly88 5000ms 3480ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@keyframes fly88 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(-166deg) rotateY(397deg) rotateZ(-180deg) translateZ(-1551px);
   }
    10% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(-166deg) rotateY(397deg) rotateZ(-180deg) translateZ(-1551px);
   }
    90% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
}
#ui .text:nth-child(89) {
    color: rgba(77, 6, 267, 1);
    clip-path: polygon(40% 200%, 40% 250%, 50% 250%);
    transform-origin: 88% 235%;
    animation: fly89 5000ms 3520ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@keyframes fly89 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(477deg) rotateY(-90deg) rotateZ(132deg) translateZ(115px);
   }
    10% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(477deg) rotateY(-90deg) rotateZ(132deg) translateZ(115px);
   }
    90% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
}
#ui .text:nth-child(90) {
    color: rgba(75, 5, 270, 1);
    clip-path: polygon(40% 200%, 50% 200%, 50% 250%);
    transform-origin: 37% 238%;
    animation: fly90 5000ms 3560ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@keyframes fly90 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(-468deg) rotateY(-57deg) rotateZ(124deg) translateZ(241px);
   }
    10% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(-468deg) rotateY(-57deg) rotateZ(124deg) translateZ(241px);
   }
    90% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
}
#ui .text:nth-child(91) {
    color: rgba(73, 5, 273, 1);
    clip-path: polygon(50% 200%, 50% 250%, 60% 250%);
    transform-origin: 68% 228%;
    animation: fly91 5000ms 3600ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@keyframes fly91 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(-74deg) rotateY(68deg) rotateZ(-177deg) translateZ(-1885px);
   }
    10% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(-74deg) rotateY(68deg) rotateZ(-177deg) translateZ(-1885px);
   }
    90% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
}
#ui .text:nth-child(92) {
    color: rgba(71, 4, 276, 1);
    clip-path: polygon(50% 200%, 60% 200%, 60% 250%);
    transform-origin: 11% 187%;
    animation: fly92 5000ms 3640ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@keyframes fly92 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(-63deg) rotateY(117deg) rotateZ(-235deg) translateZ(-160px);
   }
    10% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(-63deg) rotateY(117deg) rotateZ(-235deg) translateZ(-160px);
   }
    90% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
}
#ui .text:nth-child(93) {
    color: rgba(69, 4, 279, 1);
    clip-path: polygon(60% 200%, 60% 250%, 70% 250%);
    transform-origin: 77% 158%;
    animation: fly93 5000ms 3680ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@keyframes fly93 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(435deg) rotateY(-198deg) rotateZ(-117deg) translateZ(-95px);
   }
    10% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(435deg) rotateY(-198deg) rotateZ(-117deg) translateZ(-95px);
   }
    90% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
}
#ui .text:nth-child(94) {
    color: rgba(67, 3, 282, 1);
    clip-path: polygon(60% 200%, 70% 200%, 70% 250%);
    transform-origin: 79% 159%;
    animation: fly94 5000ms 3720ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@keyframes fly94 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(-250deg) rotateY(-396deg) rotateZ(-331deg) translateZ(-610px);
   }
    10% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(-250deg) rotateY(-396deg) rotateZ(-331deg) translateZ(-610px);
   }
    90% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
}
#ui .text:nth-child(95) {
    color: rgba(65, 3, 285, 1);
    clip-path: polygon(70% 200%, 70% 250%, 80% 250%);
    transform-origin: 28% 157%;
    animation: fly95 5000ms 3760ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@keyframes fly95 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(-108deg) rotateY(147deg) rotateZ(213deg) translateZ(-1798px);
   }
    10% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(-108deg) rotateY(147deg) rotateZ(213deg) translateZ(-1798px);
   }
    90% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
}
#ui .text:nth-child(96) {
    color: rgba(63, 2, 288, 1);
    clip-path: polygon(70% 200%, 80% 200%, 80% 250%);
    transform-origin: 113% 227%;
    animation: fly96 5000ms 3800ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@keyframes fly96 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(332deg) rotateY(-372deg) rotateZ(-449deg) translateZ(-1384px);
   }
    10% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(332deg) rotateY(-372deg) rotateZ(-449deg) translateZ(-1384px);
   }
    90% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
}
#ui .text:nth-child(97) {
    color: rgba(61, 2, 291, 1);
    clip-path: polygon(80% 200%, 80% 250%, 90% 250%);
    transform-origin: 69% 220%;
    animation: fly97 5000ms 3840ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@keyframes fly97 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(-459deg) rotateY(37deg) rotateZ(309deg) translateZ(-255px);
   }
    10% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(-459deg) rotateY(37deg) rotateZ(309deg) translateZ(-255px);
   }
    90% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
}
#ui .text:nth-child(98) {
    color: rgba(59, 1, 294, 1);
    clip-path: polygon(80% 200%, 90% 200%, 90% 250%);
    transform-origin: 103% 230%;
    animation: fly98 5000ms 3880ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@keyframes fly98 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(-276deg) rotateY(-39deg) rotateZ(-173deg) translateZ(-264px);
   }
    10% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(-276deg) rotateY(-39deg) rotateZ(-173deg) translateZ(-264px);
   }
    90% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
}
#ui .text:nth-child(99) {
    color: rgba(57, 1, 297, 1);
    clip-path: polygon(90% 200%, 90% 250%, 100% 250%);
    transform-origin: 118% 182%;
    animation: fly99 5000ms 3920ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@keyframes fly99 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(-168deg) rotateY(-11deg) rotateZ(25deg) translateZ(-2220px);
   }
    10% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(-168deg) rotateY(-11deg) rotateZ(25deg) translateZ(-2220px);
   }
    90% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
}
#ui .text:nth-child(100) {
    color: rgba(55, 0, 300, 1);
    clip-path: polygon(90% 200%, 100% 200%, 100% 250%);
    transform-origin: 56% 221%;
    animation: fly100 5000ms 3960ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@keyframes fly100 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(-370deg) rotateY(493deg) rotateZ(243deg) translateZ(-784px);
   }
    10% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(-370deg) rotateY(493deg) rotateZ(243deg) translateZ(-784px);
   }
    90% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
}
#ui .text:nth-child(101) {
    color: rgba(53, -1, 303, 1);
    clip-path: polygon(0% 250%, 0% 300%, 10% 300%);
    transform-origin: 22% 282%;
    animation: fly101 5000ms 4000ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@keyframes fly101 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(-258deg) rotateY(456deg) rotateZ(41deg) translateZ(-381px);
   }
    10% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateX(-258deg) rotateY(456deg) rotateZ(41deg) translateZ(-381px);
   }
    90% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
   }
}

.hidden{
    display: none !important;
}

@media screen and (max-width:500px){
    .dotted_hide{
        transform: scale(2);
        top: 45%;
        left: 35%;
    }
    
    .white01{
        transform: scale(1.9);
        top: 45.5%;
        left: 36%;
    }
    .orange01{
        transform: scale(1.9);
        top: 46.1%;
        left: 36.6%;
    }

    .name p a{
        top: 75%;
        font-size:25px;
    }

}