1 files changed, 32 insertions, 4 deletions
diff --git a/frontend/src/App.css b/frontend/src/App.css
index 6566fca..4046cce 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -43,10 +43,31 @@
   justify-content: center;
 }
 
-.App-main {
+.Game-main {
   min-height: 100vh;
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
+  gap: 5vmin;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+}
+
+.Game-controls {
+  height: 80vh;
+  width: 10vw;
+  background-color: var(--bg-secondary);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+}
+
+.Game-reasons {
+  height: 80vh;
+  width: 10vw;
+  background-color: var(--bg-secondary);
+  display: flex;
   align-items: center;
   justify-content: center;
   font-size: calc(10px + 2vmin);
@@ -74,12 +95,12 @@
   text-overflow: clip;
 }
 .Grid-square .Fit-text {
-  font-size: calc(10px + 1vmin);
+  font-size: calc(10px + 0.8vmin);
   overflow: hidden;
   text-overflow: clip;
 }
 .Completed-group .Fit-text {
-  font-size: calc(10px + 2vmin);
+  font-size: calc(10px + 1.5vmin);
   font-style: bold;
   overflow: hidden;
   text-overflow: clip;
@@ -110,6 +131,13 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  cursor: pointer;
+}
+
+.Group-reason {
+  white-space: normal;
+  word-wrap: break-word; /* Or word-break: break-word; */
+  overflow-wrap: break-word;
 }
 
 .Selected {