#fancyBackgroundOverlay {
    background-color: #FFFFFFCC;
    position: fixed;
    top:0;
    left:0;
    width:100vw;
    height:100vh;
    z-index: -1;
} 



.fancy-dot{
    width: 3vw;
    position: fixed;
    z-index:-2;
}

.fancy-i {
    width: 4vw;
    position: fixed;
    z-index: -2;
}

.fancy-l {
    width: 10vw;
    position: fixed;
    z-index: -2;
}

.fancy-j {
    width: 12vw;
    position: fixed;
    z-index: -2;
}

#fd-1{
    animation: fd1 100s linear 0s infinite forwards alternate;
}
#fd-2{
    
    animation: fd2 20s ease 0s infinite forwards alternate;
}
#fd-3{
    animation: fd3 30s linear 0s infinite forwards alternate;
}
#fd-4{
    animation: fd4 40s ease 0s infinite forwards alternate;
}

#fi-1{
    animation: fi1 100s linear 0s infinite forwards alternate;
}
#fi-2{
    animation: fi2 20s ease 0s infinite forwards alternate;
}
#fi-3{
    animation: fi3 30s linear 0s infinite forwards alternate;
}
#fi-4{
    animation: fi4 40s ease 0s infinite forwards alternate;
}

#fl-1{
    animation: fl1 100s linear 0s infinite forwards alternate;
}
#fl-2{
    animation: fl2 20s ease 0s infinite forwards alternate;
}
#fl-3{
    animation: fl3 30s linear 0s infinite forwards alternate;
}
#fl-4{
    animation: fl4 40s ease 0s infinite forwards alternate;
}
/*#fl-5{
    animation: fl5 50s linear 0s infinite forwards alternate;
}
#fl-6{
    animation: fl6 60s ease 0s infinite forwards alternate;
}*/

#fj-1{
    animation: fj1 100s linear 0s infinite forwards alternate;
}
#fj-2{
    animation: fj2 20s ease 0s infinite forwards alternate;
}
/*#fj-3{
    animation: fj3 30s linear 0s infinite forwards alternate;
}
#fj-4{
    animation: fj4 40s ease 0s infinite forwards alternate;
}
#fj-5{
    animation: fj5 50s linear 0s infinite forwards alternate;
}
#fj-6{
    animation: fj6 60s ease 0s infinite forwards alternate;
}*/



