.container
    .item I
    .item II
    .item III
    .item IV
    .item V
    .item VI
    .item VII
    .end

@import url('https://fonts.googleapis.com/css?family=Dokdo');

html {
    font-family: 'Dokdo', cursive;
}

body {
    background: #F3E5AB;
    overflow-x: hidden;
}

.container {
    position: relative;
    margin: 0 auto 5rem;
    height: 40rem;
    width: 1000px;
    max-width: 100%;
}

.item {
    height: 5rem;
    width: 5rem;
    text-align: center;
    line-height: 5rem;
    font-size: 2rem;
    border-top-left-radius: 70%;
    border-bottom-right-radius: 70%;
    background: #619371;
    color: #FFFFFF;
    position: absolute;
    transform: translateX(-50%) translateY(-50%);

    &:nth-of-type(1) {
        top: 30%;
        left: 10%;
    }

    &:nth-of-type(2) {
        top: 20%;
        left: 35%;
    }

    &:nth-of-type(3) {
        top: 15%;
        left: 65%;
    }

    &:nth-of-type(4) {
        top: 30%;
        left: 90%;
    }

    &:nth-of-type(5) {
        top: 40%;
        left: 70%;
    }

    &:nth-of-type(6) {
        top: 55%;
        left: 45%;
    }

    &:nth-of-type(7) {
        top: 80%;
        left: 60%;
    }

    @media screen and (max-width: 35rem) {
        &:nth-of-type(1) {
            top: 15%;
            left: 15%;
        }

        &:nth-of-type(2) {
            top: 20%;
            left: 45%;
        }

        &:nth-of-type(3) {
            top: 15%;
            left: 80%;
        }

        &:nth-of-type(4) {
            top: 40%;
            left: 80%;
        }

        &:nth-of-type(5) {
            top: 55%;
            left: 50%;
        }

        &:nth-of-type(6) {
            top: 65%;
            left: 20%;
        }

        &:nth-of-type(7) {
            top: 80%;
            left: 70%;
        }
    }
}


.end {
    height: 0;
    width: 0;
    position: absolute;
    bottom: 0;
    left: 60%;
    
    @media screen and (max-width: 35rem) {
        left: 70%;
    }
}

const items = document.querySelectorAll('.item');
const end = document.querySelector('.end');

const options = {
    startSockets: [
        'top',
        'bottom',
        'right',
        'bottom',
        'left',
        'right'
    ],
    endSockets: [
        'top',
        'bottom',
        'top',
        'top',
        'top',
        'top'
    ]
};


new LeaderLine(items[6], end, {
    dash: true,
    size: 2,
    color: '#BA8E59',
    endPlug: 'arrow1',
    endPlugSize: 2
});


for (let i = 0; i < items.length - 1; i++) {
    new LeaderLine(items[i], items[i + 1], {
        dash: true,
        size: 2,
        color: '#BA8E59',
        endPlug: 'behind',
        startSocket: options.startSockets[i],
        endSocket: options.endSockets[i]
    });
}