improved both comment box and general style

css/default.css

@@ -20,12 +20,19 @@ body background: #ddeeff
 
  */
 
+@import 'https://fonts.googleapis.com/css?family=Crimson+Text';
+@import 'https://fonts.googleapis.com/css?family=Eczar';
+
 body {
-    color: #222211;
+    color: #335555;
     background-color: #99bbdd;
     background: linear-gradient(to top right, #99bbdd, #3366aa);
 
     font-size: 12px;
+    font-family: Eczar, serif;
+
+    line-height: 1.4;
+
     margin: 0px 5px 0px 5px;
 }
 
@@ -33,7 +40,7 @@ div#header {
     color: #335555;
     border-bottom: 2px solid #335555;
     margin-bottom: 20px;
-    padding: 12px 0px 12px 0px;
+    padding: 1em 0em 2em 0em;
 }
 
 div#logo a {
@@ -71,24 +78,33 @@ div#footer {
 }
 
 div#content {
-    color: #222211;
+    color: #444455;
     background-color: #ddeeff;
     background: linear-gradient(to bottom left, #99bbdd, #ddeeff);
     padding: 20px;
-    width: 80%;
+    max-width: 50em;
 }
 
 h1 {
+    color: #222211;
     font-size: 24px;
+    padding-top: 0.2em;
 }
 
 h2 {
+    color: #222211;
     font-size: 20px;
+    padding-top: 0.2em;
+}
+
+h3 {
+    font-size: 16px;
+    padding-top: 0.2em;
 }
 
 div.info {
     color: #335555;
-    font-size: 14px;
+    font-size: 10px;
     font-style: italic;
 }
 
@@ -103,9 +119,13 @@ img {
 }
 
 div.sourceCode {
-    margin-left: 10%;
-    margin-right: 10%;
-    background-color: #ffffff;
+    margin-left: 3em;
+    margin-right: 3em;
+    padding: 1em;
+    vertical-align: text-bottom;
+    align: left;
+    border-left: 2px solid #5599dd;
+    background-color: #ffffee;
 }
 
 div.caption {
@@ -136,7 +156,7 @@ a:visited {
 
     position: relative;
     color: #335555;
-    font-size: 12px;
+    font-size: 11px;
     display: inline;
 }
 
@@ -144,13 +164,21 @@ a:visited {
     content: "Comment?";
 }
 
+.comment-click:focus {
+    pointer-events: none;
+}
+
 .comment-click:focus .comment-clicked {
-    display: block;
+    opacity: 1;
+    visibility: visible;
+    pointer-events: auto;
 }
 
 .comment-clicked {
     position: relative;
     z-index: 1;
     text-align: left;
-    display: none;
+    opacity: 0;
+    visibility: hidden;
+    transition: visibility 0.5s;
 }