From 9de03d472183e0d4c6336f73eecd3ea2c6b96b02 Mon Sep 17 00:00:00 2001
From: lolabird <octavia@octavianichols.com>
Date: Sat, 11 Nov 2023 08:24:33 -0700
Subject: [PATCH] Add styles

---
 index.html |  8 ++++----
 style.css  | 28 ++++++++++++++++++++++++++++
 2 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index 60ea2d2..f9c108d 100644
--- a/index.html
+++ b/index.html
@@ -18,8 +18,8 @@
                 <button class="pen" id="rgbColor">RGB</button>
 
                 <div class="col-picker">
-                    <label for="custom-color">Pen color:</label>
-                    <input type="color" id="custom-color" value="#ff0000">
+                    <label class="color-label" for="custom-color">Pen color:</label>
+                    <input class="color-input" type="color" id="custom-color" value="#ff0000">
                 </div>
 
                 <button class="pen" id="erase">Erase</button>
@@ -46,8 +46,8 @@
                 </div>
 
                 <div class="background-col-picker">
-                    <label for="back-col-picker">Canvas color:</label>
-                    <input type="color" id="back-col-picker" value="#ff0000">
+                    <label class="color-label" for="back-col-picker">Canvas color:</label>
+                    <input class="color-input" type="color" id="back-col-picker" value="#ff0000">
                 </div>
 
                 <button id="gridToggle">Grid</button>
diff --git a/style.css b/style.css
index 950186c..1a67864 100644
--- a/style.css
+++ b/style.css
@@ -14,9 +14,37 @@ body{
     display: flex;
     flex-direction: column;
     justify-content: center;
+    align-items: center;
     margin: 20px;
 }
 
+.pen-color, .pen-tools, .grid-tools, 
+.col-picker, .background-col-picker {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.col-picker, .background-col-picker {
+    margin: 5px;
+    width: 100px;
+}
+
+.color-label {
+    padding-bottom: 5px;
+}
+
+.color-input {
+    width: 100%
+}
+
+button {
+    display: block;
+    width: 100px;
+    margin: 5px;
+
+}
+
 .container{
     border: 1px solid #bbb;
     height: 500px;