html {
    cursor: url("media/claw_closed.png")25 80, grabbing;
    min-height: 100%;
}
body {
	background-image: url(media/paper.gif);
}
div {
	position: absolute;
}
img {
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
    pointer-events: auto;
}

.invisible {
    visibility: hidden;
    cursor: url("media/claw_closed.png")25 80, grabbing;
}

/*SCRAP WHEN ON BENCH - APPEARS WHEN SCRAP DISAPPEARS*/
.benchPart {
	width: calc(100vw * 0.06);
	height: auto;
        cursor: url("media/claw_open.png")25 80, grab;
}

.scrap {
    width: calc(100vw * 0.12);
    height: auto;
    cursor: url("media/claw_open.png")25 80, grab;
    touch-action: none;
    z-index: 20;
    pointer-events: auto;
}

.grabbing {
    cursor: url("media/claw_closed.png")25 80, grabbing;
}

.construct {
    transition: left 1s, top 1s;
    width: 10%;
    height: auto;
    left: 50%;   
    top: calc(100vh - (100vw * 0.15) - 100vh * 0.5);
    pointer-events: none;
}
.construct:hover {
    width: 13%;
    opacity: 0.7;
}

#workBench {
    left: 39%;
    top:  35%;
    width: 30%;
    height: calc(100vw * 0.15);
    cursor: url("media/claw_closed.png")25 80, grabbing;

    /* Must NEVER block dragging */
    pointer-events: none;
}