1 files changed, 66 insertions, 23 deletions

diff --git a/src/App.css b/src/App.css
index c436008..c9a3616 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,38 +1,81 @@
-.toolkit {
-  float: right;
-  background: lightblue;
+body {
+    background: black;
+    color: aliceblue;
+    padding-left: 50px;
+    padding-right: 50px;
 }
 
-.toolkititem {
-  padding: 5px;
+.container {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+
+    grid-template-areas: 
+        "header header"
+        "paint liveFeed";
+    grid-gap: 5px;
+        
+}
+
+@media (max-width: 760px) {
+    .container {
+        display: grid;
+        grid-template-columns: 1fr;
+    
+        grid-template-areas: 
+            "header"
+            "paint"
+            "liveFeed";
+    }   
+}
+
+.header {
+    grid-area: header;
 }
 
-.toolkititem.selected {
-  background: lightcoral;
+.paint {
+    grid-area: paint;
 }
 
-/* .paintarea {
+.liveFeed {
+    grid-area: liveFeed;
+}
+
+.paintContainer {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1frpx;
 
-} */
+    grid-template-areas: 
+        "paint paint tools"
+        "paintCol palette tools";
+}
+
+.paint {
+    grid-area: paint;
+}
 
-.paintareacell {
-  width: 20px;
-  height: 20px;
-  border: 1px solid grey;
+.tools {
+    grid-area: tools;
+    display: flex;
+    flex-direction: column;
+    width: 45px;
 }
 
-.paletteitem {
-  width: 30px;
-  height: 30px;
-  border: 3px solid black;
-  display: inline-block;
+.palette {
+    grid-area: palette;
+    display: flex;
+    flex-direction: row;
 }
 
-.paletteitem.selected {
-  border: 3px solid red;
+.paintCol {
+    grid-area: paintCol;
 }
 
-.colorIndicator {
-  width: 100px;
-  height: 100px;
+.paintAreaCell {
+    width: "20px";
+    height: "20px";
+    min-width: "20px";
+    min-height: "20px";
+    max-width: "20px";
+    max-height: "20px";
+    border: "1px solid grey";
 }
\ No newline at end of file