Add more styles and make more responsive

index.html

@@ -12,14 +12,14 @@
 
     <main>
         <div class="pen-input">
-            <h3 class="tool-labels">Pen Colors</h3>
+            <h3 class="tool-labels" id="h3-pen-color">Pen Colors</h3>
             <div class="pen-color">
                 <button class="pen" id="blackColor">Black</button>
                 <button class="pen" id="whiteColor">White</button>
                 <button class="pen" id="rgbColor">RGB</button>
 
                 <div class="col-picker">
-                    <label class="color-label" for="custom-color">Custom</label>
+                    <label class="sub-labels" for="custom-color">Custom</label>
                     <input class="color-input" type="color" id="custom-color" value="#ff0000">
                 </div>
             </div>
@@ -40,7 +40,7 @@
             <h3 class="tool-labels">Grid Tools</h3>
             <div class="grid-tools">
                 <div class="slider">
-                    <label class="tool-sub-labels" for="gridSlider">Grid Size: <span id="sliderLabel"></span></label>
+                    <label class="sub-labels" for="gridSlider">Grid Size: <span id="sliderLabel"></span></label>
                     <input name="gridSlider" id="gridSlider" type="range" min="1" max="100" value="16">
                     <div class="knob-container">
                         <div class="knob" id="range-knob">
@@ -52,7 +52,7 @@
 
                 <div class="knobless-grid-tools">
                     <div class="background-col-picker">
-                        <label class="tool-sub-labels" for="back-col-picker">Canvas color:</label>
+                        <label class="sub-labels" for="back-col-picker">Canvas color:</label>
                         <input class="color-input" type="color" id="back-col-picker" value="#ff0000">
                     </div>
                     <div class="grid-buttons">

style.css

@@ -32,19 +32,36 @@ main {
     flex: 1;
 }
 
-h3 {
-    
+.tool-labels {
+    margin: 13px 0;
+    font-size: 24px;
+    color: #68ffd8;
 }
 
 footer {
     width: 100%;
     background-color: #111;
     opacity: .8;
+    flex: 0 0 auto; 
 }
 
-button, .container, .color-input {
+button, .container, .color-input, .knob-shadow {
     box-shadow: 1px 2px 10px 1px #555;
+}
+
+button, .container, .color-input, .knob {
     cursor: pointer;
+    background-color: #f0fbf8;
+    border: none;
+    color: #000;
+}
+button:hover, .container:hover, .color-input:hover {
+    background-color: #68ffd8;
+}
+
+button:active, .container:active, .color-input:active{
+    background-color: #017070;
+    color: #f0fbf8;
 }
 
 .pen-input, .grid-input {
@@ -67,9 +84,10 @@ button, .container, .color-input {
     padding: 0 10px;
 }
 
-.tool-sub-labels {
+.sub-labels {
     padding-bottom: 5px;
     font-size: 18px;
+    color: #f0fbf8;
 }
 
 .color-input {
@@ -88,7 +106,7 @@ button {
 .container{
     border: 1px solid #bbb;
     height: 500px;
-    width: 500px;
+    max-width: 500px;
     display: flex;
     flex-wrap: wrap;
     background: rgb(180, 254, 235);
@@ -128,7 +146,6 @@ button {
     width: 95px;
     height: 95px;
     border-radius: 50%;
-    box-shadow: 1px 2px 10px 1px #555;
     position: absolute;
     top: 5%;
     left: 1%;
@@ -139,8 +156,6 @@ button {
     width: 95px;
     height: 95px;
     border-radius: 50%;
-    cursor: pointer;
-    background: #bbb;
     margin-top: 5px;
     position: relative;
     z-index: 1;
@@ -173,6 +188,10 @@ button {
 }
 
 @media screen and (max-width: 900px) {
+    header {
+        font-size: 20px;
+    }
+
     main {
         flex-direction: column;
     }
@@ -184,9 +203,18 @@ button {
       flex-wrap: wrap;
     }
 
-    .tool-sub-labels {
+    #h3-pen-color{
+        margin-bottom: -13px;
+    }
+
+    .sub-labels {
         display: flex;
         flex-direction: column;
     }
-  }
+}
  
+@media screen and (max-width: 559px) {
+    #h3-pen-color {
+        margin: 13px 0;
+    }
+}