Tweaks to styling, navbar image-border, and fixes to inconsistent responsive layout across pages other than main.php

css/global/styling/global-styling.css

@@ -15,7 +15,7 @@ html {
     --input-background-hover:   rgb(216, 222, 227);
     --input-highlight:          rgb(86, 176, 255);
     --navvar-background:        rgb(179, 200, 218);
-    --navbar-buttons-bg:        var(--accent-color-light);
+    --navbar-buttons-bg:        white;
     --navbar-buttons-hover:     var(--input-background-hover);
     --input-border-radius:      var(--border-radius);
     --link-color:               var(--accent-color-dark);
@@ -27,7 +27,7 @@ html {
 body { background-image: url('graphgreen.gif'); }
 
 
-/* ----------------- Others -------------------- */ 
+/* ----------------- Others -------------------- */
 
 * { scrollbar-width: thin;}
 
@@ -76,7 +76,6 @@ img { image-rendering: pixelated;}
 body { font-family: 'special elite', honyaji, basiic, monospace, serif, sans-serif; }
 
 /* ----------------- Color -------------------- */
-.navbar { background-color: var(--navvar-background); }
 
 .panel {
     position:               relative;
@@ -99,12 +98,19 @@ body { font-family: 'special elite', honyaji, basiic, monospace, serif, sans-ser
 /* ------------- Navbars stiling ------------------- */
 .about, .links > div, .lang-picker { 
     border:                     5px groove rgb(214, 236, 255);
-    background:                 var(--navbar-buttons-bg);}
+    background-color:           var(--navbar-buttons-bg);}
 
 .about:hover, .links > div:hover, .lang-picker:hover { 
     background-color:           var(--navbar-buttons-hover);
     transition:                 background-color 0.1s;}
 
+.navbar {
+    border-style:               solid;
+    border-width:               20px;
+    border-image:               url('../../../img/ui/border-1.png') 9 10 fill round;
+    margin:                     10px;
+    image-rendering:            pixelated;}
+
 /* ------------- Inputs & links ----------------- */
 button, .button {
     font-family:                'special elite';
@@ -171,4 +177,9 @@ a:hover {
     .logo a {
         color:              white;
         text-decoration:    none;
-    }
+    }
+
+@media only all and (max-width:700px) {
+    .navbar.bot { margin-top: 0px; }
+    .navbar.top { margin-bottom: 0px; }
+}