body {
    background: #f9f1fc;
}

#scene-game {
    padding-left: 0;
    padding-right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

#main-canvas {
    position: relative;
    width: 920px;
    height: 303px;
    background: url(../img/diagram_desktop.png) no-repeat;
    margin: 150px auto;
}

#main-canvas-inner {
    position: relative;
    left: -116px;
    top: -199px;
}

#main-canvas-inner:before,
#main-canvas-inner:after {
    display: block;
    position: absolute;
    color: #9B51E0;
    font-size: 15px;
    line-height: 26px;
    font-weight: bold;
    left: 749px;
    top: 320px;
}

#main-canvas-inner:before {
    content: 'NE';
    transform: translate(43px, -63px);

}

#main-canvas-inner:after {
    content: 'DA';
    transform: translate(43px, 123px);
}

.draggable {
    cursor: grab;
    display: block;
    position: absolute;
    z-index: 10;

}

.draggable.success {
    cursor: default;
}


.draggable.error .outline {
    stroke: #EB5757;
}

.draggable.success .outline {
    stroke: #8BEEB3;
}


.droppable {
    position: absolute;
    opacity: 0.5;
    margin: -30px;
    border: 30px solid transparent;
    box-sizing: content-box;
}


.droppable:before {
    content: '';
    display: block;
    position: absolute;
    top: 100%;
    left: 50%;
}


.droppable.error:before {
    background-image: url("data:image/svg+xml,%3Csvg width='19' height='19' viewBox='0 0 19 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.7654 9.49997L17.7379 2.5274C18.0873 2.17798 18.0873 1.61147 17.7379 1.26207C17.3885 0.912643 16.822 0.912643 16.4726 1.26207L9.49997 8.23464L2.52741 1.26207C2.17798 0.912643 1.61147 0.912643 1.26207 1.26207C0.912676 1.6115 0.912643 2.17801 1.26207 2.5274L8.23464 9.49997L1.26207 16.4725C0.912643 16.822 0.912643 17.3885 1.26207 17.7379C1.6115 18.0873 2.17801 18.0873 2.52741 17.7379L9.49997 10.7653L16.4725 17.7379C16.8219 18.0873 17.3885 18.0873 17.7379 17.7379C18.0873 17.3884 18.0873 16.8219 17.7379 16.4725L10.7654 9.49997Z' fill='%23EB5757' stroke='%23EB5757'/%3E%3C/svg%3E%0A");
    width: 17px;
    height: 17px;
    transform: translate(-50%, 9px);
}


.droppable.success:before {
    background-image: url("data:image/svg+xml,%3Csvg width='25' height='19' viewBox='0 0 25 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23.8146 1.3391C23.3625 0.886968 22.6296 0.886968 22.1774 1.3391L8.30762 15.209L2.97631 9.87769C2.52423 9.42556 1.79127 9.4256 1.3391 9.87769C0.886968 10.3298 0.886968 11.0627 1.3391 11.5149L7.48902 17.6647C7.94097 18.1168 8.67447 18.1165 9.12623 17.6647L23.8146 2.97631C24.2667 2.52423 24.2667 1.79123 23.8146 1.3391Z' fill='%2383EEAE' stroke='%2383EEAE'/%3E%3C/svg%3E%0A");
    width: 23.15px;
    height: 17px;
    transform: translate(-50%, 9px);
    margin-left: 2px;
}


.draggable[data-index="0"] {
    top: 577px;
    left: 380px;

}

.draggable[data-index="1"] {
    top: 80px;
    left: 350px;
}

.draggable[data-index="2"] {
    top: 505px;
    left: 149px;
}

.draggable[data-index="3"] {
    top: 80px;
    left: 632px;

}

.draggable[data-index="4"] {
    top: 135px;
    left: 118px;
}

.draggable[data-index="5"] {
    top: 157px;
    left: 480px;
}

.draggable[data-index="6"] {
    top: 506px;
    left: 535px;
}


.droppable {
    display: block;
    position: absolute;
}

.droppable[data-index="0"] {
    width: 100px;
    height: 56px;
    left: 79px;
    top: 330px;
}

.droppable[data-index="1"] {
    width: 100px;
    height: 60px;
    left: 306px;
    top: 322px;
}

.droppable[data-index="2"] {
    width: 198px;
    height: 77px;
    left: 487px;
    top: 313px;
}

.droppable[data-index="3"] {
    width: 88px;
    height: 60px;
    left: 749px;
    top: 322px;
}

.droppable[data-index="4"] {
    width: 174px;
    height: 77px;
    left: 820px;
    top: 173px;
}

.droppable[data-index="5"] {
    width: 100px;
    height: 58px;
    left: 970px;
    top: 328px;
}

.droppable[data-index="6"] {
    width: 63px;
    height: 60px;
    left: 876px;
    top: 445px;

}

