Footer is in the right place

- Colors Bar now sclae and have appropriate comportment
- reducing of game zone

src/App.css

@@ -1,11 +1,9 @@
 #root {
   width: 100%;
-  height: 100%;
+  height: 100vh;
   margin: 0 0;
   padding: 0;
   text-align: center;
-  display: flex;
-  flex-direction: column;
   align-content: center;
   justify-content: center;
   overflow-x: hidden;

src/index.css

@@ -27,8 +27,6 @@ body {
   height: 100vh;
   margin: 0;
   padding: 0;
-  display: flex;
-  flex-direction: column;
   place-items: center;
   overflow-y: hidden;
   overflow-x: hidden;

src/objects/Case/case.css

@@ -30,4 +30,11 @@
 
 .case.inactive.lightred {
     background-color: var(--color-lightred);
+}
+
+@media (max-width: 720px) {
+    .case {
+        height: calc(58px * 0.8);
+        width: calc(58px * 0.8);
+    }
 }

src/objects/Footer/Footer.css

@@ -3,11 +3,13 @@ footer {
     flex-grow: 0;
     flex-shrink: 0;
     bottom: 0;
+    top: 100%;
     height: 10em;
     width: 100%;
     display: flex;
     grid-template-columns: 1fr 2fr 1fr;
     opacity: 0.8;
+    z-index: 200;
 }
 
 footer .middle {

src/objects/Game/Game.css

@@ -1,5 +1,13 @@
 #game {
-    width: 100%;
+    width: 750px;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    gap: 2rem;
+}
+
+#colors {
+    flex-direction: column;
+    align-items: flex-end;
 }
 
 .result {
@@ -21,7 +29,19 @@
 }
 
 @media (max-width: 720px) {
+    #game {
+        width: 500px;
+        flex-direction: column-reverse;
+        gap: 2rem;
+    }
+
     #drop-zone {
-        width: calc(500px*80%);
+        width: calc(500px*0.8);
+        height: 500px;
+    }
+
+    #colors {
+        width: 100%;
+        flex-direction: row;
     }
 }

src/objects/Line/Line.css

@@ -16,4 +16,10 @@ button {
     width: calc(20% - 1em);
     margin-left: 1em;
     padding: 0;
+}
+
+@media (max-width: 720px) {
+    .line {
+        height: clamp(calc(58px * 0.3), calc(58px * 0.3 + 3px), calc(58px * 0.8));
+    }
 }