Introducing custom properties to make responsiveness easier

docs/index.html

@@ -52,7 +52,7 @@
         <input type="text" id="courseField" name="fname" required><br><br>
         <label for="courseNum">Course Number (Ex: "307"):</label>
         <input type="text" id="courseNum" name="fname" required><br><br>
-        <label for="courseName">Course Name (Optional, useful for same-number classes Ex: UGS 303):</label>
+        <label for="courseName">Course Name (Optional, for same-number classes Ex: UGS 303):</label>
         <input type="text" id="courseName" name="fname"><br><br>
         <!-- <label for="sectionNum">Section Number (Optional, Experimental)</label>
         <input type="text" id="sectionNum" name="fname" required><br><br> -->

docs/main.css

@@ -1,3 +1,11 @@
+:root {
+    --bg-form-padding: 3px;
+    --form-padding: 3px;
+    --p-size: 10px;
+    --label-size: 10px;
+    --h1-size: 15px;
+}
+
 body {
     font-family: 'Helvetica Neue', sans-serif;
     background: #1b1a2a;
@@ -78,22 +86,24 @@ footer {
 }
 
 p {
-  font-size: 10px;
+    font-size: var(--p-size);
     line-height: 1.5;
     margin: 0 0 1rem 0
 }
 
 label {
-  font-size: 10px;
+    font-size: var(--label-size);
 }
 
 h1 {
-  font-size: 15px;
+    font-size: var(--h1-size);
     margin: 0 0 1rem 0
 }
 
 /* Tablet */
 @media (min-width:600px) {
+    :root {}
+
     .bg-form {
         padding: 15px;
     }