@media (max-width: 1000px) {
    #main-canvas {
        width: 412px;
        height: 600px;
        background-image: url(../img/diagram_mobile.png);
        margin: 0 auto;
    }

    #main-canvas-inner {
        top: 0;
        left: 0;
    }

    .draggable[data-index="0"] {
        left: 8px;
        top: 388px;
    }

    .draggable[data-index="1"] {
        left: -12px;
        top: 286px;
    }

    .draggable[data-index="2"] {
        left: 276px;
        top: 297px;
    }

    .draggable[data-index="3"] {
        left: 285px;
        top: 86px;
    }

    .draggable[data-index="4"] {
        left: -49px;
        top: 169px;
    }

    .draggable[data-index="5"] {
        left: 292px;
        top: 207px;
    }


    .draggable[data-index="6"] {
        left: 45px;
        top: 86px;
    }


    .droppable {
        position: absolute;
        opacity: 0.5;
        margin: -15px -20px;
        border-width: 15px 20px;
        border-style: solid;
        border-color: transparent;
        box-sizing: content-box;
    }

    .droppable:before {
        content: '';
        display: block;
        position: absolute;
        top: 50%;
        left: 100%;
    }


    .droppable.error:before {
        transform: translate(7px, -50%);
        margin-top: -7px;
    }


    .droppable.success:before {
        transform: translate(7px, -50%);
        margin-top: -4px;
    }


    .droppable[data-index="0"] {
        left: 155px;
        top: 51px;
    }

    .droppable[data-index="1"] {
        left: 155px;
        top: 141px;
    }

    .droppable[data-index="2"] {
        left: 106px;
        top: 242px;
    }

    .droppable[data-index="3"] {
        left: 159px;
        top: 365px;
    }

    .droppable[data-index="4"] {
        left: 180px;
        top: 447px;
    }

    .droppable[data-index="5"] {
        left: 155px;
        top: 555px;
    }

    .droppable[data-index="6"] {
        left: 80px;
        top: 454px;
    }

    #main-canvas-inner:before,
    #main-canvas-inner:after {
        left: 159px;
        top: 363px;
    }

    #main-canvas-inner:before {
        content: 'NE';
        transform: translate(95px, 40px);

    }

    #main-canvas-inner:after {
        content: 'DA';
        transform: translate(-28px, 40px);
    }

}


@media only screen and (max-width: 600px) {

    .draggable[data-index="2"] svg {
        width: 170px;
    }

    .draggable[data-index="3"] {
        left: 245px;
    }

    .draggable[data-index="4"] {
        left: 0;
    }

    .draggable[data-index="4"] svg {
        width: 150px;
    }

    .draggable[data-index="5"] {
        left: 258px;
    }

    .scene {
        min-height: 560px;
    }
}

@media only screen and (max-width: 450px) {


    .draggable[data-index="6"] svg {
        width: 70px;
    }

    .draggable[data-index="3"] svg {
        width: 70px;
    }

    .draggable[data-index="5"] svg,
    .draggable[data-index="0"] svg,
    .draggable[data-index="1"] svg {
        width: 80px;
    }

    .draggable[data-index="2"] svg {
        width: 140px;
    }

    .draggable[data-index="1"] {
        left: 55px;
    }

    #main-canvas {
        width: 300px;
        background-position: center;
    }

    #main-canvas-inner:before, #main-canvas-inner:after {
        left: 105px;
        top: 339px;
    }

    .droppable[data-index="4"] {
        left: 135px;
        top: 431px;
        width: 145px;
        height: 65px;
    }

    .droppable[data-index="0"] {
        left: 100px;
        top: 20px;
    }

    .droppable[data-index="1"] {
        left: 100px;
        top: 120px;
    }

    .droppable[data-index="2"] {
        left: 70px;
        top: 230px;
        width: 160px;
        height: 60px;
    }

    .droppable[data-index="3"] {
        left: 104px;
        height: 48px;
        top: 340px;
    }

    .droppable[data-index="5"] {
        left: 99px;
        top: 526px;
    }

    .droppable[data-index="6"] {
        left: 31px;
        top: 434px;
    }

    .draggable[data-index="3"] {
        left: 187px;
        top: 55px;
    }

    .draggable[data-index="5"] {
        left: 212px;
        top: 147px;
    }

    .draggable[data-index="6"] {
        left: 26px;
        top: 50px;
    }

    .draggable[data-index="4"] {
        left: -29px;
        top: 200px;
    }

    .draggable[data-index="1"] {
        left: 14px;
        top: 125px;
    }

    .draggable[data-index="0"] {
        left: -8px;
        top: 304px;
    }

    .draggable[data-index="2"] {
        left: 172px;
        top: 256px;
    }

}