feat: Adds some style updates.

Public/styles/site.css

@@ -11,40 +11,30 @@
 body {
   background-color: #1E1E2E;
   color: white;
-  padding: 20px;
   margin: 10px;
 }
 
 p {
   font-family: verdana;
-  font-size: 20px;
+  font-size: 2em;
 }
 
 h1 {
   color: violet;
+  font-size: 4em;
 }
 
 h2 {
   color: violet;
+  font-size: 3em;
 }
 
 input[type=text] {
-  border 2px solid red;
+  border 2px solid grey;
   border-radius 4px;
-  margin: 8px 0;
   padding: 12px 20px;
-  width: 50%;
-  box-sizing: border-box;
-}
-
-select {
-  border 2px solid violet;
-  background-color: blue;
-  border-radius: 10px;
-  color: white;
-  margin: 10px;
-  padding: 10px 40px;
-  font-size: 20px;
+  width: 100%;
+  font-size: 1.25em;
 }
 
 label {
@@ -53,7 +43,7 @@ label {
 }
 
 li {
-  font-size: 20px;
+  font-size: 1.5em;
   padding: 10px;
   margin: 10px;
 }
@@ -63,19 +53,24 @@ ul {
 }
 
 footer {
-  position: absolute;
+  position: sticky;
   width: 100%;
   bottom: 0px;
+  font-size: 1em;
 }
 
 form {
-  position: relative;
-  padding: 40px;
+  width: 98%;
+  /* background-color: lightgrey; */
+  /* border: 4px solid grey; */
+  /* border-radius: 10px; */
+  margin: 10px 10px;
+  padding-bottom: 20px;
 }
 
 .form-control {
   font-family: system-ui, sans-serif;
-  font-size: 24px;
+  font-size: 2em;
   font-weight: bold;
   line-height: 1.1;
   display: inline-block;
@@ -156,13 +151,16 @@ input[type="radio"]:focus {
 
 .container {
   display: flex;
+  flex-flow: row wrap;
+  padding: 20px 10px;
+  gap: 10px;
 }
 
 .flex-cnt {
-  flex 1 300px;
-  width: 50%;
+  flex-grow 1;
+  width: 100%;
   min-height: 200px;
-  padding: 5px;
+  padding: 15px 5px;
 }
 
 .counter-container {
@@ -201,8 +199,7 @@ input[type="radio"]:focus {
 .centered {
   display: block;
   align-content: center;
-  margin: auto;
-  top: 50%;
+  margin: 0;
   width: 100%;
   text-align: center;
 }
@@ -219,7 +216,7 @@ input[type="radio"]:focus {
 
 .btn-submit {
   height 100px;
-  width: 50%;
+  width: 100%;
   padding: 10px;
-  font-size: 16px;
+  font-size: 1.25em;
 }

Resources/Views/loggedIn.leaf

@@ -10,24 +10,26 @@
       <small>You can add as many pros and cons as you would like.</small>
       </p>
     </div>
-    <form id="proconForm" action="submitProOrCon">
-      <div class="spaced-cnt">
-        <label class="form-control light" for="pro">
-          <input type="radio" id="pro" name="type" value="pro">
-          Pro
-        </label>
-        <label class="form-control dark" for="con">
-          <input type="radio" id="con" name="type" value="con">
-          Con
-        </label>
-      </div>
-      <br>
-      <input type="text" id="description" name="description" placeholder="Description" required>
-      <br>
-      <br>
-      <input class="btn btn-submit dark bg-dark light-radius" type="submit" value="Submit">
-    </form>
+    <br>
+    <br>
   </div>
+  <form id="proconForm" action="submitProOrCon">
+    <div class="centered">
+      <label class="form-control light" for="pro">
+        <input type="radio" id="pro" name="type" value="pro" checked>
+        Pro
+      </label>
+      <label class="form-control dark" for="con">
+        <input type="radio" id="con" name="type" value="con">
+        Con
+      </label>
+    </div>
+    <br>
+    <input type="text" id="description" name="description" placeholder="Description" required>
+    <br>
+    <br>
+    <input class="btn btn-submit dark bg-dark light-radius" type="submit" value="Submit">
+  </form>
   #if(count(pros) > 0 || count(cons) > 0):
   <div class="container">
     <div class="flex-cnt">