From 2c7f9f64db8c6d13ed48084fc7e6a379e275f9c9 Mon Sep 17 00:00:00 2001
From: lolabird <octavia@octavianichols.com>
Date: Sat, 11 Nov 2023 23:15:42 -0700
Subject: [PATCH] Add styles

---
 index.html | 14 +++++++++-----
 style.css  | 32 ++++++++++++++++++++++++++++++--
 2 files changed, 39 insertions(+), 7 deletions(-)

diff --git a/index.html b/index.html
index 8b2dbe9..15da4cb 100644
--- a/index.html
+++ b/index.html
@@ -7,10 +7,10 @@
     <link rel="stylesheet" href="style.css">
 </head>
 <body>
-    <h1>Etch-A-Sketch</h1>
+    <header><h1>Etch-A-Sketch</h1></header>
+    
 
-
-    <div class="area">
+    <main>
         <div class="pen-input">
             <h3 class="tool-labels">Pen Colors</h3>
             <div class="pen-color">
@@ -23,7 +23,7 @@
                     <input class="color-input" type="color" id="custom-color" value="#ff0000">
                 </div>
             </div>
-            
+
             <h3 class="tool-labels">Pen Tools</h3>
             <div class="pen-tools">
                 <button class="pen" id="tint">Lighten</button>
@@ -56,7 +56,11 @@
                 <button id="reset">Reset</button>
             </div>
         </div>
-    </div>
+    </main>
+
+    <footer>
+        Created by <a href="https://andrindie.com">Octavia Nichols</a>
+    </footer>
     
 
     <script src="script.js"></script>
diff --git a/style.css b/style.css
index 4713af9..fe190e6 100644
--- a/style.css
+++ b/style.css
@@ -1,18 +1,46 @@
 html {
     height: 100%;
 }
+
 body{
     background-image: linear-gradient(160deg, #a50071, #4b588c, #5fa66a, #017070);
     background-attachment: fixed;
     color: #eee;
     text-align: center;
+    font-family: "Andale Mono", monospace;
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    margin: 0;
 }
-.area{
+
+header {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 30px;
+    background: #111;
+    opacity: .8;
+    width: 100%;
+    flex: 0 0 auto; 
+}
+
+main {
     display: flex;
     justify-content: center;
     align-items: center;
-    height: 90vh;
     flex-wrap: wrap;
+    flex: 1;
+}
+
+footer {
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    background-color: #111;
+    opacity: .8;
+    flex: 0 0 auto; 
 }
 
 .pen-input, .grid-input {