From b349adafe983aea2159253ffe94c5c13f333a6d3 Mon Sep 17 00:00:00 2001
From: Adele de Saint Guilhem <dsg.adele@gmail.com>
Date: Mon, 15 Apr 2024 14:24:39 +0100
Subject: [PATCH] added third puzzle, done css, still figuring out user
 correction

---
 index.html      |    2 +-
 interactive1.js |   54 +-
 interactive2.js |   42 +-
 interactive3.js |  184 ++++-
 style.css       | 1782 +++++++++++++++++++++++++++++++++++++----------
 5 files changed, 1619 insertions(+), 445 deletions(-)

diff --git a/index.html b/index.html
index 8a90c17..3968f5b 100644
--- a/index.html
+++ b/index.html
@@ -14,7 +14,7 @@
         </header>
         <main>
             <section>
-                <h1>Pick a jigsaw to complete!</h1>
+                <h1>Pick a jigsaw to complete</h1>
                 <ul id = "buttons">
                     <li><a href="puzzle1.html" id="puzzle1" class="button">Puzzle 1 (Easy)</a></li>
                     <li><a href="puzzle2.html" id="puzzle2" class="button">Puzzle 2 (Medium)</a></li>
diff --git a/interactive1.js b/interactive1.js
index f424454..a9b2c36 100644
--- a/interactive1.js
+++ b/interactive1.js
@@ -3,17 +3,17 @@
 // I. Dynamically creating 4 div (box for the pieces) within my Puzzle container and then the img element within each div.
 let puzzleContainer = document.getElementById("puzzle-container");
 
