From a8fbfec5a11f77a27859d859a92cd4ac05e3d6df Mon Sep 17 00:00:00 2001
From: Kateryna Sliepchenko <catherine.slepchenko@gmail.com>
Date: Thu, 14 Sep 2023 16:32:49 +0200
Subject: [PATCH] added styles with aspect ratio;

---
 src/engine/Graphics2d.module.css | 60 +++++++++++++++-----------------
 src/ui/Main.module.css           |  4 +--
 2 files changed, 31 insertions(+), 33 deletions(-)

diff --git a/src/engine/Graphics2d.module.css b/src/engine/Graphics2d.module.css
index cd3d7639..00ed5368 100644
--- a/src/engine/Graphics2d.module.css
+++ b/src/engine/Graphics2d.module.css
@@ -1,22 +1,22 @@
-.wrapperStyles {
-    width: 100%;
-    justify-content: center;
-    overflow: scroll;
-    padding: 0;
-    height: calc(100% - 0.5rem);
-    margin: 0;
 
-}
 
-.canvasStyles {
-    display: block;
-    width: 150vw;
-    height: 100%;
-    margin: 0;
-    padding: 0;
+@media screen and (max-width: 768px) {
+
+    .wrapperStyles {
+        width: 100%;
+        height: 100vh;
+        justify-content: center;
+        overflow: scroll;
+    }
+
+    .canvasStyles {
+        display: block;
+        width: 150vw;
+    }
 }
 
-@media screen and (min-width: 768px) {
+@media screen and (min-width: 768px )  and (max-width: 1024px) {
+
     .wrapperStyles {
         height: calc(100% - 2.5rem);
         width: calc(100% - 3rem);
@@ -24,37 +24,35 @@
         border-radius: 10px;
     }
     .canvasStyles {
-        width: 150vw;
-        height: calc(100% - 3rem);
-    }
-}
-@media screen and(min-width: 768px) {
-    .wrapperStyles {
-        height: calc(100% - 3rem);
-        width: calc(100%- 3rem);
+        aspect-ratio: 1 / 1;
     }
 }
 
 @media screen and (orientation: landscape) and (min-width: 768px) {
+
     .wrapperStyles {
         height: calc(100% - 2.5rem);
         width: calc(100%- 3rem);
+        border: none;
     }
-
     .canvasStyles {
-        width: 80vw;
-        height: calc(100% - 0.5rem);
+        aspect-ratio: 1 / 1;
+        border: 2px solid #dc5e47;
+        border-radius: 10px;
     }
+
 }
 
-@media screen and (orientation: landscape) and (min-width: 1024px) {
+
+@media screen and (min-width: 1024px) and (orientation: landscape) {
+
     .wrapperStyles {
-        width: 80%;
         height: calc(100% - 0.5rem);
-        display: flex;
+        aspect-ratio: 1/1;
     }
+
     .canvasStyles {
-        width: 150vw;
-        height: calc(100% - 0.5rem);
+        margin: 0 auto;
     }
 }
+
diff --git a/src/ui/Main.module.css b/src/ui/Main.module.css
index 6ee69fea..7db44401 100644
--- a/src/ui/Main.module.css
+++ b/src/ui/Main.module.css
@@ -116,7 +116,7 @@
     position: absolute;
     left: 25px;
     top: 100px;
-    z-index: 900;
+    z-index: 1010;
   }
 
   .bottleft {
@@ -125,7 +125,7 @@
     position: absolute;
     left: 25px;
     bottom: 25px;
-    z-index: 1000;
+    z-index: 1010;
   }