body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background-color: deepskyblue;
    position: relative;
}

/* =========================
   GRID BOXES
========================= */

.puzzle-grid-drop {
    position: absolute;
    width: 200px;
    height: 200px;
}

/* ---------- ROW 1 ---------- */

#grid1-1 { left: 0px; top: 0px; }
#grid1-2 { left: 200px; top: 0px; }
#grid1-3 { left: 400px; top: 0px; }

/* ---------- ROW 2 ---------- */

#grid1-4 { left: 0px; top: 200px; }
#grid1-5 { left: 200px; top: 200px; }
#grid1-6 { left: 400px; top: 200px; }

/* ---------- ROW 3 ---------- */

#grid1-7 { left: 0px; top: 400px; }
#grid1-8 { left: 200px; top: 400px; }
#grid1-9 { left: 400px; top: 400px; }


/* =========================
   DRAGGABLE IMAGES (ALL FIXED)
========================= */

#img1-1-draggable,
#img1-2-draggable,
#img1-3-draggable,
#img1-4-draggable,
#img1-5-draggable,
#img1-6-draggable,
#img1-7-draggable,
#img1-8-draggable,
#img1-9-draggable,
#img2-1-draggable,
#img2-2-draggable,
#img2-3-draggable,
#img3-1-draggable,
#img3-2-draggable,
#img3-3-draggable {
    position: absolute;
    width: 200px;
    height: 200px;
    cursor: grab;
}

/* ---------- RANDOM POSITIONS ---------- */

/* IMG1 */
#img1-1-draggable { right: 450px; top: 80px; }
#img1-2-draggable { right: 250px; top: 50px; }
#img1-3-draggable { right: 80px; top: 180px; }
#img1-4-draggable { right: 500px; top: 300px; }
#img1-5-draggable { right: 300px; top: 250px; }
#img1-6-draggable { right: 120px; top: 380px; }
#img1-7-draggable { right: 420px; top: 500px; }
#img1-8-draggable { right: 220px; top: 520px; }
#img1-9-draggable { right: 20px; top: 520px; }

/* IMG2 */
#img2-1-draggable { right: 500px; top: 300px; }
#img2-2-draggable { right: 300px; top: 250px; }
#img2-3-draggable { right: 120px; top: 380px; }

/* IMG3 */
#img3-1-draggable { right: 420px; top: 500px; }
#img3-2-draggable { right: 220px; top: 520px; }
#img3-3-draggable { right: 20px; top: 520px; }