-function creatingGrid() {
+function creatingGrid() { //2*2 puzzle
     let rows = 2;
     let columns = 2;
 
-    for(let i=0; i<rows*columns; i++){
-        let pieceDiv = document.createElement('div')
-        pieceDiv.className = "piece";
+    for(let i=0; i<rows*columns; i++){ //creating 4divs and 4img
+        let pieceDiv = document.createElement('div') // dreating div element
+        pieceDiv.className = "piece"; //class name added
         puzzleContainer.appendChild(pieceDiv); //dynamically created 4 divs with class name and nested them in puzzlecontainer.
-        let img = document.createElement("img");
-        img.className = "images";
-        img.id = `img${i}`;
+        let img = document.createElement("img"); //creating img element
+        img.className = "images"; //class name added
+        img.id = `img${i}`; //unique ids
         img.setAttribute("draggable", "true"); // https://medium.com/@tatismolin/how-to-implement-drag-and-drop-functionality-using-vanilla-javascript-9ddfe2402695 
         pieceDiv.appendChild(img); //dynamically created 4  with individual id elements and nested them in the divs above.
     }
@@ -40,23 +40,23 @@ document.addEventListener('DOMContentLoaded', function () { // Assuring page is
     let resetButton = document.getElementById('reset');
 
     // Event listener for the start button
-    let drop0 = document.getElementById("drop-0");
-    let drop3 = document.getElementById("drop-3");
 
     startButton.addEventListener('click', function(e){
         startButton.style.display = 'none'; // Hiding the start button
         resetButton.style.display = 'flex'; // Showing the reset button
-        drop0.style.borderBottom = "1px solid black"; //Adding borders to some of the dropZone divs when start is clicked to give user indications of the pieces' places
-        drop0.style.borderRight = "1px solid black";
-        drop3.style.borderTop = "1px solid black";
-        drop3.style.borderLeft = "1px solid black";
+
+        Array.from(dropZone).forEach(function(zone){ //adding borders to div to indicate users where to put the pieces
+            zone.style.border = "1px solid black";
+       });
+
         let pieces = document.getElementsByClassName("piece");
         let element = e.target; //moving pieces (div which include their nested img) currently in Puzzle container to Piece container on click event for start button.
         e.preventDefault();
-        Array.from(pieces).forEach(function(piece){ //Iterating through my piece divs (DOM interprets it as an array)
+
+        Array.from(pieces).forEach(function(piece){ //Iterating through my piece divs (DOM understand class name as an array of all the element with that class)
             let leftPosition = Math.floor(Math.random()*50); //giving them random position (iterated through numbers for the multiplier to make sure that the piece where relatively contained within the piece container.
             let topPosition = Math.floor(Math.random()*50);
-            piece.style.position = "absolute";
+            piece.style.position = "absolute"; // https://www.youtube.com/watch?v=sp6Di21WVjE&t=0s&ab_channel=CryptersInfotech
             piece.style.left = `${leftPosition}%`;
             piece.style.top = `${topPosition}%`
             pieceContainer.appendChild(piece);
@@ -74,7 +74,7 @@ document.addEventListener('DOMContentLoaded', function () { // Assuring page is
 
 
 //III. After adding the event, I realised that I needed to create new divs that will remain in the puzzle container so I can later drop the divs that have the nested img in them.
-function creatingDropZones() { 
+function creatingDropZones() { //2*2 puzzle
     let rows = 2;
     let columns = 2;
 
@@ -107,10 +107,9 @@ Array.from(pieceDiv).forEach(function(pieceDiv, i){
 /*Process explained:
 After programming drag and drop, I realised that it does not work for touch input, only mouse input. 
 Instead I need to use touch start, move and end. As such, to make my code as clear as possible, I have created 3 functions below. 
-Since event listeners can take 2 parameters, I am creating two events listeners. 
-Each take either drag or touch event as a firt parameter along with calling the appropriate function that will handle their common logic and account for their differences.*/
+Since event listeners can take 2 parameters, I am creating three functions. 
+Each take either drag/drop/move or touch event as a firt parameter along with calling the appropriate function that will handle their common logic and account for their differences.*/
 let draggableImages = document.getElementsByClassName("images");
-let piece = document.getElementsByClassName("piece");
 var globalDraggedItemId = null; // set data and get data are methods that do not exist for touch events. Creating global variable to maintain state.
 
 function handleStart(e) {
@@ -137,6 +136,7 @@ function handleOverMove(e){
 function handleDropEnd(e) { //modify this function with some sort of if statement so that no bug with touch event. (what is hapenign is that the img are otherwise already nested in a drop and cant be moved to drop zones)
     e.preventDefault();
     e.stopPropagation();
+
     let draggedItem;
     if (e.type === 'drop') {
         let data = e.dataTransfer.getData("text/plain"); //retrieving id and moving it the div to target. 
@@ -165,19 +165,6 @@ Array.from(dropZone).forEach(function(zone){
     zone.addEventListener('touchend', handleDropEnd);
 });
 
- //This works for drag but for touch, I need to do some sort of if else statement so the browser detects the correct dropzones/original.
- /*Array.from(piece).forEach(function(pieces){ 
-    if (pieces.querySelector('img') === null){
-        console.log(pieces);
-        pieces.addEventListener('dragover', handleOverMove);
-        pieces.addEventListener('touchmove', handleOverMove);
-        pieces.addEventListener('drop', handleDropEnd);
-        pieces.addEventListener('touchend', handleDropEnd);
-    } 
-});
-*/
-
-
 // V. Finish message
 let correctPosition = { // creating an object using individual ids created earlier.
     img0: "drop-0",
@@ -210,6 +197,9 @@ function checkPosition() {
             alert("You are almost there! But some pieces are in the wrong place.");
         }, 500); // Delay to allow for the puzzle to be visually completed before showing the message
     } else if (allPlaced && allCorrect) { // All pieces are placed correctly
+        Array.from(dropZone).forEach(function(drop){ //purely aesthetics considerations, otherwise, we would see the borders
+            drop.style.border = "none";
+        })
         setTimeout(() => {
             alert("Congratulations! You completed the puzzle.");
         }, 500);
diff --git a/interactive2.js b/interactive2.js
index 5abb6c1..83a3223 100644
--- a/interactive2.js
+++ b/interactive2.js
@@ -1,6 +1,8 @@
+// 3*3 puzzle grid
+
 let puzzleContainer = document.getElementById("puzzle-container");
 
-function creatingGrid() {
+function creatingGrid() { //3*3 puzzle
     let rows = 3;
     let columns = 3;
 
@@ -17,6 +19,8 @@ function creatingGrid() {
 }
 creatingGrid();
 
+//Adding images
+
 let img0 = document.getElementById("image0");
 img0.src = "puzzle2/Piece1.png"; 
 
@@ -44,6 +48,8 @@ img7.src = "puzzle2/Piece8.png";
 let img8 = document.getElementById("image8");
 img8.src = "puzzle2/Piece9.png"; 
 
+//Adding drop zones and unique Ids to all divs 
+
 function creatingDropZones() { 
     let rows = 3;
     let columns = 3;
@@ -68,33 +74,25 @@ Array.from(pieceDiv).forEach(function(pieceDiv, i){
     pieceDiv.id = `dragging-${i}`;
 });
 
+//Start and Reset Button
 let pieceContainer = document.getElementById("piece-container");
 
 document.addEventListener('DOMContentLoaded', function () {
     let startButton = document.getElementById('start');
     let resetButton = document.getElementById('reset');
 
-    let drop0 = document.getElementById("droping-0");
-    let drop2 = document.getElementById("droping-2");
-    let drop4 = document.getElementById("droping-4");
-    let drop6 = document.getElementById("droping-6");
-    let drop8 = document.getElementById("droping-8");
-
     startButton.addEventListener('click', function(e){
         startButton.style.display = 'none';
         resetButton.style.display = 'flex'; 
-        drop0.style.borderBottom = "1px solid black"; 
-        drop0.style.borderRight = "1px solid black";
-        drop2.style.borderBottom = "1px solid black";
-        drop2.style.borderLeft = "1px solid black";
-        drop4.style.border = "1px solid black";
-        drop6.style.borderTop = "1px solid black";
-        drop6.style.borderRight = "1px solid black";
-        drop8.style.borderTop = "1px solid black";
-        drop8.style.borderLeft = "1px solid black";
+       
+        Array.from(dropZone).forEach(function(zone){
+            zone.style.border = "1px solid black";
+       });
+
         let pieces = document.getElementsByClassName("piece2");
         let element = e.target; 
         e.preventDefault();
+
         Array.from(pieces).forEach(function(piece){ 
             let leftPosition = Math.floor(Math.random()*60);
             let topPosition = Math.floor(Math.random()*60);
@@ -113,9 +111,9 @@ document.addEventListener('DOMContentLoaded', function () {
     });
 });
 
+//Drag/touch events
 
 let draggableImages = document.getElementsByClassName("images");
-//let originalPlace = document.getElementsByClassName("piece2");
 var globalDraggedItemId = null;
 
 function handleStart(e) {
@@ -169,16 +167,8 @@ Array.from(dropZone).forEach(function(zone){
     zone.addEventListener('touchend', handleDropEnd);
 });
 
- /*This works for drag but for touch, I need to do some sort of if else statement so the browser detects the correct dropzones/original.
- Array.from(originalPlace).forEach(function(place){ 
-    place.addEventListener('dragover', handleOverMove);
-    place.addEventListener('touchmove', handleOverMove);
-    place.addEventListener('drop', handleDropEnd);
-    place.addEventListener('touchend', handleDropEnd);
-});
-*/
-
 
+//Alert message when puzzle completed
 let correctPosition = {
     image0: "droping-0",
     image1: "droping-1",
diff --git a/interactive3.js b/interactive3.js
index a8f794d..ed56071 100644
--- a/interactive3.js
+++ b/interactive3.js
@@ -1,22 +1,26 @@
+// 4*4 puzzle grid
+
 let puzzleContainer = document.getElementById("puzzle-container");
 
-function creatingGrid() {
+function creatingGrid() { //4*4 puzzle
     let rows = 4;
     let columns = 4;
 
     for(let i=0; i<rows*columns; i++){
         let pieceDiv = document.createElement('div')
         pieceDiv.className = "piece3";
-        puzzleContainer.appendChild(pieceDiv); //dynamically created 4 divs with class name and nested them in puzzlecontainer.
+        puzzleContainer.appendChild(pieceDiv); 
         let img = document.createElement("img");
         img.className = "images";
         img.id = `images${i}`;
-        img.setAttribute("draggable", "true"); // https://medium.com/@tatismolin/how-to-implement-drag-and-drop-functionality-using-vanilla-javascript-9ddfe2402695 
-        pieceDiv.appendChild(img); //dynamically created 4  with individual id elements and nested them in the divs above.
+        img.setAttribute("draggable", "true"); 
+        pieceDiv.appendChild(img); 
     }
 }
 creatingGrid();
 
+//Adding images
+
 let img0 = document.getElementById("images0");
 img0.src = "puzzle3/piece1.png"; 
 
@@ -64,3 +68,175 @@ img14.src = "puzzle3/piece15.png";
 
 let img15 = document.getElementById("images15");
 img15.src = "puzzle3/piece16.png"; 
+
+//Adding drop zones and unique Ids to all divs 
+
+function creatingDropZones() { 
+    let rows = 4;
+    let columns = 4;
+
+    for(let i=0; i<rows*columns; i++){
+        let dropZone = document.createElement('div')
+        dropZone.className = "drop-zone3";
+        puzzleContainer.appendChild(dropZone);
+    }
+}
+creatingDropZones();
+
+let dropZone = document.getElementsByClassName("drop-zone3");
+
+Array.from(dropZone).forEach(function(dropZone, i){
+    dropZone.id = `zone-${i}`; 
+});
+
+let pieceDiv = document.getElementsByClassName("piece3");
+
+Array.from(pieceDiv).forEach(function(pieceDiv, i){
+    pieceDiv.id = `dragzone-${i}`;
+});
+
+//Start and Reset Button
+let pieceContainer = document.getElementById("piece-container");
+
+document.addEventListener('DOMContentLoaded', function () { 
+    let startButton = document.getElementById('start');
+    let resetButton = document.getElementById('reset');
+
+    startButton.addEventListener('click', function(e){
+        startButton.style.display = 'none';
+        resetButton.style.display = 'flex'; 
+
+       Array.from(dropZone).forEach(function(zone){
+            zone.style.border = "1px solid black";
+       });
+
+        let pieces = document.getElementsByClassName("piece3");
+        let element = e.target; 
+        e.preventDefault();
+        
+        Array.from(pieces).forEach(function(piece){
+            let leftPosition = Math.floor(Math.random()*50);
+            let topPosition = Math.floor(Math.random()*50);
+            piece.style.position = "absolute"; 
+            piece.style.left = `${leftPosition}%`;
+            piece.style.top = `${topPosition}%`
+            pieceContainer.appendChild(piece);
+        });
+    });
+
+    resetButton.addEventListener('click', function(e) {
+        resetButton.style.display = 'none'; 
+        startButton.style.display = 'flex';
+        let element = e.target;
+        window.location.reload(); 
+    });
+});
+
+//Drag/touch events
+
+let draggableImages = document.getElementsByClassName("images");
+var globalDraggedItemId = null;
+
+function handleStart(e) {
+    e.stopPropagation();
+    if (e.type === 'dragstart') {
+        console.log(e);
+        e.dataTransfer.setData('text/plain', e.currentTarget.id); 
+    } 
+    if (e.type === 'touchstart') { 
+        e.preventDefault();
+    }
+    globalDraggedItemId = e.currentTarget.id; 
+}
+
+function handleOverMove(e){ 
+    e.preventDefault();
+    e.stopPropagation();
+    let draggedImage = e.currentTarget;
+    draggedImage.style.zIndex = 1000;  
+    let originalContainer = draggedImage.parentElement;
+    originalContainer.style.zIndex = 1; 
+}
+
+function handleDropEnd(e) { 
+    e.preventDefault();
+    e.stopPropagation(); 
+    let draggedItem;
+    if (e.type === 'drop') {
+        let data = e.dataTransfer.getData("text/plain");
+        draggedItem = document.getElementById(data); 
+    } else if (e.type === 'touchend') {
+        draggedItem = document.getElementById(globalDraggedItemId); 
+    }
+    if (draggedItem) {
+        e.currentTarget.appendChild(draggedItem);
+        globalDraggedItemId = null;
+    }
+
+    checkPosition();
+}
+
+Array.from(draggableImages).forEach(function(image){
+    image.addEventListener('dragstart', handleStart);
+    image.addEventListener('touchstart', handleStart);
+});
+
+Array.from(dropZone).forEach(function(zone){ 
+    zone.addEventListener('dragover', handleOverMove);
+    zone.addEventListener('touchmove', handleOverMove);
+    zone.addEventListener('drop', handleDropEnd);
+    zone.addEventListener('touchend', handleDropEnd);
+});
+
+//Alert message when puzzle completed
+let correctPosition = {
+    images0: "zone-0",
+    images1: "zone-1",
+    images2: "zone-2",
+    images3: "zone-3",
+    images4: "zone-4",
+    images5: "zone-5",
+    images6: "zone-6",
+    images7: "zone-7",
+    images8: "zone-8",
+    images9: "zone-9",
+    images10: "zone-10",
+    images11: "zone-11",
+    images12: "zone-12",
+    images13: "zone-13",
+    images14: "zone-14",
+    images15: "zone-15",
+};
+
+function checkPosition() {
+    let allPlaced = true;
+    let allCorrect = true;
+
+    for (let [imgId, dropId] of Object.entries(correctPosition)) {
+        let image = document.getElementById(imgId);
+        let currentDrop = image.parentElement.id;
+
+       if (!image.parentElement || !image.parentElement.classList.contains('drop-zone3')) {
+        allPlaced = false;
+        }
+
+        if (currentDrop !== dropId) {
+        allCorrect = false;
+        }
+    }
+
+    if (allPlaced && !allCorrect) {
+        setTimeout(() => {
+            alert("You are almost there! But some pieces are in the wrong place.");
+        }, 500);
+    } else if (allPlaced && allCorrect) {
+        Array.from(dropZone).forEach(function(drop){ //purely aesthetics considerations, otherwise, we would see the borders
+            drop.style.border = "none";
+        })
+        setTimeout(() => {
+            alert("Congratulations! You completed the puzzle.");
+        }, 500);
+    }
+
+    return true;
+}
\ No newline at end of file
diff --git a/style.css b/style.css
index 48a143c..67ac263 100644
--- a/style.css
+++ b/style.css
@@ -12,13 +12,16 @@ body, main {
     display: flex;
     align-items: center; /* Centered children horizontally */
     justify-content: space-around;
-    background-color: gainsboro;
+    background-color: silver;
 }
 
-
 h1 {
     display: flex;
     justify-content: center;
+    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
+    font-size: 2rem;
+    margin-bottom: 2%;
+    color: #333;
 }
 
 .button{
@@ -48,12 +51,10 @@ h1 {
     background-color: #4682B4;
 }
 
-
 #buttons {
     display: flex;
     justify-content: center;
     list-style-type: none;
-    font-size: 16px;
     gap: 2px;
 }
 
@@ -85,9 +86,19 @@ h1 {
     background-color: #D8BFD8;
 }
 
+.button:hover, .button:focus {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 8px rgba(0,0,0,0.2); 
+}
+
+button:hover, button:focus {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
+} 
+
 @media (max-width: 767px) and (orientation: portrait) { /*Orientation property: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/orientation*/
     
-#containers{
+#containers{ /*All puzzles*/
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -96,10 +107,9 @@ h1 {
     height: 80vh;
     border-radius: 20px;
     gap: 2vh; 
-    aspect-ratio: 1 / 1; 
 }
 
-#piece-container{
+#piece-container{ /*All puzzles*/
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
@@ -109,7 +119,7 @@ h1 {
     position: relative;
 }
 
-#puzzle-container{
+#puzzle-container{ /*All puzzles*/
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
@@ -119,7 +129,7 @@ h1 {
     position: relative; 
 }
 
-.piece{
+.piece{ /*Puzzle 1*/
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
@@ -127,15 +137,24 @@ h1 {
     height: 50%;
 }
 
-.piece2{
+.piece2{ /*Puzzle 2*/
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
-    width: 33%;
-    height: 33%;
+    width: 33.33%;
+    height: 33.33%;
 }
 
-.drop-zone{
+.piece3{ /*Puzzle 3*/
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    width: 25%;
+    height: 25%;
+}
+
+
+.drop-zone{ /*Puzzle 1*/
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
@@ -143,22 +162,29 @@ h1 {
     height: 50%;
 }
 
-.drop-zone2{
+.drop-zone2{ /*Puzzle 2*/
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    width: 33.33%;
+    height: 33.33%;
+}
+
+.drop-zone3{ /*Puzzle 3*/
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
-    width: 33%;
-    height: 33%;
+    width: 25%;
+    height: 25%;
 }
 
+/*Puzzle 1*/
 #img0{
     position: relative;
     width: 100%;
     height: 120%; 
     z-index: 2;
 }
-
-
 #img1{
     position: relative;
     width: 117%;
@@ -166,14 +192,12 @@ h1 {
     left: -17%;
     z-index: 2;
 }
-
 #img2{
     position: relative;
     width: 116.5%;
     height: 100%;
     z-index: 2;
 }
-
 #img3{
     position: relative;
     top: -16%;
@@ -183,13 +207,13 @@ h1 {
     z-index: 2;
 }
 
+/*Puzzle 2*/
 #image0 {
     position: relative;
     width: 116%;
     height: 115%;
     z-index: 2;
 }
-
 #image1 {
     position: relative;
     width: 116%;
@@ -197,15 +221,13 @@ h1 {
     left: -4%;
     z-index: 2;
 }
-
 #image2{
     position: relative;
     width: 116%;
     height: 115%;
-    left: -13%;
+    left: -16%;
     z-index: 2;
 }
-
 #image3{
     position: relative;
     width: 116%;
@@ -213,7 +235,6 @@ h1 {
     bottom: 2%;
     z-index: 2;
 }
-
 #image4{
     position: relative;
     width: 110%;
@@ -222,41 +243,156 @@ h1 {
     left: -4%;
     z-index: 2;
 }
-
-
 #image5{
     position: relative;
     width: 116%;
     height: 110%;
     bottom: 2%;
-    left: -13%;
+    left: -16%;
     z-index: 2;
 }
-
 #image6{
     position: relative;
     width: 116%;
     height: 110%;
-    bottom: 9%;
+    bottom: 10%;
     z-index: 2;
 }
-
 #image7{
     position: relative;
     width: 110%;
     height: 109%;
-    bottom: 8%;
+    bottom: 9%;
     left: -3%;
     z-index: 2;
 }
-
 #image8{
     position: relative;
     width: 116%;
     height: 110%;
-    left: -13%;
+    left: -16%;
+    bottom: 10%;
+    z-index: 2;
+}
+
+/*Puzzle 3*/
+#images0{
+    position: relative;
+    width: 105%;
+    height: 109%;
+    z-index: 2;
+}
+#images1{
+    position: relative;
+    width: 118%;
+    height: 110%;
+    left: -15%;
+    z-index: 2;
+}
+#images2{
+    position: relative;
+    width: 129%;
+    height: 110%;
+    left: -15%;
+    z-index: 2;
+}
+#images3{
+    position: relative;
+    width: 104%;
+    height: 125%;
+    left: -4%;
+    z-index: 2;
+}
+#images4{
+    position: relative;
+    width: 121%;
+    height: 137%;
+    z-index: 2;
+    bottom: 12%;
+}
+#images5{
+    position: relative;
+    width: 100%;
+    height: 120%;
+    z-index: 2;
+    bottom: 11%;
+    left: 1%;
+}
+#images6{
+    position: relative;
+    width: 135%;
+    height: 137%;
+    left: -21%;
+    bottom: 11%;
+    z-index: 2;
+}
+#images7{
+    position: relative;
+    width: 105%;
+    height: 100%;
+    z-index: 2;
+    bottom: -6%;
+    left: -5%;
+}
+#images8{
+    position: relative;
+    width: 125%;
+    height: 112%;
+    bottom: -7%;
+    z-index: 2;
+}
+#images9{
+    position: relative;
+    width: 115%;
+    height: 110%;
     bottom: 9%;
+    left: 1%;
+    z-index: 2;
+}
+#images10{
+    position: relative;
+    width: 119%;
+    height: 96%;
+    left: -5%;
+    bottom: -6%;
+    z-index: 2;
+}
+#images11{
+    position: relative;
+    width: 107%;
+    height: 125%;
+    left: -7%;
+    bottom: 10%;
+    z-index: 2;
+}
+#images12{
+    position: relative;
+    width: 105%;
+    height: 100%;
+    z-index: 2;
+}
+#images13{
+    position: relative;
+    width: 130%;
+    height: 118%;
+    bottom: 18%;
+    left: -15%;
+    z-index: 2;
+}
+#images14{
+    position: relative;
+    width: 120%;
+    height: 118%;
+    z-index: 2;
+    bottom: 18%;
+    left: -5%;
+}
+#images15{
+    position: relative;
+    width: 105%;
+    height: 100%;
     z-index: 2;
+    left: -5%;
 }
 
 }
@@ -294,7 +430,7 @@ h1 {
     margin-top: 5%;
 }
 
-.piece{
+.piece{ /*Puzzle 1*/
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
@@ -302,12 +438,20 @@ h1 {
     height: 50%;
 }
 
-.piece2{
+.piece2{ /*Puzzle 2*/
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    width: 33.33%;
+    height: 33.33%;
+}
+
+.piece3{ /*Puzzle 3*/
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
-    width: 33%;
-    height: 33%;
+    width: 25%;
+    height: 25%;
 }
 
 .drop-zone{
@@ -322,17 +466,25 @@ h1 {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
-    width: 33%;
-    height: 33%;
+    width: 33.33%;
+    height: 33.33%;
+}
+
+.drop-zone3{ /*Puzzle 3*/
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    width: 25%;
+    height: 25%;
 }
 
+/*Puzzle 1*/
 #img0{
     position: relative;
     width: 100%;
     height: 120%; 
     z-index: 2;
 }
-
 #img1{
     position: relative;
     width: 117%;
@@ -340,14 +492,12 @@ h1 {
     left: -17%;
     z-index: 2;
 }
-
 #img2{
     position: relative;
     width: 116.5%;
     height: 100%;
     z-index: 2;
 }
-
 #img3{
     position: relative;
     top: -16%;
@@ -357,13 +507,13 @@ h1 {
     z-index: 2;
 }
 
+/*Puzzle 2*/
 #image0 {
     position: relative;
     width: 116%;
     height: 115%;
     z-index: 2;
 }
-
 #image1 {
     position: relative;
     width: 116%;
@@ -371,15 +521,13 @@ h1 {
     left: -4%;
     z-index: 2;
 }
-
 #image2{
     position: relative;
     width: 116%;
     height: 115%;
-    left: -13%;
+    left: -16%;
     z-index: 2;
 }
-
 #image3{
     position: relative;
     width: 116%;
@@ -387,7 +535,6 @@ h1 {
     bottom: 2%;
     z-index: 2;
 }
-
 #image4{
     position: relative;
     width: 110%;
@@ -396,43 +543,159 @@ h1 {
     left: -4%;
     z-index: 2;
 }
-
-
 #image5{
     position: relative;
     width: 116%;
     height: 110%;
     bottom: 2%;
-    left: -13%;
+    left: -16%;
     z-index: 2;
 }
-
 #image6{
     position: relative;
     width: 116%;
     height: 110%;
-    bottom: 9%;
+    bottom: 10%;
     z-index: 2;
 }
-
 #image7{
     position: relative;
     width: 110%;
     height: 109%;
-    bottom: 8%;
+    bottom: 9%;
     left: -3%;
     z-index: 2;
 }
-
 #image8{
     position: relative;
     width: 116%;
     height: 110%;
-    left: -13%;
+    left: -16%;
+    bottom: 10%;
+    z-index: 2;
+}
+
+/*Puzzle 3*/
+#images0{
+    position: relative;
+    width: 105%;
+    height: 109%;
+    z-index: 2;
+}
+#images1{
+    position: relative;
+    width: 118%;
+    height: 110%;
+    left: -15%;
+    z-index: 2;
+}
+#images2{
+    position: relative;
+    width: 129%;
+    height: 110%;
+    left: -15%;
+    z-index: 2;
+}
+#images3{
+    position: relative;
+    width: 104%;
+    height: 125%;
+    left: -4%;
+    z-index: 2;
+}
+#images4{
+    position: relative;
+    width: 121%;
+    height: 137%;
+    z-index: 2;
+    bottom: 12%;
+}
+#images5{
+    position: relative;
+    width: 100%;
+    height: 120%;
+    z-index: 2;
+    bottom: 11%;
+    left: 1%;
+}
+#images6{
+    position: relative;
+    width: 135%;
+    height: 137%;
+    left: -21%;
+    bottom: 11%;
+    z-index: 2;
+}
+#images7{
+    position: relative;
+    width: 105%;
+    height: 100%;
+    z-index: 2;
+    bottom: -6%;
+    left: -5%;
+}
+#images8{
+    position: relative;
+    width: 125%;
+    height: 112%;
+    bottom: -7%;
+    z-index: 2;
+}
+#images9{
+    position: relative;
+    width: 115%;
+    height: 110%;
     bottom: 9%;
