Add styles

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">
@@ -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>

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 {