Add site header and restyle page content

static/main.css

@@ -6,12 +6,10 @@ html {
 
 body {
   font-family: Open Sans,Arial;
-  color: #d4d4d4;
-  background-color: #252422;
-  font-size: 16px;
-  margin: 1em auto;
+  color: #e4e4e4;
+  font-size: 14px;
+  margin: auto;
   max-width: 48em;
-  padding: 1em;
   line-height: 1.4;
   -webkit-hyphens: auto;
   -ms-hyphens: auto;
@@ -27,11 +25,42 @@ li {
 }
 
 a {
-  color:#00a2e7
+  color: #fa4c58;
+  text-decoration: none;
+  font-weight: bold;
 }
 
 a:visited {
-  color:#ca1a70;
+  color: #ac69e2;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+#site-content {
+  height: 20em;
+  margin: 5em auto;
+  padding: 1em;
+  border-radius: 1em;
+  background: rgba(0,0,0, 0.6);
+  box-shadow: 1em 1em 1em 1em rgba(0,0,0, 0.5);
+}
+
+#ascii-header {
+  font-size: 10px;
+  color: #e4e4e4;
+  text-decoration: none;
+}
+
+#ascii-header a {
+  color: #e4e4e4;
+  text-decoration: none;
+}
+
+#ascii-header a:visited {
+  color: #e4e4e4;
+  text-decoration: none;
 }
 
 .blog-post-date {
@@ -39,29 +68,25 @@ a:visited {
  padding: 0;
 }
 
-#blog-title {
+.blog-title {
   margin-bottom: 0;
 }
 
 
-/* Magic frog pool CSS lives here */
-#frog-pool-container {
+/* Magic background CSS lives here */
+#bg-effect-container {
   z-index: -1;
   position: absolute;
   bottom: 0%;
   left: 0%;
-  /*transform: translate(-50%, -50%);*/
-  transform: rotate(0deg);
-  background: rgb(37,36,34);
-  background: linear-gradient(-20deg, rgba(37,36,34,1) 25%, rgba(62,34,143,1) 60%, rgba(39,171,198,1) 95%); 
   height: 100%;
   width: 100%;
-  background-color: blue;
+  background-color: #252422;
   overflow: hidden;
 }
 
-.frog-pool-water {
-}
-
-.frog-pool-emoji {
+.bg-effect {
+  background: linear-gradient(to bottom right, rgba(0,0,0,1) 10%, rgba(65,14,105, 0.6) 40%, rgba(55,17,95,0.7) 50%, rgba(32,14,84,0.6) 60%, rgba(0,0,0,1) 90%);
+  height: 100%;
+  width: 100%;
 }