Make the design less aggresive

- Softer violet
- Add borders to delimit cards
- Bolder titles
- Bigger inputs

static/main.css

@@ -6,11 +6,11 @@ html, body {
 }
 
 h1, h2, h3, h4, h5, h6 {
-    font-weight: 200;
+    font-weight: bolder;
 }
 
 a, a:visited {
-    color: #7a28cb;
+    color: #7765e3;
     text-decoration: none;
 }
 
@@ -29,7 +29,7 @@ header nav a {
     margin: 0px 20px;
 }
 
-main > * {
+body > main > * {
     padding: 20px 20%;
 }
 
@@ -45,42 +45,36 @@ main article {
 
 .button, input[type="submit"] {
     background: white;
-    color: #7a28cb;
-    border: 1px solid #7a28cb;
+    color: #7765e3;
+    border: 1px solid #7765e3;
     border-radius: 3px;
     padding: 5px 10px;
     margin: 0px 20px;
+    cursor: pointer;
+    transition: ease-in 0.2s all;
+}
+
+.button:hover, input[type="submit"]:hover {
+    background: #7765e399;
+    color: white;
 }
 
 input[type="submit"] {
-    margin: 10px 0px;
+    margin: 40px 0px;
 }
 
 .article-meta {
     background: #F9F9F9;
 }
 
-.comment {
-    background: white;
-    border-radius: 3px;
-    padding: 20px;
-    margin: 10px 0px;
-    box-shadow: 0px 0px 5px #7a28cb1a;
-    margin-bottom: 20px;
-}
-
-.comment a {
-    margin-top: 10px;
-    display: block;
-}
-
 .inline-block {
     display: inline-block;
-    margin: 0px;
+    margin: 20px 0px;
 }
 
 label {
     display: block;
+    margin-top: 20px;
 }
 
 input {
@@ -88,19 +82,23 @@ input {
     border-bottom: 1px solid #DADADA;
     display: block;
     margin: 10px 0px;
+    padding: 5px;
+    width: 50%;
 }
 
 textarea {
     width: 100%;
     min-height: 200px;
     resize: vertical;
+    font-family: 'Utopia';
+    padding: 5px;
 }
 
 .badge {
     font-size: 12pt;
     background: white;
-    color: #7a28cb;
-    border: 1px solid #7a28cb;
+    color: #7765e3;
+    border: 1px solid #7765e3;
     border-radius: 3px;
     padding: 5px 10px;
     margin: 0px 10px;
@@ -134,3 +132,28 @@ textarea {
         width: 100%;
     }
 }
+
+.cards {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-auto-rows: 1fr;
+    grid-gap: 20px;
+}
+
+.card {
+    background: white;    
+    border: 1px solid #d0ccd0;
+    border-radius: 3px;
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+}
+
+.card main {
+    flex: 1;
+}
+
+.list {
+    display: grid;
+    grid-gap: 20px;
+}