body {
    background: #f9f1fc;
}


#main-canvas {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 923px;
    height: 30px;
    background: url(../img/diagram_desktop.png) no-repeat;
}

#main-canvas-inner {
    position: relative;
    left: -160px;
    top: -351px;
}

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

.draggable.success {
    cursor: default;
    z-index: 11;
}

.draggable [stroke] {
    stroke-opacity: 0;
}

.draggable.error [stroke] {
    stroke: #EB5757;
    stroke-opacity: 1;
}

.draggable.success [stroke] {
    stroke: #8BEEB3;
    stroke-opacity: 1;
}

.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;
    background-position: 50%;
    -webkit-background-size: contain;
    background-size: contain;
}


.draggable[data-index="0"] {
    width: 153.42px;
    height: 105.48px;
    left: 814px;
    top: 157px;


}

.draggable[data-index="1"] {
    width: 153.42px;
    height: 105.48px;
    left: 607px;
    top: 113px;


}

.draggable[data-index="2"] {
    width: 223.29px;
    height: 106.85px;
    left: 163px;
    top: 481px;

}

.draggable[data-index="3"] {
    width: 168.49px;
    height: 106.85px;
    left: 434px;
    top: 516px;

}


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

.droppable[data-index="0"] {

    width: 153.42px;
    height: 105.48px;
    left: 109px;
    top: 313px;
}

.droppable[data-index="1"] {
    width: 168.49px;
    height: 106.85px;
    left: 360px;
    top: 313px;
}

.droppable[data-index="2"] {
    width: 223.29px;
    height: 106.85px;
    left: 597px;
    top: 313px;
}

.droppable[data-index="3"] {
    width: 153.42px;
    height: 105.48px;
    left: 889px;
    top: 312px;
}


@media (max-width: 1000px) {
    #main-canvas {
        width: 411px;
        height: 620px;
        background-image: url(../img/diagram_mobile.png);
        position: relative;
        transform: none;
        left: auto;
        top: auto;
        margin: 0 auto;
    }

    #scene-game header {
        margin-bottom: 20px;
    }

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

    #main-canvas svg {
        width: 100%;
        height: 100%;
    }

    .draggable[data-index="0"] {
        width: 112px;
        height: 77px;
        left: 26px;
        top: 484px;
    }

    .draggable[data-index="1"] {
        width: 123px;
        height: 78px;
        left: 26px;
        top: 287px;
    }

    .draggable[data-index="2"] {
        width: 163px;
        height: 78px;
        left: 228px;
        top: 219px;
    }

    .draggable[data-index="3"] {
        width: 112px;
        height: 77px;
        left: 278px;
        top: 332px;

    }


    .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"] {
        width: 163px;
        height: 78px;
        left: 118px;
        top: 147px;
    }

    .droppable[data-index="1"] {
        width: 112px;
        height: 77px;
        left: 144px;
        top: 273px;

    }

    .droppable[data-index="2"] {
        width: 112px;
        height: 77px;
        left: 144px;
        top: 396px;

    }

    .droppable[data-index="3"] {
        width: 123px;
        height: 78px;
        left: 138px;
        top: 520px;

    }
}

@media only screen and (max-width: 600px) {
    .scene {
        min-height: 560px;
        height: auto;
    }
}

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


    #main-canvas {
        width: 300px;
        height: 500px;
        background-position: center top;
        margin: 0 auto;
        transform: none;
        left: 0;
        top: 0;
    }

    .droppable[data-index="0"] {
        left: 75px;
        width: 135px;
        top: 156px;
        height: 65px;
    }

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

    .droppable[data-index="2"] {
        left: 80px;
        top: 395px;
        width: 125px;
    }

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

    .draggable[data-index="2"] {
        left: 159px;
        top: 200px;
        width: 140px;
    }

    .draggable[data-index="1"] {
        width: 105px;
        left: 5px;
        top: 270px;
    }

    .draggable[data-index="3"] {
        width: 88px;
        left: 205px;
        top: 302px;
    }

    .draggable[data-index="0"] {
        left: 1px;
        top: 458px;
        width: 88px;
    }

}