@keyframes bg-drift {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

@keyframes particle-orbit {
    100% {
        transform: translate3d(0, 0, 1px) rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .background {
        animation: none;
    }

    .background span {
        animation: none;
    }
}

.background {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background: linear-gradient(135deg, #aac7ee 0%, #b8d4f5 30%, #aac7ee 60%, #8eb5e8 100%);
    background-size: 200% 200%;
    animation: bg-drift 28s ease-in-out infinite;
}

.background span {
    position: absolute;
    width: 1.4vmin;
    height: 1.4vmin;
    border-radius: 50%;
    background-color: currentColor;
    opacity: 0.75;
    backface-visibility: hidden;
    animation: particle-orbit linear infinite;
    box-shadow: 0 0 1.2vmin currentColor, 0 0 2.4vmin currentColor;
}

.background span:nth-child(1)  { color: #1d2449; top:  6%; left: 14%; animation-duration: 48s; animation-delay:  -8s; transform-origin:  24vw  16vh; }
.background span:nth-child(2)  { color: #0062ae; top: 18%; left: 78%; animation-duration: 42s; animation-delay: -22s; transform-origin: -20vw -14vh; }
.background span:nth-child(3)  { color: #7e0202; top: 32%; left: 62%; animation-duration: 55s; animation-delay: -38s; transform-origin:  16vw -12vh; }
.background span:nth-child(4)  { color: #1d2449; top: 48%; left: 22%; animation-duration: 50s; animation-delay: -15s; transform-origin: -18vw  20vh; }
.background span:nth-child(5)  { color: #0062ae; top: 62%; left: 88%; animation-duration: 44s; animation-delay: -30s; transform-origin: -24vw   6vh; }
.background span:nth-child(6)  { color: #7e0202; top: 74%; left: 10%; animation-duration: 52s; animation-delay: -45s; transform-origin:  22vw -16vh; }
.background span:nth-child(7)  { color: #0062ae; top: 86%; left: 48%; animation-duration: 46s; animation-delay: -12s; transform-origin:  12vw  18vh; }
.background span:nth-child(8)  { color: #1d2449; top: 92%; left: 72%; animation-duration: 58s; animation-delay: -52s; transform-origin: -22vw -14vh; }
.background span:nth-child(9)  { color: #7e0202; top: 14%; left: 42%; animation-duration: 54s; animation-delay: -28s; transform-origin:  10vw -18vh; }
.background span:nth-child(10) { color: #0062ae; top: 26%; left:  8%; animation-duration: 40s; animation-delay: -18s; transform-origin:  20vw   8vh; }
.background span:nth-child(11) { color: #1d2449; top: 38%; left: 92%; animation-duration: 47s; animation-delay: -35s; transform-origin: -16vw  10vh; }
.background span:nth-child(12) { color: #7e0202; top: 52%; left: 36%; animation-duration: 56s; animation-delay: -48s; transform-origin:  14vw  22vh; }
.background span:nth-child(13) { color: #0062ae; top: 58%; left: 68%; animation-duration: 43s; animation-delay: -10s; transform-origin: -12vw -20vh; }
.background span:nth-child(14) { color: #1d2449; top: 68%; left: 52%; animation-duration: 51s; animation-delay: -40s; transform-origin:  18vw  -8vh; }
.background span:nth-child(15) { color: #7e0202; top:  4%; left: 58%; animation-duration: 45s; animation-delay: -25s; transform-origin:  -8vw  14vh; }
.background span:nth-child(16) { color: #0062ae; top: 44%; left:  4%; animation-duration: 49s; animation-delay: -55s; transform-origin:  26vw -10vh; }
.background span:nth-child(17) { color: #1d2449; top: 78%; left: 26%; animation-duration: 41s; animation-delay: -32s; transform-origin: -14vw  24vh; }
.background span:nth-child(18) { color: #7e0202; top: 22%; left: 94%; animation-duration: 53s; animation-delay: -42s; transform-origin: -26vw   4vh; }
.background span:nth-child(19) { color: #0062ae; top: 34%; left: 28%; animation-duration: 38s; animation-delay: -20s; transform-origin:  16vw  12vh; }
.background span:nth-child(20) { color: #1d2449; top: 96%; left: 38%; animation-duration: 57s; animation-delay: -60s; transform-origin:  -6vw -22vh; }