diff --git a/index.html b/index.html
index e8fdcea..4d5bb54 100644
--- a/index.html
+++ b/index.html
@@ -16,14 +16,14 @@
         <main>
             <section>
                 <h1>Puzzle 1</h1>
-                <div id="containers">
-                    <div id = "piece-container"></div> <!--creating the puzzle piece -https://www.youtube.com/watch?app=desktop&v=b-WZjv5Xglc&ab_channel=PresentationProcess-->
-                    <div id = "puzzle-container"></div>
-                </div>
                 <ul id = "buttons">
                     <li><button id = "start">start</button></li>
                     <li><button id = "reset">reset</button></li>
                 </ul>
+                <div id="containers">
+                    <div id = "piece-container"></div> <!--creating the puzzle piece -https://www.youtube.com/watch?app=desktop&v=b-WZjv5Xglc&ab_channel=PresentationProcess-->
+                    <div id = "puzzle-container"></div>
+                </div>
             </section>
         </main>
       
diff --git a/style.css b/style.css
index a1d737a..9468479 100644
--- a/style.css
+++ b/style.css
@@ -4,52 +4,153 @@
     box-sizing: border-box;
 }
 
-body { 
+body, main { 
+    width: 100%;
     min-height: 100vh;
-    width: 100%; 
+    display: flex;
+    align-items: center; /* Centered children horizontally */
+    justify-content: space-around;
 }
 
-main {
-    min-height: 100vh;
-    width: 100%; 
-}
 
 h1 {
     display: flex;
     justify-content: center;
 }
 
+@media (max-width: 767px) and (orientation: portrait) { /*Orientation property: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/orientation*/
+    
+#containers{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 90vw;
+    height: 80vh;
+    border-radius: 20px;
+    gap: 2vh; 
+    aspect-ratio: 1 / 1; 
+}
+
+#piece-container{
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    width: 70%; /*For all media queries, I toogled width and height each time until i was visually satisfied*/
+    height: calc(50% - 1vh); /*For all media queries, I toogled width and height each time until i was visually satisfied*/
+    border: 1px solid black;
+    position: relative;
+}
+
+#puzzle-container{
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    width: 70%; /*For all media queries, I toogled width and height each time until i was visually satisfied*/
+    height: calc(50% - 1vh); /*For all media queries, I toogled width and height each time until i was visually satisfied*/
+    border: 1px solid black;
+    position: relative; 
+}
+
+.piece{
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    width: 50%;
+    height: 50%;
+}
+
+.drop-zone{
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    width: 50%;
+    height: 50%;
+    aspect-ratio: 1;
+}
+
+#img0{
+    position: relative;
+    z-index: 0;
+    width: 100%;
+    height: 120%; 
+}
+
+#img1{
+    position: relative;
+    width: 117%;
+    height: 103%;
+    left: -17%;
+}
+
+#img2{
+    position: relative;
+    z-index: 2;
+    width: 116.5%;
+    height: 100%
+}
+
+#img3{
+    position: relative;
+    z-index: 1;
+    top: -16%;
+    width: 101%;
+    height: 116%;
+    left: -1%;
+}
+
+#buttons {
+    display: flex;
+    justify-content: center;
+    list-style-type: none;
+    font-size: 16px;
+}
+
+#start {
+    display: flex;
+    justify-content: center;
+    list-style-type: none;
+    padding: 2%;
+}
+
+#reset {
+    display: none;
+    list-style-type: none;
+}
+}
+
+@media (max-width: 767px) and (orientation: landscape){
 #containers{
     display: flex;
     flex-direction: row;
     justify-content: center;
-    width: 96%;
-    height: 50vh;
-    border: 2px solid black;
+    width: 90vw;
+    height: 80vh;
     border-radius: 20px;
-    margin: 2% 2% 2% 2%;
-    gap: 1%;
+    gap: 2vh; 
+    aspect-ratio: 1 / 1; 
 }
 
 #piece-container{
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
-    width: 49%;
-    height: 49%;
+    width: 30%; /*For all media queries, I toogled width and height each time until i was visually satisfied*/
+    height: calc(70% - 1vh); /*For all media queries, I toogled width and height each time until i was visually satisfied*/
     border: 1px solid black;
-    margin-top: 25%;
     position: relative;
+    margin-top: 5%;
 }
 
 #puzzle-container{
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
-    width: 49%;
-    height: 49%;
+    width: 30%; /*For all media queries, I toogled width and height each time until i was visually satisfied*/
+    height: calc(70% - 1vh); /*For all media queries, I toogled width and height each time until i was visually satisfied*/
     border: 1px solid black;
