Resturcturing and adding of content, fixing of display bugs related to responsive design, slight de-spaghettification of CSS. Prep work for the yet to be implemented blog engine.

style.css

@@ -1,3 +1,6 @@
+:root{
+    --contrast-bg: #001000;
+}
 body{
     margin: 0;
     font-size: 16px;
@@ -64,6 +67,10 @@ nav{
     font-size: 1.1em;
 }
 
+li{
+    list-style: square;
+}
+
 .links-nav{
     display: flex;
     flex-direction: row;
@@ -98,9 +105,13 @@ a.highlight{
     grid-template-columns: 33% 33.5% 33%;
 }
 
+.project{
+    height: 180px;
+}
+
 .project, .social, .question{
     padding: 5px;
-    background: #000800;
+    background: var(--contrast-bg);
 }
 
 .social, .question, .answer{
@@ -131,7 +142,7 @@ a.highlight{
 }
 
 .split>.answer{
-    background: #000800;
+    background: var(--contrast-bg);
 }
 
 .split{
@@ -149,7 +160,7 @@ a.highlight{
 }
 
 .license-head{
-    background: #000800;
+    background: var(--contrast-bg);
     text-align: left;
 }
 
@@ -161,7 +172,21 @@ a.highlight{
     width: 20%;
 }
 
+/* Links-specific */
 
+.buttons-88x31>a{
+    text-decoration: none;
+}
+
+.buttons-88x31>a>img{
+    display: inline-block;
+    width: 88px;
+    height: 31px;
+    line-height: 31px;
+    image-rendering: pixelated;
+    text-align: center;
+    background: var(--contrast-bg)
+}
 
 /* Text-/ASCII-Art formating */
 
@@ -227,19 +252,29 @@ a.highlight{
 
 /* Responsive Design */
 
-@media (min-width: 1000px){
+@media (min-width: 1001px){
     .spacer::before{
         content: "================================="
         /* 33 symbols */
     }
+    /* The following a terrible fix to a problem that could be fixed otherwise, but I currently can't be bothered to do so */ 
+    .smaller-spacer::before{
+        content: "============================"
+        /* 28 symbols */
+    }
+    
 }
 
 
-@media (max-width: 999px) and (min-width: 605px){
+@media (max-width: 1000px) and (min-width: 605px){
     .spacer::before{
         content: "================";
         /* 16 symbols */
     }
+    .smaller-spacer::before{
+        content: "==========="
+        /* 11 symbols */
+    }
     .socials-grid{
         grid-template-columns: auto auto;
     }
@@ -257,7 +292,7 @@ a.highlight{
     }
 }
 
-@media (max-width: 999px) and (min-width: 750px){
+@media (max-width: 1000px) and (min-width: 750px){
     .site-head{
         font-size: 0.75em;
     }
@@ -280,10 +315,9 @@ a.highlight{
         flex-direction: column;
     }
 
-    .links-nav>pre>a{
+    .links-nav>span>a{
         width: 100%;
         display: inline-block;
-        text-align: center;
     }
 
     .vertical-divider-nav{