(carefully) update to the new style

adapted from howto.rc3.world!69 (closed)

this addresses (part of) #2.

tbh, I found the new styleguide confusing, incomplete, and in some parts I outright disagreed with it. Things that are deliberately not as the styleguide would have them:

• I kept Montserrat as main font for normal text
• the navbar, sidebar, and links still have their old colours (the styleguide would set all of them to pure white, which — since normal text is also white — I find a horrible idea)
• the background isn't an image. Instead it's a shade of gray I got by blurring the 10c_Background_dark_theme textures until only one indistinct colour was left

Apart from that, things I did change:

• header fonts and style (now all-lowercase)
• logo (though it gets a bit squashed in the favicon, not sure what to do about that)
• section headings and text are all pure white now

rc3-2021/css/base.css

-@font-face {
-    font-family: 'orbitronregular';
-    src: url('../fonts/orbitron-variablefont_wght-webfont.woff2') format('woff2'),
-         url('../fonts/orbitron-variablefont_wght-webfont.woff') format('woff');
-    font-weight: normal;
-    font-style: normal;
-}
 
 @font-face {
     font-family: 'montserratbold';
@@ -30,12 +23,18 @@
     font-style: normal;
 }
 
+@font-face {
+    font-family: 'changasemibold';
+    src: url('../fonts/changa-semibold.ttf');
+    font-weight: normal;
+    font-style: normal;
+}
 
 :root {
     --primary-c1: #f00efa;
     --primary-c2: rgba(104, 0, 231, 1);
     --primary-c3: #4ce9f8;
-    --primary-c4: rgba(16, 14, 35, 1);
+    --primary-c4: #0c0e0b;
     
     /*shaded versions*/
     /* --primary-c1-s1: rgba(103, 2, 149, 1); */
@@ -52,7 +51,7 @@
 
     --secondary-c1: rgba(253, 41, 79, 1);
     --secondary-c2: rgba(22, 10, 254, 1);
-    --secondary-c3: rgba(255, 235, 216, 1);
+    --secondary-c3: #fff;
     --secondary-c4: rgba(1, 2, 42, 1);
 
 
@@ -140,20 +139,18 @@ video {
 }
 
 h1 {
-    color: #444;
     font-weight: 400;
     font-size: 42px;
-    font-family: "orbitronregular";
-    text-transform: uppercase;
-    color: var(--primary-c3);
+    font-family: "changasemibold";
+    text-transform: lowercase;
+    color: var(--secondary-c3);
 }
 
 h2, h3, h4, h5, h6 {
-    color: #444;
     font-weight: 300;
-    font-family: "orbitronregular";
-    text-transform: uppercase;
-    color: var(--primary-c3);
+    font-family: "changasemibold";
+    text-transform: lowercase;
+    color: var(--secondary-c3);
 }
 
 hr {
@@ -174,8 +171,9 @@ code.code-large, .rst-content tt.code-large {
 
 code {
     padding: 2px 5px;
-    background: black;
-    border: solid 1px #8102fd;
+    background: #08191a;
+    border: solid 1px #226970;
+    border-radius: 3px;
     color: white;
     white-space: pre-wrap;
     word-wrap: break-word;
@@ -202,7 +200,7 @@ kbd {
 }
 
 a code {
-    color: #2FA4E7;
+    color: var(--primary-c1);
 }
 
 a:hover code, a:focus code {
@@ -269,9 +267,10 @@ footer a:hover {
 }
 
 .navbar {
-    font-family: "orbitronregular";
-    text-transform: uppercase;
+    font-family: "changasemibold";
+    text-transform: lowercase;
     border-bottom: 1px solid var(--primary-c1);
+    font-size: 15pt;
 }
 
 .bg-primary {