-    margin-top: 25%;
+    position: relative; 
+    margin-top: 5%;
 }
 
 .piece{
@@ -58,8 +159,6 @@ h1 {
     flex-wrap: wrap;
     width: 50%;
     height: 50%;
-    /*background-image: url(puzzle1/full-image.jpg);
-    background-repeat: no-repeat;*/
 }
 
 .drop-zone{
@@ -68,29 +167,230 @@ h1 {
     flex-wrap: wrap;
     width: 50%;
     height: 50%;
+    aspect-ratio: 1;
 }
 
 #img0{
     position: relative;
-    z-index: 0; /* Set the z-index to control the stacking order */
+    z-index: 0;
     width: 100%;
-    height: 120%; /* Increase height to overlap */
+    height: 120%; 
 }
 
 #img1{
+    position: relative;
+    width: 117%;
+    height: 103%; 
+    left: -17%;
+}
+
+#img2{
+    position: relative;
+    z-index: 2;
+    width: 116.5%;
+    height: 100%
+}
+
+#img3{
+    position: relative;
+    z-index: 1;
+    top: -16%;
+    width: 101%;
+    height: 116%;
+    left: -1%;
+}
+
+#buttons {
+    display: flex;
+    justify-content: center;
+    list-style-type: none;
+    font-size: 16px;
+}
+
+#start {
+    display: flex;
+    justify-content: center;
+    list-style-type: none;
+    padding: 2%;
+}
+
+#reset {
+    display: none;
+    list-style-type: none;
+}
+}
+
+@media only screen and (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {
+#containers{
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    width: 90vw;
+    height: 80vh;
+    border-radius: 20px;
+    gap: 2vh; /* Considering the gap in total height calculation */
+    aspect-ratio: 1 / 1; /* Maintain ratio */
+}
+
+#piece-container{
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    width: 50%;
+    height: calc(50% - 1vh); /* Adjusting for the gap, ensuring both fit within #containers without overflow */
+    border: 1px solid black;
+    position: relative;
+    margin-top: 5%;
+}
+
+#puzzle-container{
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    width: 50%;
+    height: calc(50% - 1vh); /* Adjusting for the gap, ensuring both fit within #containers without overflow */
+    border: 1px solid black;
+    position: relative; /*there is a reason for this when drag and dropping element*/
+    margin-top: 5%;
+}
+
+.piece{
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    width: 50%;
+    height: 50%;
+}
+
+.drop-zone{
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    width: 50%;
+    height: 50%;
+    aspect-ratio: 1;
+}
+
+#img0{
     position: relative;
     z-index: 0;
+    width: 100%;
+    height: 120%; /* Increased height to overlap */
+}
+
+#img1{
+    position: relative;
     width: 117%;
-    height: 103%; /* Increase height to overlap */
+    height: 103%; /* Increased height to overlap */
     left: -17%;
+}
+
+#img2{
+    position: relative;
+    z-index: 2;
+    width: 116.5%;
+    height: 100%
+}
+
+#img3{
+    position: relative;
+    z-index: 1;
+    top: -16%;
+    width: 101%;
+    height: 116%;
+    left: -1%;
+}
+
+#buttons {
+    display: flex;
+    justify-content: center;
+    list-style-type: none;
+    font-size: 16px;
+}
+
+#start {
+    display: flex;
+    justify-content: center;
+    list-style-type: none;
+    padding: 2%;
+}
+
+#reset {
+    display: none;
+    list-style-type: none;
+}
+}
+
+@media only screen and (min-width: 768px) and (max-width: 1023px) and (orientation: landscape) {
+#containers{
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    width: 90vw;
+    height: 80vh;
+    border-radius: 20px;
+    gap: 2vh;
+    aspect-ratio: 1 / 1;
+}
+
+#piece-container{
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    width: 30%; /*For all media queries, I toogled width and height each time until i was visually satisfied*/
+    height: calc(80% - 1vh); /*For all media queries, I toogled width and height each time until i was visually satisfied*/
+    border: 1px solid black;
+    position: relative;
+    margin-top: 5%;
+}
+
+#puzzle-container{
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    width: 30%; /*For all media queries, I toogled width and height each time until i was visually satisfied*/
+    height: calc(80% - 1vh); /*For all media queries, I toogled width and height each time until i was visually satisfied*/
+    border: 1px solid black;
+    position: relative; 
+    margin-top: 5%;
+}
+
+.piece{
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    width: 50%;
+    height: 50%;
+}
+
+.drop-zone{
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    width: 50%;
+    height: 50%;
+    aspect-ratio: 1;
+}
+
+#img0{
+    position: relative;
+    z-index: 0;
+    width: 100%;
+    height: 120%;
+}
 
+#img1{
+    position: relative;
+    width: 117%;
+    height: 103%;
+    left: -17%;
 }
 
 #img2{
     position: relative;
     z-index: 2;
     width: 116.5%;
-    height: 100%;
+    height: 100%
 }
 
 #img3{
@@ -99,7 +399,7 @@ h1 {
     top: -16%;
     width: 101%;
     height: 116%;
-    left: -0.5%;
+    left: -1%;
 }
 
 #buttons {
