feat: Better styling on web pages, bad-words check now has less edge cases.

Public/styles/site.css

@@ -1,6 +1,13 @@
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
 body {
   background-color: #1E1E2E;
   color: white;
+  padding: 20px;
+  margin: 10px;
 }
 
 p {
@@ -42,27 +49,72 @@ label {
 
 li {
   font-size: 20px;
+  padding: 10px;
+  margin: 10px;
+}
+
+ul {
+  padding: 10px 20px;
+}
+
+.description {
+  padding-top: 20px;
+}
+
+.container {
+  display: flex;
 }
 
 .pros {
-  border 2px solid green;
-  border-radius: 10px;
-  background-color: MediumSeaGreen;
-  margin: 10px;
-  opacity: 0.7;
+  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 {
+  position: absolute;
+  top: 2px;
+  right: 10px;
+}
+
+.counter-label {
+  position: relative;
+  top: 2px;
+  left: 10px;
+}
+
+.pros-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;
-  margin: 10px;
-  opacity: 0.7;
 }
 
+
 .listHeader {
-  margin: auto;
-  padding: 20px;
+  /* margin: auto; */
+  padding: 10px;
 }
 
 .center {