+    left: 1%;
+    z-index: 2;
+}
+#images10{
+    position: relative;
+    width: 119%;
+    height: 96%;
+    left: -5%;
+    bottom: -6%;
+    z-index: 2;
+}
+#images11{
+    position: relative;
+    width: 107%;
+    height: 125%;
+    left: -7%;
+    bottom: 10%;
+    z-index: 2;
+}
+#images12{
+    position: relative;
+    width: 105%;
+    height: 100%;
+    z-index: 2;
+}
+#images13{
+    position: relative;
+    width: 130%;
+    height: 118%;
+    bottom: 18%;
+    left: -15%;
+    z-index: 2;
+}
+#images14{
+    position: relative;
+    width: 120%;
+    height: 118%;
+    z-index: 2;
+    bottom: 18%;
+    left: -5%;
+}
+#images15{
+    position: relative;
+    width: 105%;
+    height: 100%;
     z-index: 2;
+    left: -5%;
 }
 
+
 }
 
 @media only screen and (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {
@@ -480,11 +743,19 @@ h1 {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
-    width: 33%;
-    height: 33%;
+    width: 33.33%;
+    height: 33.33%;
 }
 
-.drop-zone{
+.piece3{ /*Puzzle 3*/
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    width: 25%;
+    height: 25%;
+}
+
+.drop-zone{ /*Puzzle 1*/
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
@@ -492,21 +763,29 @@ h1 {
     height: 50%;
 }
 
-.drop-zone2{
+.drop-zone2{ /*Puzzle 2*/
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    width: 33.33%;
+    height: 33.33%;
+}
+
+.drop-zone3{ /*Puzzle 3*/
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
-    width: 33%;
-    height: 33%;
+    width: 25%;
+    height: 25%;
 }
 
+/*Puzzle 1*/
 #img0{
     position: relative;
     width: 100%;
     height: 120%; /* Increased height to overlap */
     z-index: 2;
 }
-
 #img1{
     position: relative;
     width: 117%;
@@ -514,14 +793,12 @@ h1 {
     left: -17%;
     z-index: 2;
 }
-
 #img2{
     position: relative;
     width: 116.5%;
     height: 100%;
     z-index: 2;
 }
-
 #img3{
     position: relative;
     top: -16%;
@@ -530,14 +807,13 @@ h1 {
     left: -1%;
     z-index: 2;
 }
-
+/*Puzzle 2*/
 #image0 {
     position: relative;
     width: 116%;
     height: 115%;
     z-index: 2;
 }
-
 #image1 {
     position: relative;
     width: 116%;
@@ -545,15 +821,13 @@ h1 {
     left: -4%;
     z-index: 2;
 }
-
 #image2{
     position: relative;
     width: 116%;
     height: 115%;
-    left: -13%;
+    left: -16%;
     z-index: 2;
 }
-
 #image3{
     position: relative;
     width: 116%;
@@ -561,7 +835,6 @@ h1 {
     bottom: 2%;
     z-index: 2;
 }
-
 #image4{
     position: relative;
     width: 110%;
@@ -570,43 +843,159 @@ h1 {
     left: -4%;
     z-index: 2;
 }
-
-
 #image5{
     position: relative;
     width: 116%;
     height: 110%;
     bottom: 2%;
-    left: -13%;
+    left: -16%;
     z-index: 2;
 }
