#fairydust {
    z-index:  -2;
    position: fixed;

    --size:      80px;
    --duration1: 10s;
    --duration2: 8.5s;
    --duration3: 12s;

    --pointa_x:  calc(-1 * (var(--size) + 10px));
    --pointa_y:  30vh;

    --pointb_x:  calc(100vw + (var(--size) + 10px));
    --pointb_y:  50vh;

    --pointc_x:  42vw;
    --pointc_y:  calc(100vh + (var(--size) + 10px));

    width:  var(--size);
    height: var(--size);

    left: var(--pointa_x);
    top:  var(--pointa_y);

    transform: translateY(-50%) rotate(0deg);

    filter: drop-shadow(0 0 15px rgba(255, 100, 0, 0.8));

    animation:
    fly-through-screen calc(var(--duration1) + var(--duration2) + var(--duration3)) linear infinite;
    animation-delay: 5s;

    svg {
        width: 100%;
        height: 100%;
        filter: drop-shadow(0 0 5px rgba(0, 150, 255, 0.8));
    }
}

@keyframes fly-through-screen {
    0% {
        left: var(--pointa_x);
        top:  var(--pointa_y);
        transform: translateY(-50%) rotate(30deg);
        opacity: 1;
    }

    33% {
        left: var(--pointb_x);
        top:  var(--pointb_y);
        transform: translateY(-50%) rotate(30deg);
        opacity: 1;
    }

    40% {
        left: var(--pointb_x);
        top:  var(--pointb_y);
        transform: translateY(-50%) rotate(170deg);
        opacity: 1;
    }

    66% {
        left: var(--pointc_x);
        top:  var(--pointc_y);
        transform: translateY(-50%) rotate(170deg);
        opacity: 1;
    }

    70% {
        left: var(--pointc_x);
        top:  var(--pointc_y);
        transform: translateY(-50%) rotate(-90deg);
        opacity: 1;
    }

    95% {
        left: var(--pointa_x);
        top:  var(--pointa_y);
        transform: translateY(-50%) rotate(-90deg);
        opacity: 1;
    }

    100% {
        left: var(--pointa_x);
        top:  var(--pointa_y);
        transform: translateY(-50%) rotate(0deg);
        opacity: 1;
    }
}