feat: Updates styles in css and views.

Public/styles/site.css

@@ -1,8 +1,13 @@
+:root {
+  --form-control-color: violet;
+}
+
 * {
   padding: 0;
   margin: 0;
   box-sizing: border-box;
 }
+
 body {
   background-color: #1E1E2E;
   color: white;
@@ -57,32 +62,111 @@ ul {
   padding: 10px 20px;
 }
 
-.description {
+footer {
+  position: absolute;
+  width: 100%;
+  bottom: 0px;
+}
+
+form {
+  position: relative;
+  padding: 40px;
+}
+
+.form-control {
+  font-family: system-ui, sans-serif;
+  font-size: 24px;
+  font-weight: bold;
+  line-height: 1.1;
+  display: inline-block;
+  grid-template-columns: 1em auto;
+  gap: 0.5em;
+}
+
+input[type="radio"] {
+  /* Add if not using autoprefixer */
+  -webkit-appearance: none;
+  appearance: none;
+  /* For iOS < 15 to remove gradient background */
+  background-color: #fff;
+  /* Not removed via appearance */
+  margin: 2px 40px;
+  font: inherit;
+  color: currentColor;
+  width: 1.15em;
+  height: 1.15em;
+  border: 0.15em solid currentColor;
+  border-radius: 50%;
+  transform: translateY(-0.075em);
+  display: grid;
+  place-content: center;
+}
+
+input[type="radio"]::before {
+  content: "";
+  width: 0.65em;
+  height: 0.65em;
+  border-radius: 50%;
+  transform: scale(0);
+  transition: 120ms transform ease-in-out;
+  box-shadow: inset 1em 1em var(--form-control-color);
+  background-color: CanvasText;
+}
+
+input[type="radio"]:checked::before {
+  transform: scale(1);
+}
+
+input[type="radio"]:focus {
+  outline: max(2px, 0.15em) solid currentColor;
+  outline-offset: max(2px, 0.15em);
+}
+
+.form-control:focus-within {
+  color: var(--form-control-color);
+}
+
+.form-control + .form-control {
+  margin-top: 1em;
+}
+
+.bg-dark {
+  background-color: violet;
+}
+
+.bg-light {
+  background-color: #ACFFFC;
+}
+
+.light {
+  color: violet;
+}
+
+.dark {
+  color: #ACFFFC;
+}
+
+.spaced-cnt {
   padding-top: 20px;
 }
 
+.grp-radio {
+  display: inline-block;
+}
+
 .container {
   display: flex;
 }
 
-.pros {
+.flex-cnt {
   flex 1 300px;
   width: 50%;
   min-height: 200px;
   padding: 5px;
 }
 
-.cons {
-  flex 1 300px;
-  min-height: 200px;
-  width: 50%;
-  padding: 5px;
-}
-
 .counter-container {
   position: relative;
-  /* border 5px solid MediumSeaGreen; */
-  /* border-radius: 5px 5px 0px 0px; */
 }
 
 .counter {
@@ -97,27 +181,26 @@ ul {
   left: 10px;
 }
 
-.pros-list {
+.list {
   position: relative;
-  border 2px solid green;
   border-radius: 10px;
-  background-color: MediumSeaGreen;
 }
 
-.cons-list {
-  position: relative;
-  border 2px solid green;
-  border-radius: 10px;
-  background-color: Tomato;
+.dark-radius {
+  border: 2px solid violet;
 }
 
+.light-radius {
+  border: 2px solid #ACFFFC;
+}
 
 .listHeader {
-  /* margin: auto; */
   padding: 10px;
 }
 
-.center {
+.centered {
+  display: block;
+  align-content: center;
   margin: auto;
   top: 50%;
   width: 100%;
@@ -130,16 +213,11 @@ ul {
   margin 80px;
 }
 
-form {
-  position: relative;
-  padding: 40px;
+.btn {
+  border-radius: 20px;
 }
 
-.loginButton {
-  background-color: blue;
-  color: white;
-  border: 2px solid violet;
-  border-radius: 20px;
+.btn-submit {
   height 100px;
   width: 50%;
   padding: 10px;