@keyframes fd1{
    0%{
    top: 45vh;
    left: 118vw;
    transform: rotate(104deg);
    }
    33%{
    top: -19vh;
    left: 70vw;
    transform: rotate(182deg);
    }
    66%{
    top: 55vh;
    left: 58vw;
    transform: rotate(113deg);
    }
    100%{
    top: 45vh;
    left: 118vw;
    transform: rotate(106deg);
    }
    }
    
    @keyframes fd2{
    0%{
    top: 41vh;
    left: 51vw;
    transform: rotate(152deg);
    }
    33%{
    top: 57vh;
    left: 115vw;
    transform: rotate(86deg);
    }
    66%{
    top: 111vh;
    left: -15vw;
    transform: rotate(353deg);
    }
    100%{
    top: 41vh;
    left: 51vw;
    transform: rotate(48deg);
    }
    }
    
    @keyframes fd3{
    0%{
    top: 93vh;
    left: 54vw;
    transform: rotate(161deg);
    }
    33%{
    top: 94vh;
    left: -4vw;
    transform: rotate(213deg);
    }
    66%{
    top: 50vh;
    left: 80vw;
    transform: rotate(136deg);
    }
    100%{
    top: 93vh;
    left: 54vw;
    transform: rotate(257deg);
    }
    }
    
    @keyframes fd4{
    0%{
    top: -19vh;
    left: 58vw;
    transform: rotate(351deg);
    }
    33%{
    top: 49vh;
    left: 36vw;
    transform: rotate(345deg);
    }
    66%{
    top: -20vh;
    left: 63vw;
    transform: rotate(74deg);
    }
    100%{
    top: -19vh;
    left: 58vw;
    transform: rotate(122deg);
    }
    }
    
    
    @keyframes fi1{
    0%{
    top: 19vh;
    left: 70vw;
    transform: rotate(322deg);
    }
    33%{
    top: 70vh;
    left: 3vw;
    transform: rotate(54deg);
    }
    66%{
    top: 119vh;
    left: 65vw;
    transform: rotate(288deg);
    }
    100%{
    top: 19vh;
    left: 70vw;
    transform: rotate(180deg);
    }
    }
    
    @keyframes fi2{
    0%{
    top: 36vh;
    left: -6vw;
    transform: rotate(39deg);
    }
    33%{
    top: 18vh;
    left: 75vw;
    transform: rotate(80deg);
    }
    66%{
    top: 89vh;
    left: 1vw;
    transform: rotate(301deg);
    }
    100%{
    top: 36vh;
    left: -6vw;
    transform: rotate(161deg);
    }
    }
    
    @keyframes fi3{
    0%{
    top: 66vh;
    left: 67vw;
    transform: rotate(247deg);
    }
    33%{
    top: 79vh;
    left: 67vw;
    transform: rotate(278deg);
    }
    66%{
    top: 44vh;
    left: 12vw;
    transform: rotate(255deg);
    }
    100%{
    top: 66vh;
    left: 67vw;
    transform: rotate(231deg);
    }
    }
    
    @keyframes fi4{
    0%{
    top: 112vh;
    left: 119vw;
    transform: rotate(69deg);
    }
    33%{
    top: -3vh;
    left: 100vw;
    transform: rotate(40deg);
    }
    66%{
    top: -10vh;
    left: 68vw;
    transform: rotate(79deg);
    }
    100%{
    top: 112vh;
    left: 119vw;
    transform: rotate(86deg);
    }
    }
    
    
    @keyframes fl1{
    0%{
    top: 104vh;
    left: 9vw;
    transform: rotate(190deg);
    }
    33%{
    top: 14vh;
    left: 95vw;
    transform: rotate(323deg);
    }
    66%{
    top: 41vh;
    left: 105vw;
    transform: rotate(211deg);
    }
    100%{
    top: 104vh;
    left: 9vw;
    transform: rotate(3deg);
    }
    }
    
    @keyframes fl2{
    0%{
    top: 60vh;
    left: 21vw;
    transform: rotate(17deg);
    }
    33%{
    top: 57vh;
    left: 48vw;
    transform: rotate(136deg);
    }
    66%{
    top: 14vh;
    left: 50vw;
    transform: rotate(197deg);
    }
    100%{
    top: 60vh;
    left: 21vw;
    transform: rotate(285deg);
    }
    }
    
    @keyframes fl3{
    0%{
    top: 81vh;
    left: -15vw;
    transform: rotate(286deg);
    }
    33%{
    top: 55vh;
    left: 72vw;
    transform: rotate(113deg);
    }
    66%{
    top: 92vh;
    left: -19vw;
    transform: rotate(8deg);
    }
    100%{
    top: 81vh;
    left: -15vw;
    transform: rotate(77deg);
    }
    }
    
    @keyframes fl4{
    0%{
    top: -14vh;
    left: 22vw;
    transform: rotate(143deg);
    }
    33%{
    top: 18vh;
    left: 120vw;
    transform: rotate(242deg);
    }
    66%{
    top: 57vh;
    left: 61vw;
    transform: rotate(298deg);
    }
    100%{
    top: -14vh;
    left: 22vw;
    transform: rotate(347deg);
    }
    }
    
    
    @keyframes fj1{
    0%{
    top: 19vh;
    left: 98vw;
    transform: rotate(257deg);
    }
    33%{
    top: 68vh;
    left: 63vw;
    transform: rotate(150deg);
    }
    66%{
    top: 109vh;
    left: 67vw;
    transform: rotate(228deg);
    }
    100%{
    top: 19vh;
    left: 98vw;
    transform: rotate(310deg);
    }
    }
    
    @keyframes fj2{
    0%{
    top: 30vh;
    left: -11vw;
    transform: rotate(329deg);
    }
    33%{
    top: 88vh;
    left: 39vw;
    transform: rotate(16deg);
    }
    66%{
    top: 116vh;
    left: 23vw;
    transform: rotate(10deg);
    }
    100%{
    top: 30vh;
    left: -11vw;
    transform: rotate(274deg);
    }
    }