@@ -119,4 +419,409 @@ h1 {
 #reset {
     display: none;
     list-style-type: none;
+}
+}
+
+@media only screen and (min-width: 1024px) and (orientation: portrait){
+    #containers{
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    width: 90vw;
+    height: 80vh;
+    border-radius: 20px;
+    gap: 2vh; 
+    aspect-ratio: 1 / 1; 
+}
+
+#piece-container{
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    width: 50%;
+    height: calc(70% - 1vh);
+    border: 1px solid black;
+    position: relative;
+    margin-top: 5%;
+}
+
+#puzzle-container{
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    width: 50%;
+    height: calc(70% - 1vh);
+    border: 1px solid black;
+    position: relative;
+    margin-top: 5%;
+}
+
+.piece{
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    width: 50%;
+    height: 50%;
+}
+
+.drop-zone{
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    width: 50%;
+    height: 50%;
+    aspect-ratio: 1;
+}
+
+#img0{
+    position: relative;
+    z-index: 0;
+    width: 100%;
+    height: 120%;
+}
+
+#img1{
+    position: relative;
+    width: 117%;
+    height: 103%;
+    left: -17%;
+}
+
+#img2{
+    position: relative;
+    z-index: 2;
+    width: 116.5%;
+    height: 100%
+}
+
+#img3{
+    position: relative;
+    z-index: 1;
+    top: -16%;
+    width: 101%;
+    height: 116%;
+    left: -1%;
+}
+
+#buttons {
+    display: flex;
+    justify-content: center;
+    list-style-type: none;
+    font-size: 16px;
+}
+
+#start {
+    display: flex;
+    justify-content: center;
+    list-style-type: none;
+    padding: 2%;
+}
+
+#reset {
+    display: none;
+    list-style-type: none;
+}
+}
+
+@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; 
+    aspect-ratio: 1 / 1;
+}
+
+#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{
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    width: 50%;
+    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%;
+}
+
+.drop-zone{
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    width: 50%;
+    height: 50%;
+    aspect-ratio: 1;
+}
+
+#img0{
+    position: relative;
+    z-index: 0;
+    width: 100%;
+    height: 120%;
+}
+
+#img1{
+    position: relative;
+    width: 117%;
+    height: 103%;
+    left: -17%;
+}
+
+#img2{
+    position: relative;
+    z-index: 2;
+    width: 116.5%;
+    height: 100%
+}
+
+#img3{
+    position: relative;
+    z-index: 1;
+    top: -16%;
+    width: 101%;
+    height: 116%;
+    left: -1%;
+}
+
+#buttons {
+    display: flex;
+    justify-content: center;
+    list-style-type: none;
+    font-size: 16px;
+}
+
+#start {
+    display: flex;
+    justify-content: center;
+    list-style-type: none;
+    padding: 2%;
+}
+
+#reset {
+    display: none;
+    list-style-type: none;
+}
+}
+
+@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; 
+    aspect-ratio: 1 / 1;
+}
+
+#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{
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    width: 50%;
+    height: 50%;
+}
+
+.drop-zone{
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    width: 50%;
+    height: 50%;
+    aspect-ratio: 1;
+}
+
+#img0{
+    position: relative;
+    z-index: 0;
+    width: 100%;
+    height: 120%;
+}
+
+#img1{
+    position: relative;
+    width: 117%;
+    height: 103%;
+    left: -17%;
+}
+
+#img2{
+    position: relative;
+    z-index: 2;
+    width: 116.5%;
+    height: 100%
+}
+
+#img3{
+    position: relative;
+    z-index: 1;
+    top: -16%;
+    width: 101%;
+    height: 116%;
+    left: -1%;
+}
+
+#buttons {
+    display: flex;
+    justify-content: center;
+    list-style-type: none;
+    font-size: 16px;
+}
+
+#start {
+    display: flex;
+    justify-content: center;
+    list-style-type: none;
+    padding: 2%;
+}
+
+#reset {
+    display: none;
+    list-style-type: none;
+}
+}
+
+@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; 
+    aspect-ratio: 1 / 1;
+}
+
+#piece-container{
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    width: 35%;
+    height: calc(80% - 1vh); 
+    border: 1px solid black;
+    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%;
+}
+
+.drop-zone{
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    width: 50%;
+    height: 50%;
+    aspect-ratio: 1;
+}
+
+#img0{
+    position: relative;
+    z-index: 0;
+    width: 100%;
+    height: 120%; 
+}
+
+#img1{
+    position: relative;
+    width: 117%;
+    height: 103%;
+    left: -17%;
+}
+
+#img2{
+    position: relative;
+    z-index: 2;
+    width: 116.5%;
+    height: 100%
+}
+
+#img3{
+    position: relative;
+    z-index: 1;
+    top: -16%;
+    width: 101%;
+    height: 116%;
+    left: -1%;
+}
+
+#buttons {
+    display: flex;
+    justify-content: center;
+    list-style-type: none;
+    font-size: 16px;
+}
+
+#start {
+    display: flex;
+    justify-content: center;
+    list-style-type: none;
+    padding: 2%;
+}
+
+#reset {
+    display: none;
+    list-style-type: none;
+}
 }
\ No newline at end of file