1 files changed, 63 insertions, 9 deletions
diff --git a/frontend/src/App.css b/frontend/src/App.css
index 4f77d97..6566fca 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -1,3 +1,11 @@
+:root {
+  --bg-main: #1f2526;
+  --bg-secondary: #364446;
+  --primary-element: #56d0b8;
+  --secondary-element: #5dd6e3;
+  --highlight-element: #ffec69;
+}
+
 .App {
   text-align: center;
 }
@@ -28,7 +36,7 @@
 }
 
 .App-bg {
-  background-color: #282c34;
+  background-color: var(--bg-main);
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -42,32 +50,61 @@
   align-items: center;
   justify-content: center;
   font-size: calc(10px + 2vmin);
-  color: white;
 }
 
-.Grid {
-  background: #5262816f;
+.Grid-container {
+  background: var(--bg-main);
   border-radius: 20px;
   width: 80vmin;
   height: 80vmin;
   display: grid;
+  gap: 0.8vmin; /* exactly the same as the grid gap */
+}
+
+.Grid {
+  display: grid;
+  width: 100%;
+  height: auto;
   grid-template-columns: repeat(4, 1fr);
-  grid-template-rows: repeat(4, 1fr);
-  gap: 1%;
+  gap: 0.8vmin;
 }
 
 .Fit-text {
+  overflow: hidden;
+  text-overflow: clip;
+}
+.Grid-square .Fit-text {
   font-size: calc(10px + 1vmin);
   overflow: hidden;
   text-overflow: clip;
 }
+.Completed-group .Fit-text {
+  font-size: calc(10px + 2vmin);
+  font-style: bold;
+  overflow: hidden;
+  text-overflow: clip;
+}
 
 .Grid-square {
-  background: #acc1eb9d;
+  background: var(--secondary-element);
+  border: none;
+  border-radius: 10px;
+  width: 19.4vmin;
+  height: 19.4vmin;
+  font-size: 50%;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.Completed-group {
+  background: var(--secondary-element);
   border: none;
   border-radius: 10px;
   width: 100%;
-  height: 100%;
+  height: 19.4vmin;
   font-size: 50%;
   overflow: hidden;
   display: flex;
@@ -76,7 +113,24 @@
 }
 
 .Selected {
-  background: #d8deea9d;
+  background: var(--highlight-element);
+}
+
+.Removed {
+  background: var(--bg-secondary);
+  cursor: default;
+}
+
+.Submit-button {
+  background: var(--primary-element);
+  border-radius: 10px;
+  margin-top: 2vmin;
+  font-size: calc(10px + 1vmin);
+  font-weight: bold;
+  width: 100%;
+  height: 5vh;
+  border: none;
+  cursor: pointer;
 }
 
 @keyframes Logo-rotate-in {