Splitting more, added chat, and fancier draw-animations

src/styles/global.scss

@@ -85,7 +85,8 @@ body {
   }
 }
 
-input, textarea {
+input,
+textarea {
   border-radius: 0;
   box-shadow: none;
   -webkit-appearance: none;
@@ -116,7 +117,7 @@ input, textarea {
   touch-action: manipulation;
 
   &::after {
-    content: '';
+    content: "";
     position: absolute;
     transition: opacity 0.3s ease-in-out;
     z-index: -1;
@@ -125,12 +126,9 @@ input, textarea {
     top: 0;
     left: 0;
     opacity: 0;
-    box-shadow: 0 1px 2px rgba(0,0,0,0.07),
-                0 2px 4px rgba(0,0,0,0.07),
-                0 4px 8px rgba(0,0,0,0.07),
-                0 8px 16px rgba(0,0,0,0.07),
-                0 16px 32px rgba(0,0,0,0.07),
-                0 32px 64px rgba(0,0,0,0.07);
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.07),
+      0 4px 8px rgba(0, 0, 0, 0.07), 0 8px 16px rgba(0, 0, 0, 0.07),
+      0 16px 32px rgba(0, 0, 0, 0.07), 0 32px 64px rgba(0, 0, 0, 0.07);
   }
 
   &:hover {
@@ -141,3 +139,29 @@ input, textarea {
     }
   }
 }
+
+.ballot-element {
+  margin: 20px 0;
+  -webkit-mask-image: url(/../../public/assets/images/lodd.svg);
+  background-repeat: no-repeat;
+  mask-image: url(/../../public/assets/images/lodd.svg);
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  color: #333333;
+
+  &.green-ballot {
+    background-color: $light-green;
+  }
+
+  &.blue-ballot {
+    background-color: $light-blue;
+  }
+
+  &.yellow-ballot {
+    background-color: $light-yellow;
+  }
+
+  &.red-ballot {
+    background-color: $light-red;
+  }
+}