.particle-network-animation {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 100vh;
    background-color: #171717;
}

.particle-network-animation::before {
    z-index: -2;
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: url("assets/images/black-abstract-textured-backgound.jpg");
    background-position: center center;
    background-size: cover;
    opacity: 0.2;
}

.glow {
    z-index: -1;
    position: fixed;
    top: 50%;
    left: 50%;
    background-image: radial-gradient(circle closest-side, rgba(255, 255, 255, 0.025), transparent);
}

.glow-1 {
    width: 150vw;
    height: 150vh;
    margin-top: -75vh;
    margin-left: -75vw;
    animation: glow-1-move 25s linear infinite both;
}

@keyframes glow-1-move {
    from {
        transform: translate(-100%, 100%);
    }
    to {
        transform: translate(100%, -100%);
    }
}

.glow-2 {
    width: 100vw;
    height: 100vh;
    margin-top: -50vh;
    margin-left: -50vw;
    animation: glow-2-move 25s linear calc(25s / 3) infinite both;
}

@keyframes glow-2-move {
    from {
        transform: translate(-100%, 0%);
    }
    to {
        transform: translate(100%, 100%);
    }
}

.glow-3 {
    width: 120vw;
    height: 120vh;
    margin-top: -60vh;
    margin-left: -60vw;
    animation: glow-3-move 25s linear calc((25s / 3) * 2) infinite both;
}

@keyframes glow-3-move {
    from {
        transform: translate(100%, 100%);
    }
    to {
        transform: translate(0%, -100%);
    }
}