/* #mydiv { position: absolute; cursor: move; z-index: 10; background: coral; width: 30px; height: 30px; border: 1px solid #d3d3d3; } */ span.button > img { pointer-events: none; image-rendering: optimizeSpeed; /* STOP SMOOTHING, GIVE ME SPEED */ image-rendering: -moz-crisp-edges; /* Firefox */ image-rendering: -o-crisp-edges; /* Opera */ image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */ image-rendering: pixelated; /* Chrome */ -ms-interpolation-mode: nearest-neighbor; /* IE8+ */ width: 70px; height: 70px; transform: translate(0, 8px); border: 2px solid darkgray; border-radius: 4px; background: lightgray; } span.button { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; display: inline-block; background: tan; width:90px; height:90px; margin: 5px 5px 5px 5px; vertical-align: middle; border-radius: 3px; white-space: normal; align-items: center; cursor: pointer; } span.button:hover { background: gray; } .canvas1{ z-index: 0; } .canvas3 { z-index: 2; } .canvasStack { /* top: 50px; */ background: darkslategray; } #wrapper { /* display: flex; */ /* justify-content: right; */ /* left: 50%; */ /* transform: translate(-50%, 0); */ /* position: absolute; */ background: khaki; width: 750px; height: 750px; } #wrapwrap { display: block; margin: 0 auto; margin-left: auto; margin-right: auto; } main { margin-left: auto; margin-right: auto; } canvas { -webkit-user-select: none; /* Chrome all / Safari all */ -moz-user-select: none; /* Firefox all */ -ms-user-select: none; /* IE 10+ */ -o-user-select: none; user-select: none; image-rendering: -moz-crisp-edges; image-rendering: -webkit-crisp-edges; image-rendering: pixelated; image-rendering: crisp-edges; } .hidden { display: none; } body { text-align: center; background-color: #2c2f33; color: white; font-variant: normal; font-family: verdana; } h1 { font-size: 25pt; } h2 { font-size: 20pt; } p{ /* font-size: 12pt; */ /* text-align: left; */ margin: 0; } h4 { font-size: 12pt; padding: 0; margin: 0; }