 /* Background animé index.html */

 @keyframes move {
    100% {
        transform: translate3d(0, 0, 1px) rotate(360deg);
    }
}

.background {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    background: #000000;
    overflow: hidden;
    z-index: -1;
}

.background span {
    width: 6vmin;
    height: 6vmin;
    border-radius: 6vmin;
    backface-visibility: hidden;
    position: absolute;
    animation: move;
    animation-duration: 5;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}


.background span:nth-child(0) {
    color: #00ffee;
    top: 61%;
    left: 46%;
    animation-duration: 38s;
    animation-delay: -105s;
    transform-origin: 3vw 17vh;
    box-shadow: -12vmin 0 2.472777087104388vmin currentColor;
}
.background span:nth-child(1) {
    color: #E45A84;
    top: 86%;
    left: 77%;
    animation-duration: 389s;
    animation-delay: -420s;
    transform-origin: 21vw -1vh;
    box-shadow: -12vmin 0 1.500768847907568vmin currentColor;
}
.background span:nth-child(2) {
    color: #ff0000;
    top: 18%;
    left: 21%;
    animation-duration: 348s;
    animation-delay: -306s;
    transform-origin: -2vw -22vh;
    box-shadow: 12vmin 0 1.8399312684336344vmin currentColor;
}
.background span:nth-child(3) {
    color: #00ffee;
    top: 55%;
    left: 39%;
    animation-duration: 434s;
    animation-delay: -7s;
    transform-origin: -11vw -16vh;
    box-shadow: -12vmin 0 2.1514214025772542vmin currentColor;
}
.background span:nth-child(4) {
    color: #ff0000;
    top: 21%;
    left: 68%;
    animation-duration: 316s;
    animation-delay: -156s;
    transform-origin: -14vw -21vh;
    box-shadow: 12vmin 0 1.529297844856612vmin currentColor;
}
.background span:nth-child(5) {
    color: #00ffee;
    top: 82%;
    left: 39%;
    animation-duration: 420s;
    animation-delay: -353s;
    transform-origin: 12vw 12vh;
    box-shadow: 12vmin 0 2.440961473252411vmin currentColor;
}
.background span:nth-child(6) {
    color: #00ffee;
    top: 42%;
    left: 58%;
    animation-duration: 322s;
    animation-delay: -237s;
    transform-origin: 18vw 4vh;
    box-shadow: -12vmin 0 2.423059301899453vmin currentColor;
}
.background span:nth-child(7) {
    color: #ff0000;
    top: 63%;
    left: 82%;
    animation-duration: 365s;
    animation-delay: -219s;
    transform-origin: 21vw 2vh;
    box-shadow: -12vmin 0 1.5469571811069416vmin currentColor;
}
.background span:nth-child(8) {
    color: #ff0000;
    top: 3%;
    left: 6%;
    animation-duration: 228s;
    animation-delay: -228s;
    transform-origin: -7vw -12vh;
    box-shadow: 12vmin 0 2.223161779083555vmin currentColor;
}
.background span:nth-child(9) {
    color: #00ffee;
    top: 63%;
    left: 80%;
    animation-duration: 227s;
    animation-delay: -382s;
    transform-origin: 11vw -13vh;
    box-shadow: 12vmin 0 1.5482433455365654vmin currentColor;
}
.background span:nth-child(10) {
    color: #00ffee;
    top: 75%;
    left: 94%;
    animation-duration: 6s;
    animation-delay: -122s;
    transform-origin: -13vw 9vh;
    box-shadow: 12vmin 0 2.1684599201170687vmin currentColor;
}
.background span:nth-child(11) {
    color: #ff0000;
    top: 99%;
    left: 74%;
    animation-duration: 186s;
    animation-delay: -17s;
    transform-origin: 17vw 5vh;
    box-shadow: -12vmin 0 2.2568551904123275vmin currentColor;
}
.background span:nth-child(12) {
    color: #00ffee;
    top: 66%;
    left: 92%;
    animation-duration: 240s;
    animation-delay: -436s;
    transform-origin: -9vw -15vh;
    box-shadow: 12vmin 0 2.1801486985728786vmin currentColor;
}
.background span:nth-child(13) {
    color: #00ffee;
    top: 70%;
    left: 67%;
    animation-duration: 79s;
    animation-delay: -249s;
    transform-origin: 2vw 3vh;
    box-shadow: 12vmin 0 2.1958567787375487vmin currentColor;
}
.background span:nth-child(14) {
    color: #E45A84;
    top: 30%;
    left: 95%;
    animation-duration: 436s;
    animation-delay: -396s;
    transform-origin: 13vw 21vh;
    box-shadow: 12vmin 0 2.314594095031297vmin currentColor;
}
.background span:nth-child(15) {
    color: #E45A84;
    top: 22%;
    left: 15%;
    animation-duration: 248s;
    animation-delay: -396s;
    transform-origin: 3vw -8vh;
    box-shadow: -12vmin 0 2.180636816550864vmin currentColor;
}
.background span:nth-child(16) {
    color: #00ffee;
    top: 51%;
    left: 42%;
    animation-duration: 223s;
    animation-delay: -38s;
    transform-origin: 0vw -4vh;
    box-shadow: 12vmin 0 1.662918477700074vmin currentColor;
}
.background span:nth-child(17) {
    color: #00ffee;
    top: 7%;
    left: 97%;
    animation-duration: 206s;
    animation-delay: -320s;
    transform-origin: -1vw -2vh;
    box-shadow: -12vmin 0 2.332696180042988vmin currentColor;
}
.background span:nth-child(18) {
    color: #00ffee;
    top: 1%;
    left: 28%;
    animation-duration: 436s;
    animation-delay: -147s;
    transform-origin: 12vw -21vh;
    box-shadow: -12vmin 0 1.7669037486476205vmin currentColor;
}
.background span:nth-child(19) {
    color: #00ffee;
    top: 55%;
    left: 43%;
    animation-duration: 433s;
    animation-delay: -86s;
    transform-origin: -2vw -2vh;
    box-shadow: 12vmin 0 2.3581305579838414vmin currentColor;
}
.background span:nth-child(20) {
    color: #00ffee;
    top: 98%;
    left: 48%;
    animation-duration: 18s;
    animation-delay: -72s;
    transform-origin: -2vw 13vh;
    box-shadow: -12vmin 0 1.938240973567534vmin currentColor;
}
.background span:nth-child(21) {
    color: #E45A84;
    top: 78%;
    left: 13%;
    animation-duration: 268s;
    animation-delay: -214s;
    transform-origin: 8vw 25vh;
    box-shadow: -12vmin 0 2.295709326595313vmin currentColor;
}
.background span:nth-child(22) {
    color: #ff0000;
    top: 43%;
    left: 36%;
    animation-duration: 70s;
    animation-delay: -245s;
    transform-origin: -24vw 19vh;
    box-shadow: 12vmin 0 2.043169181791179vmin currentColor;
}
.background span:nth-child(23) {
    color: #E45A84;
    top: 30%;
    left: 33%;
    animation-duration: 425s;
    animation-delay: -224s;
    transform-origin: -12vw 16vh;
    box-shadow: 12vmin 0 1.9442005755990117vmin currentColor;
}
.background span:nth-child(24) {
    color: #ff0000;
    top: 19%;
    left: 86%;
    animation-duration: 187s;
    animation-delay: -402s;
    transform-origin: 7vw -23vh;
    box-shadow: 12vmin 0 1.8693623487609896vmin currentColor;
}
.background span:nth-child(25) {
    color: #ff0000;
    top: 42%;
    left: 23%;
    animation-duration: 402s;
    animation-delay: -113s;
    transform-origin: 12vw 6vh;
    box-shadow: 12vmin 0 2.2353530675033837vmin currentColor;
}
.background span:nth-child(26) {
    color: #ff0000;
    top: 3%;
    left: 84%;
    animation-duration: 202s;
    animation-delay: -444s;
    transform-origin: 15vw -17vh;
    box-shadow: 12vmin 0 1.6414829246831926vmin currentColor;
}
.background span:nth-child(27) {
    color: #E45A84;
    top: 28%;
    left: 93%;
    animation-duration: 209s;
    animation-delay: -12s;
    transform-origin: -18vw -18vh;
    box-shadow: -12vmin 0 2.4984000917877527vmin currentColor;
}
.background span:nth-child(28) {
    color: #00ffee;
    top: 49%;
    left: 24%;
    animation-duration: 279s;
    animation-delay: -259s;
    transform-origin: 7vw 17vh;
    box-shadow: -12vmin 0 2.13581560963286vmin currentColor;
}
.background span:nth-child(29) {
    color: #ff0000;
    top: 4%;
    left: 13%;
    animation-duration: 154s;
    animation-delay: -249s;
    transform-origin: 7vw 8vh;
    box-shadow: -12vmin 0 2.431478608529723vmin currentColor;
}
.background span:nth-child(30) {
    color: #E45A84;
    top: 16%;
    left: 56%;
    animation-duration: 170s;
    animation-delay: -411s;
    transform-origin: -4vw -7vh;
    box-shadow: -12vmin 0 1.6951565812048384vmin currentColor;
}
.background span:nth-child(31) {
    color: #00ffee;
    top: 44%;
    left: 33%;
    animation-duration: 252s;
    animation-delay: -41s;
    transform-origin: -7vw -13vh;
    box-shadow: 12vmin 0 2.2612796585022625vmin currentColor;
}
.background span:nth-child(32) {
    color: #E45A84;
    top: 24%;
    left: 64%;
    animation-duration: 419s;
    animation-delay: -280s;
    transform-origin: 17vw -4vh;
    box-shadow: -12vmin 0 1.8811594070799105vmin currentColor;
}
.background span:nth-child(33) {
    color: #00ffee;
    top: 58%;
    left: 16%;
    animation-duration: 366s;
    animation-delay: -424s;
    transform-origin: 15vw -16vh;
    box-shadow: 12vmin 0 2.26916016887895vmin currentColor;
}
.background span:nth-child(34) {
    color: #E45A84;
    top: 62%;
    left: 8%;
    animation-duration: 356s;
    animation-delay: -158s;
    transform-origin: -11vw -3vh;
    box-shadow: 12vmin 0 2.1927575592637414vmin currentColor;
}
.background span:nth-child(35) {
    color: #ff0000;
    top: 24%;
    left: 42%;
    animation-duration: 86s;
    animation-delay: -381s;
    transform-origin: 19vw -20vh;
    box-shadow: -12vmin 0 1.8205426464089638vmin currentColor;
}
.background span:nth-child(36) {
    color: #ff0000;
    top: 8%;
    left: 15%;
    animation-duration: 431s;
    animation-delay: -290s;
    transform-origin: -16vw 3vh;
    box-shadow: 12vmin 0 1.9990042289708065vmin currentColor;
}
.background span:nth-child(37) {
    color: #00ffee;
    top: 24%;
    left: 2%;
    animation-duration: 410s;
    animation-delay: -267s;
    transform-origin: 23vw 16vh;
    box-shadow: -12vmin 0 1.989864856417996vmin currentColor;
}
.background span:nth-child(38) {
    color: #E45A84;
    top: 44%;
    left: 46%;
    animation-duration: 107s;
    animation-delay: -403s;
    transform-origin: 18vw -23vh;
    box-shadow: 12vmin 0 2.3295187990965625vmin currentColor;
}
.background span:nth-child(39) {
    color: #00ffee;
    top: 84%;
    left: 74%;
    animation-duration: 413s;
    animation-delay: -104s;
    transform-origin: 7vw 21vh;
    box-shadow: -12vmin 0 1.514372502033907vmin currentColor;
}
.background span:nth-child(40) {
    color: #00ffee;
    top: 15%;
    left: 97%;
    animation-duration: 333s;
    animation-delay: -280s;
    transform-origin: -14vw -23vh;
    box-shadow: 12vmin 0 2.1663319544316204vmin currentColor;
}
.background span:nth-child(41) {
    color: #E45A84;
    top: 43%;
    left: 22%;
    animation-duration: 227s;
    animation-delay: -152s;
    transform-origin: 1vw -21vh;
    box-shadow: -12vmin 0 1.8715706836776418vmin currentColor;
}
.background span:nth-child(42) {
    color: #00ffee;
    top: 32%;
    left: 74%;
    animation-duration: 297s;
    animation-delay: -1s;
    transform-origin: 10vw 19vh;
    box-shadow: -12vmin 0 1.9095611701540598vmin currentColor;
}
.background span:nth-child(43) {
    color: #E45A84;
    top: 4%;
    left: 13%;
    animation-duration: 372s;
    animation-delay: -253s;
    transform-origin: 15vw 23vh;
    box-shadow: 12vmin 0 2.488339397663416vmin currentColor;
}
.background span:nth-child(44) {
    color: #00ffee;
    top: 22%;
    left: 31%;
    animation-duration: 140s;
    animation-delay: -410s;
    transform-origin: 2vw -2vh;
    box-shadow: -12vmin 0 2.3404743845183953vmin currentColor;
}
.background span:nth-child(45) {
    color: #E45A84;
    top: 4%;
    left: 51%;
    animation-duration: 50s;
    animation-delay: -106s;
    transform-origin: -7vw -12vh;
    box-shadow: 12vmin 0 1.547702442705452vmin currentColor;
}
.background span:nth-child(46) {
    color: #ff0000;
    top: 3%;
    left: 50%;
    animation-duration: 391s;
    animation-delay: -154s;
    transform-origin: 25vw 10vh;
    box-shadow: 12vmin 0 2.357677291381388vmin currentColor;
}
.background span:nth-child(47) {
    color: #E45A84;
    top: 80%;
    left: 100%;
    animation-duration: 455s;
    animation-delay: -19s;
    transform-origin: -2vw 11vh;
    box-shadow: 12vmin 0 2.0755594180370234vmin currentColor;
}
.background span:nth-child(48) {
    color: #E45A84;
    top: 61%;
    left: 41%;
    animation-duration: 201s;
    animation-delay: -308s;
    transform-origin: -21vw 9vh;
    box-shadow: -12vmin 0 2.1638961920332127vmin currentColor;
}
.background span:nth-child(49) {
    color: #ff0000;
    top: 14%;
    left: 2%;
    animation-duration: 58s;
    animation-delay: -111s;
    transform-origin: -24vw -7vh;
    box-shadow: -12vmin 0 1.623930130106602vmin currentColor;
}