-
 #image6{
     position: relative;
     width: 116%;
     height: 110%;
-    bottom: 9%;
+    bottom: 10%;
     z-index: 2;
 }
-
 #image7{
     position: relative;
     width: 110%;
-    height: 108%;
-    bottom: 7%;
+    height: 109%;
+    bottom: 9%;
     left: -3%;
     z-index: 2;
 }
-
 #image8{
     position: relative;
     width: 116%;
     height: 110%;
-    left: -13%;
+    left: -16%;
+    bottom: 10%;
+    z-index: 2;
+}
+
+/*Puzzle 3*/
+#images0{
+    position: relative;
+    width: 105%;
+    height: 109%;
+    z-index: 2;
+}
+#images1{
+    position: relative;
+    width: 118%;
+    height: 110%;
+    left: -15%;
+    z-index: 2;
+}
+#images2{
+    position: relative;
+    width: 129%;
+    height: 110%;
+    left: -15%;
+    z-index: 2;
+}
+#images3{
+    position: relative;
+    width: 104%;
+    height: 125%;
+    left: -4%;
+    z-index: 2;
+}
+#images4{
+    position: relative;
+    width: 121%;
+    height: 137%;
+    z-index: 2;
+    bottom: 12%;
+}
+#images5{
+    position: relative;
+    width: 100%;
+    height: 120%;
+    z-index: 2;
+    bottom: 11%;
+    left: 1%;
+}
+#images6{
+    position: relative;
+    width: 135%;
+    height: 137%;
+    left: -21%;
+    bottom: 11%;
+    z-index: 2;
+}
+#images7{
+    position: relative;
+    width: 105%;
+    height: 100%;
+    z-index: 2;
+    bottom: -6%;
+    left: -5%;
+}
+#images8{
+    position: relative;
+    width: 125%;
+    height: 112%;
+    bottom: -7%;
+    z-index: 2;
+}
+#images9{
+    position: relative;
+    width: 115%;
+    height: 110%;
     bottom: 9%;
