feat: css finally

pages/css/blink.css

@@ -0,0 +1,27 @@
+*::selection {
+    background: #c0c5ce;
+    color: #1c1f26;
+  }
+  *::-moz-selection {
+    background: #c0c5ce;
+    color: #1c1f26;
+  }
+  *::-webkit-selection {
+    background: #c0c5ce;
+    color: #1c1f26;
+  }
+  
+  @keyframes blink {
+    0% { opacity: 1.0; }
+    50% { opacity: 0.0; }
+    100% { opacity: 1.0; }
+  }
+  @-webkit-keyframes blink {
+    0% { opacity: 1.0; }
+    50% { opacity: 0.0; }
+    100% { opacity: 1.0; }
+  }
+  .blink {
+    animation: blink 1s step-start 0s infinite;
+    -webkit-animation: blink 1.5s step-start 0s infinite;
+  }

pages/css/main.css

@@ -2,15 +2,21 @@
     scrollbar-color: #202324 #454a4d;
 }
 
-html {
+html, body {
     background-color: #232830;
 }
 
 body {
     font-family: 'Lora', serif;
-    font-size: 21px;
-    background-color: #232830;
+    font-size: 26px;
     text-rendering: optimizeLegibility;
+    max-width: 40em;
+    margin: 0 auto;
+    padding: 1em;
+}
+
+body, a {
+    color: #c0c5ce;
 }
 
 a {
@@ -18,3 +24,42 @@ a {
     text-decoration-color: #283593;
     text-decoration-thickness: 2px;
 }
+
+a:hover {
+    text-decoration: underline;
+    text-decoration-color: #5f5fc4;
+    text-decoration-thickness: 2px;
+}
+
+p {
+    margin-bottom: .7em;
+    text-align: justify;
+}
+
+h1 {
+    font-size: 1.9em;
+    margin-bottom: .7em;
+}
+
+ol, ul {
+    margin: .7em 0 0 1.3em;
+}
+  
+li {
+    margin-bottom: 0.3em;
+}
+
+hr {
+    border: 0;
+    border-top: 1px dashed #d2d2d2;
+    height: 0;
+    margin: 1.6em 0;
+}
+
+header {
+    margin: 1.3em 0 2em;
+}
+
+.blink {
+    margin-left: -5px;
+}