feat: rename, word-wrap, some styling

src/App.css

@@ -1,22 +1,25 @@
 body {
-  background-color: #ffcc00;
+  background-color: ghostwhite;
   color: black;
+  overflow-wrap: anywhere;
 }
 
 #root {
   max-width: 1280px;
   margin: 0 auto;
-  padding: 2rem;
+  padding: 8px;
   text-align: center;
 }
 
-.read-the-docs {
+.grey {
   color: #444;
 }
 
-h3 {
+h1,
+h2 {
   margin-top: 0px;
   margin-bottom: 0px;
+  background-color: ghostwhite;
 }
 
 .dragbox {
@@ -24,15 +27,33 @@ h3 {
   flex-direction: column;
   flex-basis: 0;
   flex-grow: 1;
-  position: relative;
+  min-height: 32px;
   height: 100%;
 }
 
 .box {
   min-width: 30%;
   padding: 4px;
-  margin: 4px;
+  margin: 4px auto;
   border-style: solid;
   border-color: black;
 }
 
+.user {
+  max-width: 80%;
+}
+
+.item {
+  font-size: small;
+  border: 3px dashed black;
+  border-radius: 4px;
+  margin: 8px auto;
+  padding: 4px 8px;
+}
+
+button {
+  font-weight: bold;
+  color: ghostwhite;
+  background-color: black;
+  border: 4px solid black;
+}