+    left: 1%;
+    z-index: 2;
+}
+#images10{
+    position: relative;
+    width: 119%;
+    height: 96%;
+    left: -5%;
+    bottom: -6%;
+    z-index: 2;
+}
+#images11{
+    position: relative;
+    width: 107%;
+    height: 125%;
+    left: -7%;
+    bottom: 10%;
+    z-index: 2;
+}
+#images12{
+    position: relative;
+    width: 105%;
+    height: 100%;
+    z-index: 2;
+}
+#images13{
+    position: relative;
+    width: 130%;
+    height: 118%;
+    bottom: 18%;
+    left: -15%;
+    z-index: 2;
+}
+#images14{
+    position: relative;
+    width: 120%;
+    height: 118%;
     z-index: 2;
+    bottom: 18%;
+    left: -5%;
+}
+#images15{
+    position: relative;
+    width: 105%;
+    height: 100%;
+    z-index: 2;
+    left: -5%;
 }
 
+
 }
 
 @media only screen and (min-width: 768px) and (max-width: 1023px) and (orientation: landscape) {
@@ -642,7 +1031,7 @@ h1 {
     margin-top: 5%;
 }
 
-.piece{
+.piece{ /*Puzzle 1*/
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
@@ -650,15 +1039,23 @@ h1 {
     height: 50%;
 }
 
-.piece2{
+.piece2{ /*Puzzle 2*/
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
-    width: 33%;
-    height: 33%;
+    width: 33.33%;
+    height: 33.33%;
 }
 
-.drop-zone{
+.piece3{ /*Puzzle 3*/
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    width: 25%;
+    height: 25%;
+}
+
+.drop-zone{ /*Puzzle 1*/
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
@@ -666,21 +1063,29 @@ h1 {
     height: 50%;
 }
 
-.drop-zone2{
+.drop-zone2{ /*Puzzle 2*/
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
-    width: 33%;
-    height: 33%;
+    width: 33.33%;
+    height: 33.33%;
 }
 
+.drop-zone3{ /*Puzzle 3*/
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    width: 25%;
+    height: 25%;
+}
+
+/*Puzzle 1*/
 #img0{
     position: relative;
     width: 100%;
     height: 120%;
     z-index: 2;
 }
-
 #img1{
     position: relative;
     width: 117%;
@@ -688,14 +1093,12 @@ h1 {
     left: -17%;
     z-index: 2;
 }
-
 #img2{
     position: relative;
     width: 116.5%;
     height: 100%;
     z-index: 2;
 }
-
 #img3{
     position: relative;
     top: -16%;
@@ -705,14 +1108,13 @@ h1 {
     z-index: 2;
 }
 
-
+/*Puzzle 2*/
 #image0 {
     position: relative;
     width: 116%;
     height: 115%;
     z-index: 2;
 }
-
 #image1 {
     position: relative;
     width: 116%;
@@ -720,15 +1122,13 @@ h1 {
     left: -4%;
     z-index: 2;
 }
-
 #image2{
     position: relative;
     width: 116%;
     height: 115%;
-    left: -13%;
+    left: -16%;
     z-index: 2;
 }
-
 #image3{
     position: relative;
     width: 116%;
@@ -736,7 +1136,6 @@ h1 {
     bottom: 2%;
     z-index: 2;
 }
-
 #image4{
     position: relative;
     width: 110%;
@@ -745,47 +1144,161 @@ h1 {
     left: -4%;
     z-index: 2;
 }
-
-
 #image5{
     position: relative;
     width: 116%;
     height: 110%;
     bottom: 2%;
-    left: -13%;
+    left: -16%;
     z-index: 2;
 }
-
 #image6{
     position: relative;
     width: 116%;
     height: 110%;
-    bottom: 9%;
+    bottom: 10%;
     z-index: 2;
 }
-
 #image7{
     position: relative;
     width: 110%;
-    height: 108%;
-    bottom: 7%;
-    left: -1%;
+    height: 109%;
+    bottom: 9%;
+    left: -3%;
     z-index: 2;
 }
-
 #image8{
     position: relative;
     width: 116%;
     height: 110%;
-    left: -13%;
-    bottom: 9%;
+    left: -16%;
+    bottom: 10%;
     z-index: 2;
 }
 
+/*Puzzle 3*/
+#images0{
+    position: relative;
+    width: 105%;
+    height: 109%;
+    z-index: 2;
+}
+#images1{
+    position: relative;
+    width: 118%;
+    height: 110%;
+    left: -15%;
+    z-index: 2;
+}
+#images2{
+    position: relative;
+    width: 129%;
+    height: 110%;
+    left: -15%;
+    z-index: 2;
+}
+#images3{
+    position: relative;
+    width: 104%;
+    height: 125%;
+    left: -4%;
+    z-index: 2;
+}
+#images4{
+    position: relative;
+    width: 121%;
+    height: 137%;
+    z-index: 2;
+    bottom: 12%;
+}
+#images5{
+    position: relative;
+    width: 100%;
+    height: 120%;
+    z-index: 2;
+    bottom: 11%;
+    left: 1%;
+}
+#images6{
+    position: relative;
+    width: 135%;
+    height: 137%;
+    left: -21%;
+    bottom: 11%;
+    z-index: 2;
+}
+#images7{
+    position: relative;
+    width: 105%;
+    height: 100%;
+    z-index: 2;
+    bottom: -6%;
+    left: -5%;
+}
+#images8{
+    position: relative;
+    width: 125%;
+    height: 112%;
+    bottom: -7%;
+    z-index: 2;
+}
+#images9{
+    position: relative;
+    width: 115%;
+    height: 110%;
+    bottom: 9%;
+    left: 1%;
+    z-index: 2;
+}
+#images10{
+    position: relative;
+    width: 119%;
+    height: 96%;
+    left: -5%;
+    bottom: -6%;
+    z-index: 2;
+}
+#images11{
+    position: relative;
+    width: 110%;
+    height: 125%;
+    left: -3%;
+    bottom: 10%;
+    z-index: 2;
+}
+#images12{
+    position: relative;
+    width: 105%;
+    height: 100%;
+    z-index: 2;
+}
+#images13{
+    position: relative;
+    width: 130%;
+    height: 118%;
+    bottom: 18%;
+    left: -15%;
+    z-index: 2;
+}
+#images14{
+    position: relative;
+    width: 120%;
+    height: 118%;
+    z-index: 2;
+    bottom: 18%;
+    left: -5%;
+}
+#images15{
+    position: relative;
+    width: 105%;
+    height: 100%;
+    z-index: 2;
+    left: -5%;
+}
 }
 
 @media only screen and (min-width: 1024px) and (orientation: portrait){
-    #containers{
+#containers{
     display: flex;
     flex-direction: row;
     justify-content: center;
@@ -818,7 +1331,7 @@ h1 {
     margin-top: 5%;
 }
 
-.piece{
+.piece{ /*Puzzle 1*/
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
@@ -826,15 +1339,23 @@ h1 {
     height: 50%;
 }
 
-.piece2{
+.piece2{ /*Puzzle 2*/
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
-    width: 33%;
-    height: 33%;
+    width: 33.33%;
+    height: 33.33%;
 }
 
-.drop-zone{
+.piece3{ /*Puzzle 3*/
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    width: 25%;
+    height: 25%;
+}
+
+.drop-zone{ /*Puzzle 1*/
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
@@ -842,21 +1363,29 @@ h1 {
     height: 50%;
 }
 
-.drop-zone2{
+.drop-zone2{ /*Puzzle 2*/
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    width: 33.33%;
+    height: 33.33%;
+}
+
+.drop-zone3{ /*Puzzle 3*/
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
-    width: 33%;
-    height: 33%;
+    width: 25%;
+    height: 25%;
 }
 
+/*Puzzle 1*/
 #img0{
     position: relative;
     width: 100%;
     height: 120%;
     z-index: 2;
 }
-
 #img1{
     position: relative;
     width: 117%;
@@ -864,14 +1393,12 @@ h1 {
     left: -17%;
     z-index: 2;
 }
-
 #img2{
     position: relative;
     width: 116.5%;
     height: 100%;
     z-index: 2;
 }
-
 #img3{
     position: relative;
     top: -16%;
@@ -881,13 +1408,13 @@ h1 {
     z-index: 2;
 }
 
+/*Puzzle 2*/
 #image0 {
     position: relative;
     width: 116%;
     height: 115%;
     z-index: 2;
 }
-
 #image1 {
     position: relative;
     width: 116%;
@@ -895,15 +1422,13 @@ h1 {
     left: -4%;
     z-index: 2;
 }
-
 #image2{
     position: relative;
     width: 116%;
     height: 115%;
-    left: -13%;
+    left: -16%;
     z-index: 2;
 }
-
 #image3{
     position: relative;
     width: 116%;
@@ -911,7 +1436,6 @@ h1 {
     bottom: 2%;
     z-index: 2;
 }
-
 #image4{
     position: relative;
     width: 110%;
@@ -920,64 +1444,179 @@ h1 {
     left: -4%;
     z-index: 2;
 }
-
 #image5{
     position: relative;
     width: 116%;
     height: 110%;
     bottom: 2%;
-    left: -13%;
+    left: -16%;
     z-index: 2;
 }
-
 #image6{
     position: relative;
     width: 116%;
     height: 110%;
-    bottom: 9%;
+    bottom: 10%;
     z-index: 2;
 }
-
 #image7{
     position: relative;
     width: 110%;
-    height: 108%;
-    bottom: 7%;
-    left: -1%;
+    height: 109%;
+    bottom: 9%;
+    left: -3%;
     z-index: 2;
 }
