;
(function () {

    function makeString(num) {
        return num + 'px';
    }

    var bodyDom = document.body;
    var section4Dom = document.querySelector('.personnel');

    function getSectionTotal() {
        return (
            section4Dom.getBoundingClientRect().y -
            bodyDom.getBoundingClientRect().y
        );
    }

    function windowScrollEventCallbackBox2(e) {
        var scrollTop = e.target.scrollingElement.scrollTop
        var workingRange = 145;
        var topMax = 440;
        var topMin = 29;
        var sectionTotal = getSectionTotal();

        var dy = (scrollTop - (sectionTotal - workingRange)) * -topMax / workingRange + topMax;
        if (dy > topMax) dy = topMax;
        if (dy < topMin) dy = topMin;

        document.querySelector('.card-2').style.top = makeString(dy);
    }

    function windowScrollEventCallbackBox3(e) {
        var scrollTop = e.target.scrollingElement.scrollTop
        var workingRange = 66;
        var topMax = 820;
        var topMin = 70;
        var sectionTotal = getSectionTotal();

        var dy = (scrollTop - (sectionTotal - workingRange)) * -topMax / workingRange + topMax;
        if (dy > topMax) dy = topMax;
        if (dy < topMin) dy = topMin;

        document.querySelector('.card-3').style.top = makeString(dy);
    }

    function windowScrollEventCallbackBox4(e) {
        var scrollTop = e.target.scrollingElement.scrollTop
        var workingRange = 36;
        var topMax = 1020;
        var topMin = 114;
        var sectionTotal = getSectionTotal();

        var dy = (scrollTop - (sectionTotal - workingRange)) * -topMax / workingRange + topMax;
        if (dy > topMax) dy = topMax;
        if (dy < topMin) dy = topMin;

        document.querySelector('.card-4').style.top = makeString(dy);
    }

    function windowScrollEventCallback(e) {
        window.requestAnimationFrame(function () {
            windowScrollEventCallbackBox2(e);
            windowScrollEventCallbackBox3(e);
            windowScrollEventCallbackBox4(e);

        })
    }

    window.addEventListener('scroll', windowScrollEventCallback);

})();

// getBoundingClientRect
// document.querySelector('.box3').style.top = '870px';