body {
    margin: 0;
    background-color: rgb(104, 104, 104);
}

.l2b-link {
  text-decoration: none;
  margin-bottom: 20px;
  font-size: 20px;
  text-transform: uppercase;
  color: #ccc;
}

.main {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
  flex-direction: column;
    min-height: 100vh;
}

.gw-parts-scene {
    width: 80vw;
    height: 80vh;
    border: 1px solid #000;
    overflow: hidden;
    position: relative;
    background-color: rgb(185, 185, 185);
}

.gw-part {
    background-color: hsl(0, 0%, 100%);
    width: 0;
    height: 0;
    position: absolute;
    top: calc(50% - 10px);
    left: calc(50% - 10px);
    transform: translateX(0) translateY(0);
    transition-timing-function: ease-in;
    /* transition-delay: 500ms; */
}

.gw-part__item {
    content: "";
    display: block;
    background-color: hsl(0, 0%, 100%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    overflow: hidden;
    position: absolute;
    left: 0px;
    top: 0px;
    transition-timing-function: ease-in;
}

document.addEventListener('DOMContentLoaded', function (e) {
    var scene = document.querySelector(".gw-parts-scene");
    if (!!!scene) {
        return;
    }
    var time = 5000;
    var timeTransitionMin = time * 2;
    var timeTransitionMax = time * 4;
    var timeIntervalMin = time;
    var timeIntervalMax = time * 2;
    var size = 1.5;
    for (var i = 0; i < 100; i++) {
        GWcreatePart(scene);
    }


    function GWcreatePart(scene) {
        var part = document.createElement('div');
        part.className = "gw-part";
        var partItem = document.createElement('div');
        partItem.className = "gw-part__item";
        part.appendChild(partItem);
        scene.appendChild(part);
        setInterval(function () {
            var tempTime = getRandomInt(timeTransitionMin, timeTransitionMax);
            part.style.transition = tempTime + "ms all";
            part.style.transform = 'translateX(' + getRandomInt(-scene.getBoundingClientRect().width / size, scene.getBoundingClientRect().width / size) + 'px) translateY(' + getRandomInt(-scene.getBoundingClientRect().height / size, scene.getBoundingClientRect().height / size) + 'px) rotate(' + getRandomInt(-400, 400) + 'deg)';
            partItem.style.transition = tempTime / 2 + "ms all";
            partItem.style.backgroundColor = "hsl(0, " + getRandomInt(30, 80) + "%, " + getRandomInt(30, 100) + "%)";
            partItem.style.transform = 'translateX(' + getRandomInt(-150, 150) + 'px)  translateY(' + getRandomInt(-150, 150) + 'px)';
        }, getRandomInt(timeIntervalMin, timeIntervalMax));
    }

    function getRandomInt(min, max) {
        return Math.floor(Math.random() * (max - min)) + min;
    }
});