-
 #image8{
     position: relative;
     width: 116%;
     height: 110%;
-    left: -13%;
-    bottom: 9%;
+    left: -16%;
+    bottom: 10%;
     z-index: 2;
 }
 
+/*Puzzle 3*/
+#images0{
+    position: relative;
+    width: 105%;
+    height: 109%;
+    z-index: 2;
 }
-
-@media only screen and (min-width: 1024px) and (orientation: landscape){
-#containers{
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    width: 90vw;
-    height: 80vh;
-    border-radius: 20px;
-    gap: 2vh; 
-}
-
-#piece-container{
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    width: 50%;
-    height: calc(80% - 1vh); 
-    border: 1px solid black;
+#images1{
     position: relative;
-    margin-top: 5%;
+    width: 118%;
+    height: 110%;
+    left: -15%;
+    z-index: 2;
+}
+#images2{
+    position: relative;
+    width: 129%;
+    height: 110%;
+    left: -15%;
+    z-index: 2;
+}
+#images3{
+    position: relative;
+    width: 104%;
+    height: 125%;
+    left: -4%;
+    z-index: 2;
+}
+#images4{
+    position: relative;
+    width: 121%;
+    height: 137%;
+    z-index: 2;
+    bottom: 12%;
+}
+#images5{
+    position: relative;
+    width: 100%;
+    height: 120%;
+    z-index: 2;
+    bottom: 11%;
+    left: 1%;
+}
+#images6{
+    position: relative;
+    width: 135%;
+    height: 137%;
+    left: -21%;
+    bottom: 11%;
+    z-index: 2;
+}
+#images7{
+    position: relative;
+    width: 105%;
+    height: 100%;
+    z-index: 2;
+    bottom: -6%;
+    left: -5%;
+}
+#images8{
+    position: relative;
+    width: 125%;
+    height: 112%;
+    bottom: -7%;
+    z-index: 2;
+}
+#images9{
+    position: relative;
+    width: 115%;
+    height: 110%;
+    bottom: 9%;
+    left: 1%;
+    z-index: 2;
+}
+#images10{
+    position: relative;
+    width: 119%;
+    height: 96%;
+    left: -5%;
+    bottom: -6%;
+    z-index: 2;
+}
+#images11{
+    position: relative;
+    width: 111%;
+    height: 125%;
+    left: -11%;
+    bottom: 10%;
+    z-index: 2;
+}
+#images12{
+    position: relative;
+    width: 105%;
+    height: 100%;
+    z-index: 2;
+}
+#images13{
+    position: relative;
+    width: 130%;
+    height: 118%;
+    bottom: 18%;
+    left: -15%;
+    z-index: 2;
+}
+#images14{
+    position: relative;
+    width: 120%;
+    height: 118%;
+    z-index: 2;
+    bottom: 18%;
+    left: -5%;
+}
+#images15{
+    position: relative;
+    width: 105%;
+    height: 100%;
+    z-index: 2;
+    left: -5%;
+}
+}
+
+@media only screen and (min-width: 1024px) and (orientation: landscape){
+#containers{
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    width: 90vw;
+    height: 80vh;
+    border-radius: 20px;
+    gap: 2vh; 
+}
+
+#piece-container{
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    width: 50%;
+    height: calc(80% - 1vh); 
+    border: 1px solid black;
+    position: relative;
+    margin-top: 5%;
 }
 
 #puzzle-container{
@@ -991,7 +1630,7 @@ h1 {
     margin-top: 5%;
 }
 
-.piece{
+.piece{ /*Puzzle 1*/
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
@@ -999,15 +1638,23 @@ h1 {
     height: 50%;
 }
 
-.piece2{
+.piece2{ /*Puzzle 2*/
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
-    width: 33%;
-    height: 33%;
+    width: 33.33%;
+    height: 33.33%;
 }
 
-.drop-zone{
+.piece3{ /*Puzzle 3*/
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    width: 25%;
+    height: 25%;
+}
+
+.drop-zone{ /*Puzzle 1*/
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
@@ -1015,21 +1662,29 @@ h1 {
     height: 50%;
 }
 
-.drop-zone2{
+.drop-zone2{ /*Puzzle 2*/
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
-    width: 33%;
-    height: 33%;
+    width: 33.33%;
+    height: 33.33%;
 }
 
+.drop-zone3{ /*Puzzle 3*/
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    width: 25%;
+    height: 25%;
+}
+
+/*Puzzle 1*/
 #img0{
     position: relative;
     width: 100%;
     height: 120%;
     z-index: 2;
 }
-
 #img1{
     position: relative;
     width: 117%;
@@ -1037,14 +1692,12 @@ h1 {
     left: -17%;
     z-index: 2;
 }
-
 #img2{
     position: relative;
     width: 116.5%;
     height: 100%;
     z-index: 2;
 }
-
 #img3{
     position: relative;
     top: -16%;
@@ -1054,85 +1707,498 @@ h1 {
     z-index: 2;
 }
 
+/*Puzzle 2*/
 #image0 {
+    position: relative;
+    width: 116%;
+    height: 115%;
+    z-index: 2;
+}
+#image1 {
+    position: relative;
+    width: 116%;
+    height: 115%;
+    left: -4%;
+    z-index: 2;
+}
+#image2{
+    position: relative;
+    width: 116%;
+    height: 115%;
+    left: -16%;
+    z-index: 2;
+}
+#image3{
+    position: relative;
+    width: 116%;
+    height: 110%;
+    bottom: 2%;
+    z-index: 2;
+}
+#image4{
+    position: relative;
+    width: 110%;
+    height: 110%;
+    bottom: 2.4%;
+    left: -4%;
+    z-index: 2;
+}
+#image5{
+    position: relative;
+    width: 116%;
+    height: 110%;
+    bottom: 2%;
+    left: -16%;
+    z-index: 2;
+}
+#image6{
+    position: relative;
+    width: 116%;
+    height: 110%;
+    bottom: 10%;
+    z-index: 2;
+}
+#image7{
+    position: relative;
+    width: 110%;
+    height: 109%;
+    bottom: 9%;
+    left: -3%;
+    z-index: 2;
+}
+#image8{
+    position: relative;
+    width: 116%;
+    height: 110%;
+    left: -16%;
+    bottom: 10%;
+    z-index: 2;
+}
+
+/*Puzzle 3*/
+#images0{
+    position: relative;
+    width: 105%;
+    height: 109%;
+    z-index: 2;
+}
+#images1{
+    position: relative;
+    width: 118%;
+    height: 110%;
+    left: -15%;
+    z-index: 2;
+}
+#images2{
+    position: relative;
+    width: 129%;
+    height: 110%;
+    left: -15%;
+    z-index: 2;
+}
+#images3{
+    position: relative;
+    width: 104%;
+    height: 125%;
+    left: -4%;
+    z-index: 2;
+}
+#images4{
+    position: relative;
+    width: 121%;
+    height: 137%;
+    z-index: 2;
+    bottom: 12%;
+}
+#images5{
+    position: relative;
+    width: 100%;
+    height: 120%;
+    z-index: 2;
+    bottom: 11%;
+    left: 1%;
+}
+#images6{
+    position: relative;
+    width: 135%;
+    height: 137%;
+    left: -21%;
+    bottom: 11%;
+    z-index: 2;
+}
+#images7{
+    position: relative;
+    width: 105%;
+    height: 100%;
+    z-index: 2;
+    bottom: -6%;
+    left: -5%;
+}
+#images8{
     position: relative;
     width: 130%;
+    height: 115%;
+    bottom: -7%;
+    z-index: 2;
+}
+#images9{
+    position: relative;
+    width: 115%;
+    height: 110%;
+    bottom: 9%;
+    left: 1%;
+    z-index: 2;
+}
+#images10{
+    position: relative;
+    width: 119%;
+    height: 96%;
+    left: -5%;
+    bottom: -6%;
+    z-index: 2;
+}
+#images11{
+    position: relative;
+    width: 125%;
     height: 130%;
+    left: -6%;
+    bottom: 10%;
+    z-index: 2;
+}
+#images12{
+    position: relative;
+    width: 105%;
+    height: 100%;
+    z-index: 2;
+}
+#images13{
+    position: relative;
+    width: 130%;
+    height: 118%;
+    bottom: 18%;
+    left: -15%;
+    z-index: 2;
+}
+#images14{
+    position: relative;
+    width: 120%;
+    height: 118%;
+    z-index: 2;
+    bottom: 18%;
+    left: -5%;
+}
+#images15{
+    position: relative;
+    width: 105%;
+    height: 100%;
     z-index: 2;
+    left: -5%;
+}
+
+}
+
+@media only screen and (min-width: 1200px){
+#containers{
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    width: 90vw;
+    height: 80vh;
+    border-radius: 20px;
+    gap: 2vh; 
+
+}
+
+#piece-container{
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    width: 40%;
+    height: calc(80% - 1vh); 
+    border: 1px solid black;
+    position: relative;
+    margin-top: 5%;
 }
 
+#puzzle-container{
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    width: 40%;
+    height: calc(80% - 1vh);
+    border: 1px solid black;
+    position: relative;
+    margin-top: 5%;
+}
+
+.piece{ /*Puzzle 1*/
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    width: 50%;
+    height: 50%;
+}
+
+.piece2{ /*Puzzle 2*/
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    width: 33.33%;
+    height: 33.33%;
+}
+
+.piece3{ /*Puzzle 3*/
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    width: 25%;
+    height: 25%;
+}
+
+.drop-zone{ /*Puzzle 1*/
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    width: 50%;
+    height: 50%;
+}
+
+.drop-zone2{ /*Puzzle 2*/
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    width: 33.33%;
+    height: 33.33%;
+}
+
+.drop-zone3{ /*Puzzle 3*/
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    width: 25%;
+    height: 25%;
+}
+
+/*Puzzle 1*/
+#img0{
+    position: relative;
+    width: 100%;
+    height: 120%;
+    z-index: 2;
+}
+#img1{
+    position: relative;
+    width: 117%;
+    height: 103%;
+    left: -17%;
+    z-index: 2;
+}
+#img2{
+    position: relative;
+    width: 116.5%;
+    height: 100%;
+    z-index: 2;
+}
+#img3{
+    position: relative;
+    top: -16%;
+    width: 101%;
+    height: 116%;
+    left: -1%;
+    z-index: 2;
+}
+
+/*Puzzle 2*/
+#image0 {
+    position: relative;
+    width: 116%;
+    height: 115%;
+    z-index: 2;
+}
 #image1 {
     position: relative;
-    width: 120%;
-    height: 117%;
-    left: 9%;
+    width: 116%;
+    height: 115%;
+    left: -4%;
+    z-index: 2;
+}
+#image2{
+    position: relative;
+    width: 116%;
+    height: 115%;
+    left: -16%;
+    z-index: 2;
+}
+#image3{
+    position: relative;
+    width: 116%;
+    height: 110%;
+    bottom: 2%;
+    z-index: 2;
+}
+#image4{
+    position: relative;
+    width: 110%;
+    height: 110%;
+    bottom: 2.4%;
+    left: -4%;
+    z-index: 2;
+}
+#image5{
+    position: relative;
+    width: 116%;
+    height: 110%;
+    bottom: 2%;
+    left: -16%;
+    z-index: 2;
+}
+#image6{
+    position: relative;
+    width: 116%;
+    height: 110%;
+    bottom: 10%;
+    z-index: 2;
+}
+#image7{
+    position: relative;
+    width: 110%;
+    height: 109%;
+    bottom: 9%;
+    left: -3%;
+    z-index: 2;
+}
+#image8{
+    position: relative;
+    width: 116%;
+    height: 110%;
+    left: -16%;
+    bottom: 10%;
+    z-index: 2;
+}
+
+/*Puzzle 3*/
+#images0{
+    position: relative;
+    width: 105%;
+    height: 109%;
+    z-index: 2;
+}
+#images1{
+    position: relative;
+    width: 118%;
+    height: 110%;
+    left: -15%;
+    z-index: 2;
+}
+#images2{
+    position: relative;
+    width: 129%;
+    height: 110%;
+    left: -15%;
+    z-index: 2;
+}
+#images3{
+    position: relative;
+    width: 104%;
+    height: 125%;
+    left: -4%;
+    z-index: 2;
+}
+#images4{
+    position: relative;
+    width: 121%;
+    height: 137%;
+    z-index: 2;
+    bottom: 12%;
+}
+#images5{
+    position: relative;
+    width: 100%;
+    height: 120%;
+    z-index: 2;
+    bottom: 11%;
+    left: 1%;
+}
+#images6{
+    position: relative;
+    width: 135%;
+    height: 137%;
+    left: -21%;
+    bottom: 11%;
+    z-index: 2;
+}
+#images7{
+    position: relative;
+    width: 105%;
+    height: 100%;
+    z-index: 2;
+    bottom: -6%;
+    left: -5%;
+}
+#images8{
+    position: relative;
+    width: 125%;
+    height: 112%;
+    bottom: -7%;
     z-index: 2;
 }
-
-#image2{
+#images9{
     position: relative;
-    width: 130%;
+    width: 115%;
     height: 110%;
-    left: -8%;
+    bottom: 9%;
+    left: 1%;
     z-index: 2;
 }
-
-#image3{
+#images10{
     position: relative;
-    width: 120%;
-    height: 115%;
-    bottom: 10%;
+    width: 119%;
+    height: 96%;
+    left: -5%;
+    bottom: -6%;
     z-index: 2;
 }
-
-#image4{
+#images11{
     position: relative;
-    width: 105%;
-    height: 115%;
+    width: 111%;
+    height: 125%;
+    left: -11%;
     bottom: 10%;
-    left: 1%;
     z-index: 2;
 }
-
-
-#image5{
+#images12{
     position: relative;
-    width: 115%;
-    height: 116%;
-    bottom: 9%;
-    left: -12%;
+    width: 105%;
+    height: 100%;
     z-index: 2;
 }
-
-#image6{
+#images13{
     position: relative;
     width: 130%;
-    height: 119%;
+    height: 118%;
     bottom: 18%;
+    left: -15%;
     z-index: 2;
 }
-
-#image7{
+#images14{
     position: relative;
-    width: 150%;
-    height: 115%;
-    bottom: 14%;
-    left: 1%;
+    width: 120%;
+    height: 118%;
     z-index: 2;
+    bottom: 18%;
+    left: -5%;
 }
-
-#image8{
+#images15{
     position: relative;
-    width: 120%;
-    height: 119%;
-    left: -14%;
-    bottom: 18%;
+    width: 105%;
+    height: 100%;
     z-index: 2;
+    left: -5%;
 }
 
 }
 
-@media only screen and (min-width: 1200px){
+@media only screen and (min-width: 1400px){
 #containers{
     display: flex;
     flex-direction: row;
@@ -1141,14 +2207,13 @@ h1 {
     height: 80vh;
     border-radius: 20px;
     gap: 2vh; 
-
 }
 
 #piece-container{
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
-    width: 40%;
+    width: 35%;
     height: calc(80% - 1vh); 
     border: 1px solid black;
     position: relative;
@@ -1159,14 +2224,14 @@ h1 {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
-    width: 40%;
-    height: calc(80% - 1vh);
+    width: 35%;
+    height: calc(80% - 1vh); 
     border: 1px solid black;
-    position: relative;
+    position: relative; 
     margin-top: 5%;
 }
 
-.piece{
+.piece{ /*Puzzle 1*/
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
@@ -1174,15 +2239,23 @@ h1 {
     height: 50%;
 }
 
-.piece2{
+.piece2{ /*Puzzle 2*/
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
-    width: 33%;
-    height: 33%;
+    width: 33.33%;
+    height: 33.33%;
 }
 
-.drop-zone{
+.piece3{ /*Puzzle 3*/
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    width: 25%;
+    height: 25%;
+}
+
+.drop-zone{ /*Puzzle 1*/
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
@@ -1190,21 +2263,29 @@ h1 {
     height: 50%;
 }
 
-.drop-zone2{
+.drop-zone2{ /*Puzzle 2*/
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    width: 33.33%;
+    height: 33.33%;
+}
+
+.drop-zone3{ /*Puzzle 3*/
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
-    width: 33%;
-    height: 33%;
+    width: 25%;
+    height: 25%;
 }
 
+/*Puzzle 1*/
 #img0{
     position: relative;
     width: 100%;
     height: 120%;
     z-index: 2;
 }
-
 #img1{
     position: relative;
     width: 117%;
@@ -1212,14 +2293,12 @@ h1 {
     left: -17%;
     z-index: 2;
 }
-
 #img2{
     position: relative;
     width: 116.5%;
     height: 100%;
     z-index: 2;
 }
-
 #img3{
     position: relative;
     top: -16%;
@@ -1229,253 +2308,192 @@ h1 {
     z-index: 2;
 }
 
+/*Puzzle 2*/
 #image0 {
     position: relative;
-    width: 120%;
-    height: 120%;
+    width: 116%;
+    height: 115%;
     z-index: 2;
 }
-
 #image1 {
     position: relative;
-    width: 110%;
+    width: 116%;
     height: 115%;
-    left: 1%;
+    left: -4%;
     z-index: 2;
 }
-
 #image2{
     position: relative;
-    width: 110%;
+    width: 116%;
     height: 115%;
-    left: -8%;
+    left: -16%;
     z-index: 2;
 }
-
 #image3{
     position: relative;
-    width: 120%;
+    width: 116%;
     height: 110%;
     bottom: 2%;
     z-index: 2;
 }
-
 #image4{
     position: relative;
     width: 110%;
     height: 110%;
-    bottom: 2%;
-    left: 1%;
+    bottom: 2.4%;
+    left: -4%;
     z-index: 2;
 }
-
-
 #image5{
     position: relative;
-    width: 110%;
-    height: 108%;
-    bottom: 1%;
-    left: -7%;
+    width: 116%;
+    height: 110%;
+    bottom: 2%;
+    left: -16%;
     z-index: 2;
 }
-
 #image6{
     position: relative;
-    width: 120%;
+    width: 116%;
     height: 110%;
-    bottom: 9%;
+    bottom: 10%;
     z-index: 2;
 }
-
 #image7{
     position: relative;
     width: 110%;
-    height: 108%;
-    bottom: 7%;
-    left: 1%;
+    height: 109%;
+    bottom: 9%;
+    left: -3%;
     z-index: 2;
 }
-
 #image8{
     position: relative;
-    width: 110%;
-    height: 112%;
-    left: -7%;
-    bottom: 11%;
+    width: 116%;
+    height: 110%;
+    left: -16%;
+    bottom: 10%;
     z-index: 2;
 }
 
-}
-
-@media only screen and (min-width: 1400px){
-#containers{
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    width: 90vw;
-    height: 80vh;
-    border-radius: 20px;
-    gap: 2vh; 
-}
-
-#piece-container{
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    width: 35%;
-    height: calc(80% - 1vh); 
-    border: 1px solid black;
+/*Puzzle 3*/
+#images0{
     position: relative;
-    margin-top: 5%;
-}
-
-#puzzle-container{
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    width: 35%;
-    height: calc(80% - 1vh); 
-    border: 1px solid black;
-    position: relative; 
-    margin-top: 5%;
-}
-
-.piece{
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    width: 50%;
-    height: 50%;
-}
-
-.piece2{
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    width: 33%;
-    height: 33%;
+    width: 105%;
+    height: 109%;
+    z-index: 2;
 }
-
-.drop-zone{
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    width: 50%;
-    height: 50%;
+#images1{
+    position: relative;
+    width: 118%;
+    height: 110%;
+    left: -15%;
+    z-index: 2;
 }
-
-.drop-zone2{
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    width: 33%;
-    height: 33%;
+#images2{
+    position: relative;
+    width: 129%;
+    height: 110%;
+    left: -15%;
+    z-index: 2;
 }
-
-#img0{
+#images3{
     position: relative;
-    width: 100%;
-    height: 120%;
+    width: 104%;
+    height: 125%;
+    left: -4%;
     z-index: 2;
 }
-
-#img1{
+#images4{
     position: relative;
-    width: 117%;
-    height: 103%;
-    left: -17%;
+    width: 121%;
+    height: 137%;
     z-index: 2;
+    bottom: 12%;
 }
-
-#img2{
+#images5{
     position: relative;
-    width: 116.5%;
-    height: 100%;
+    width: 100%;
+    height: 120%;
     z-index: 2;
+    bottom: 11%;
+    left: 1%;
 }
-
-#img3{
+#images6{
     position: relative;
-    top: -16%;
-    width: 101%;
-    height: 116%;
-    left: -1%;
+    width: 135%;
+    height: 137%;
+    left: -21%;
+    bottom: 11%;
     z-index: 2;
 }
-
-#image0 {
+#images7{
     position: relative;
-    width: 130%;
-    height: 130%;
+    width: 105%;
+    height: 100%;
     z-index: 2;
+    bottom: -6%;
+    left: -5%;
 }
-
-#image1 {
+#images8{
     position: relative;
-    width: 120%;
-    height: 117%;
-    left: 3%;
+    width: 125%;
+    height: 112%;
+    bottom: -7%;
     z-index: 2;
 }
-
-#image2{
+#images9{
     position: relative;
-    width: 130%;
+    width: 115%;
     height: 110%;
-    left: -16%;
+    bottom: 9%;
+    left: 1%;
     z-index: 2;
 }
-
-#image3{
+#images10{
     position: relative;
-    width: 120%;
-    height: 115%;
-    bottom: 10%;
+    width: 119%;
+    height: 96%;
+    left: -5%;
+    bottom: -6%;
     z-index: 2;
 }
-
-#image4{
+#images11{
     position: relative;
-    width: 105%;
-    height: 115%;
+    width: 111%;
+    height: 125%;
+    left: -11%;
     bottom: 10%;
-    left: 1%;
     z-index: 2;
 }
-
-#image5{
+#images12{
     position: relative;
-    width: 115%;
-    height: 116%;
-    bottom: 9%;
-    left: -12%;
+    width: 105%;
+    height: 100%;
     z-index: 2;
 }
-
-#image6{
+#images13{
     position: relative;
     width: 130%;
-    height: 119%;
+    height: 118%;
     bottom: 18%;
+    left: -15%;
     z-index: 2;
 }
-
-#image7{
+#images14{
     position: relative;
-    width: 150%;
-    height: 115%;
-    bottom: 14%;
-    left: 1%;
+    width: 120%;
+    height: 118%;
     z-index: 2;
+    bottom: 18%;
+    left: -5%;
 }
-
-#image8{
+#images15{
     position: relative;
-    width: 115%;
-    height: 119%;
-    left: -12%;
-    bottom: 18%;
+    width: 105%;
+    height: 100%;
     z-index: 2;
+    left: -5%;
 }
 
 }
\ No newline at end of file